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

2019-10-21 18:44:34

字体：大中小

来源：转载

供稿：网友

前言

本文主要给大家介绍了关于iOS实现系统相册大图浏览功能的相关资料，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

最终效果图

ios,查看大图,点击查看大图,点击图片查看大图
大图浏览

实现过程

创建两个UICollectionView分别放置大图和缩略图
实现大图和缩略图的联动
实现当前展示的大图对应的缩略图放大效果

实现原理

创建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];

部分实现代码

- (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;}

缩略图放大实现代码

- (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);}

源码下载：

Demo下载（本地下载）

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对VEVB武林网的支持。

注：相关教程知识阅读请移步到IOS开发频道。

上一篇：iOS实现UITableView左滑删除复制即用功能

下一篇：详解IOS 单例的两种方式