快捷導(dǎo)航

利用iOS實現(xiàn)系統(tǒng)相冊大圖瀏覽功能詳解

更新時間：2017年09月19日 08:33:38 作者：laona

查看大圖是們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的一個需求，下面這篇文章主要給大家介紹了關(guān)于利用iOS實現(xiàn)系統(tǒng)相冊大圖瀏覽功能的相關(guān)資料，文中給出了詳細的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。

前言

本文主要給大家介紹了關(guān)于iOS實現(xiàn)系統(tǒng)相冊大圖瀏覽功能的相關(guān)資料，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細的介紹吧。

最終效果圖

大圖瀏覽

實現(xiàn)過程

創(chuàng)建兩個UICollectionView分別放置大圖和縮略圖
實現(xiàn)大圖和縮略圖的聯(lián)動
實現(xiàn)當(dāng)前展示的大圖對應(yīng)的縮略圖放大效果

實現(xiàn)原理

創(chuàng)建collectionView非常簡單，只要正常創(chuàng)建就好，值得注意的是：由于需要當(dāng)前展示的圖片的縮略圖始終保持在屏幕中間位置，所以在創(chuàng)建縮略圖的collectionView的時候需要對collection View設(shè)置好便宜量。

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

實現(xiàn)上下聯(lián)動通過兩個block來實現(xiàn)

-(void)collectionViewDidScrollWithScrollBlock:(DidScrollBlock)didScrollBlcok;
-(void)collectionViewDidScrollWithScrollBlock:(IndexScrollBlock)didScrollBlcok;

實現(xiàn)當(dāng)前顯示縮略圖放大通過設(shè)置collectionView的UICollectionViewFlowLayout實現(xiàn)

IndexFlow *flowLayout = [[IndexFlow alloc] init];
self = [super initWithFrame:frame collectionViewLayout:flowLayout];

部分實現(xiàn)代碼

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

縮略圖放大實現(xiàn)代碼

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)oldBounds
{
return YES;
}

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
// 取出所有元素
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 可視區(qū)域
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;
}

/**
 * 設(shè)置collectionView停止?jié)L動那一刻的位置
 *
 * @param proposedContentOffset 原本collectionView停止?jié)L動那一刻的位置
 * @param velocity       速度
 *
 * @return 最終的位置
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
CGFloat offsetAdjustment = MAXFLOAT;
CGFloat horizontalCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);
// 停止時刻的可視區(qū)域
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下載（本地下載）

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: