您好,登錄后才能下訂單哦!
前言
本文主要給大家介紹了關于iOS實現系統相冊大圖瀏覽功能的相關資料,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧。
最終效果圖
大圖瀏覽
實現過程
實現原理
創建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下載 (本地下載)
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。