iOS點擊cell查看大圖，點擊大圖還原小圖，ios查看大圖

iOS點擊cell查看大圖，點擊大圖還原小圖，ios查看大圖
一、項目需求

用collectionView展示很多照片，點擊某個照片，用全屏scrollView無限迴圈的方式查看圖片。
點擊放大的圖片，圖片縮小到原先的尺寸。

gif1.gif所示，點擊中間的圖片，放大圖片，滑動圖片。再點擊大圖，圖片回到相應的位置。

 

gif1.gif

gif2.gif所示。當前顯示的圖片不在螢幕中，點擊大圖後，若圖片在螢幕頂部，則回到頂部；若在底部，則回到底部。

 

gif2.gif二、常見情境

微博、的相簿：九宮格展示照片，點擊某個圖片，圖片添加到scrollView上查看。

“微”家族的這兩哥們只是九宮格相簿，實現方法有很多很多，聰明富有技巧的方式、簡單粗暴的方式，應有盡有。我的項目是幾百張圖片，不適合九宮格的方式了，今天寫了個Demo，算是解決該問題的一種思路。

三、我的實現四、關鍵代碼（文末有github連結）UIViewController中的代碼

（1）計算cell在window中的位置。這裡只給出了scrollViewDidScroll中實現。在viewDidAppear方法裡也要計算一遍，因為如果不滑動，直接點擊cell，這時候也是需要獲得cell的rectInWindow的。

 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {    NSMutableArray<NSString *> *array = [NSMutableArray<NSString *> array];    for (NSInteger index = 0; index < self.modelArray.count; index++) {        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:0];        DYHeroCell *cell = (DYHeroCell *)[self.collectionView cellForItemAtIndexPath:indexPath];        UIWindow* window = [UIApplication sharedApplication].keyWindow;// 轉換座標系。把cell裡圖片的參照系從cell換成UIWindow        CGRect rectInWindow = [cell convertRect:cell.imageView.frame toView:window];        [array addObject:NSStringFromCGRect(rectInWindow)];    }// rectArray為cell原先位置(以window為參照系)的數組    self.rectArray = array;}

 

（2）點擊cell，建立baseView，傳過去需要的參數。

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {    DYBaseView *baseView = [[DYBaseView alloc] initWithFrame:self.view.bounds];    // 圖片數組    baseView.iconArray = self.iconArray;    // 位置數組    baseView.rectArray = self.rectArray;    // 當前cell對應下標    baseView.index = indexPath.row;    [[UIApplication sharedApplication].keyWindow addSubview:baseView];    baseView.backgroundColor = [UIColor blackColor];}

baseView中的代碼

（1）無限迴圈圖片輪播器。關於這一點，網上有很多文章。我附帶的Demo裡面也有相關代碼，就不貼代碼了。
（2）點擊scrollView之後，大圖縮小

 - (void)scrollViewDidClick {    // 因為scrollView的尺寸是三個螢幕的尺寸，所以如果直接用scrollView來做縮小動畫，效果不好看。    // 我就用這種簡單粗暴的方法來處理。直接移除scrollView，把正中間的圖片加到新的UIView上。    // 讓這個新UIView來完成我需要的動畫。    UIImageView *tempImageView = [[UIImageView alloc] initWithImage:_centerImageView.image];    CGFloat tempHeight = DYScreenW / _centerImageView.image.size.width * _centerImageView.image.size.height;    tempImageView.frame = CGRectMake(0, (DYScreenH-tempHeight)*0.5, DYScreenW, tempHeight);    [self addSubview:tempImageView];    [self.scrollView removeFromSuperview];    [self.indexLabel removeFromSuperview];    CGFloat width = _currentRect.size.width;    if (width <= 0) {  // 如果cell沒出現在介面中,即_currentRect = {0,0,0,0}；        if (self.currecntIndex > self.index) {  // 說明往左滑動的，currentCell應該在螢幕下方// 我這裡的cell是有4列，所以這裡是處以4求餘，得到當前列。// 若是其他列數，則需要換成相應的數字。            _currentRect = CGRectMake(DYScreenW * (self.currecntIndex % 4) / 4, DYScreenH, 0, 0);        } else if (self.currecntIndex < self.index) { // 說明往右滑動的，currentCell應該在螢幕上方            _currentRect = CGRectMake(DYScreenW * (self.currecntIndex % 4) / 4, 0, 0, 0);        }    }    [UIView animateWithDuration:1 animations:^{        self.frame = _currentRect;        tempImageView.frame = self.bounds;    } completion:^(BOOL finished) {        [self removeFromSuperview];    }];}

 

五、GitHub連結

Demo在這裡

六、其他

本Demo只是圖片在本地的情況，如果是做本地圖片處理，只需要修改本Demo的幾處地方就行了。
不過，實際項目(比如我現在的項目)中往往是從網路請求的圖片，這時候就要注意很多，但是思路還是這個思路。無非是：找到大圖縮小的時候，最終的位置。