源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

利用iOS实现系统相册大图浏览功能详解

  • 时间:2020-06-05 18:08 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:利用iOS实现系统相册大图浏览功能详解
[b]前言[/b] 本文主要给大家介绍了关于iOS实现系统相册大图浏览功能的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 [b]最终效果图[/b] [img]http://files.jb51.net/file_images/article/201709/2017918185944052.gif?201781819017[/img] 大图浏览 [b]实现过程[/b] [list] [*]创建两个UICollectionView分别放置大图和缩略图[/*] [*]实现大图和缩略图的联动[/*] [*]实现当前展示的大图对应的缩略图放大效果[/*] [/list] [b]实现原理[/b] 创建collectionView非常简单,只要正常创建就好,值得注意的是:由于需要当前展示的图片的缩略图始终保持在屏幕中间位置,所以在创建缩略图的collectionView的时候需要对collection View设置好便宜量。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(0, (kScreenWidth - _itemWidth)/2, 0, (kScreenWidth - _itemWidth)/2);
}
实现上下联动通过两个block来实现
-(void)collectionViewDidScrollWithScrollBlock:(DidScrollBlock)didScrollBlcok;
-(void)collectionViewDidScrollWithScrollBlock:(IndexScrollBlock)didScrollBlcok;
实现当前显示缩略图放大通过设置collectionView的UICollectionViewFlowLayout实现
IndexFlow *flowLayout = [[IndexFlow alloc] init];
self = [super initWithFrame:frame collectionViewLayout:flowLayout];
[b]部分实现代码[/b]
- (void)collectionViewDidScrollWithScrollBlock:(DidScrollBlock)didScrollBlcok{

self.didScrollBlcok = didScrollBlcok;
}
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{

self.shouldDid = YES;

return YES;
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
self.shouldDid = NO;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
 if (self.shouldDid) {
  if (self.didScrollBlcok) {
    self.didScrollBlcok(self);
  }
 }
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(0, (kScreenWidth - _itemWidth)/2, 0, (kScreenWidth - _itemWidth)/2);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(_itemWidth, self.height);
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return _minLineSpacing;
}
[b]缩略图放大实现代码[/b]
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)oldBounds
{
return YES;
}

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
// 取出所有元素
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 可视区域
CGRect visibleRect;
visibleRect.origin = self.collectionView.contentOffset;
visibleRect.size = self.collectionView.bounds.size;  
for (UICollectionViewLayoutAttributes *attribute in array) {
  CGFloat distance = CGRectGetMidX(visibleRect) - attribute.center.x;
  CGFloat normalizedDistance = distance / ACTIVE_DISTANCE;
  if (ABS(distance) < ACTIVE_DISTANCE) {
    CGFloat zoom = 1 + ZOOM_FACTOR*(1 - ABS(normalizedDistance));
    attribute.transform3D = CATransform3DMakeScale(zoom, zoom, 1.0);
    attribute.zIndex = 1;
  }
}
return array;
}

/**
 * 设置collectionView停止滚动那一刻的位置
 *
 * @param proposedContentOffset 原本collectionView停止滚动那一刻的位置
 * @param velocity       速度
 *
 * @return 最终的位置
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
CGFloat offsetAdjustment = MAXFLOAT;
CGFloat horizontalCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);
// 停止时刻的可视区域
CGRect targetRect = CGRectMake(proposedContentOffset.x, 0.0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
NSArray* array = [super layoutAttributesForElementsInRect:targetRect];
for (UICollectionViewLayoutAttributes* layoutAttributes in array) {
  CGFloat itemHorizontalCenter = layoutAttributes.center.x;
  if (ABS(itemHorizontalCenter - horizontalCenter) < ABS(offsetAdjustment)) {
    offsetAdjustment = itemHorizontalCenter - horizontalCenter;
  }
}
return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
}
[b]源码下载:[/b] [url=http://git.oschina.net/remainedmute/BigImageShow]Demo下载[/url] ([url=http://xiazai.jb51.net/201709/yuanma/BigImageShow(jb51.net).rar]本地下载[/url]) [b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部