For iOS, click cell to view the larger image, click the larger image to restore the smaller image, and for ios to view the larger image.

For iOS, click cell to view the larger image, click the larger image to restore the smaller image, and for ios to view the larger image.
I. project requirements

You can use collectionView to display many photos. Click a picture and use scrollView in full screen mode to view images in an infinite loop.
Click the enlarged image to zoom in to the original size.

As shown in gif1.gif, click the image in the middle to enlarge the image and slide the image. Click the larger image to return to the corresponding position.

 

Gif1.gif

Gif2.gif. The currently displayed image is not on the screen. After you click a large image, if the image is on the top of the screen, it will return to the top; if it is on the bottom, it will return to the bottom.

 

Gif2.gif 2. Common scenarios

Weibo and album: jiugongge displays a photo. Click an image and add it to scrollView.

The "micro" family's two friends are only nine-cell album, there are many implementation methods, smart and skillful way, simple and crude way, everything is available. My project contains hundreds of images, which is not suitable for the jiugongge method. I wrote a Demo today, which is a way to solve this problem.

Iii. Implementation 4. key code (github link at the end of this article) code in UIViewController

(1) Calculate the position of the cell in the window. Only the implementation in scrollViewDidScroll is provided here. In the viewDidAppear method, we also need to calculate it again, because if you do not slide, click cell directly. In this case, we also need to obtain the rectInWindow of the cell.

-(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 sharedA Pplication]. keyWindow; // converts the coordinate system. Change the frame of the image in cell from cell to UIWindow CGRect rectInWindow = [cell convertRect: cell. imageView. frame toView: window]; [array addObject: NSStringFromCGRect (rectInWindow)];} // rectArray is the array self where the cell is located (with window as the reference. rectArray = array ;}

 

(2) Click cell to create a baseView and pass the required parameters.

-(Void) collectionView :( UICollectionView *) collectionView didSelectItemAtIndexPath :( NSIndexPath *) indexPath {DYBaseView * baseView = [[DYBaseView alloc] initWithFrame: self. view. bounds]; // baseView of the Image array. iconArray = self. iconArray; // location array baseView. rectArray = self. rectArray; // The subscript baseView of the current cell. index = indexPath. row; [[UIApplication sharedApplication]. keyWindow addSubview: baseView]; baseView. backgroundColor = [UIColor blackColor];}

Code in baseView

(1) infinite loop image carousel. There are many articles on this point. The Demo that I came with also contains the relevant code, so I will not post the code.
(2) Click scrollView to zoom out the larger image.

-(Void) scrollViewDidClick {// because the size of scrollView is the size of three screens, it is difficult to see the effect if scrollView is used directly for downsize animation. // I will use this simple and crude method to handle it. Remove scrollView directly and add the image in the middle to the new UIView. // Let this new UIView complete the animation I need. 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) {// if the cell does not appear in the interface, that is, _ currentRect = {0, 0, 0}; if (self. currecntIndex> self. index) {// indicates moving to the left. currentCell should be at the bottom of the screen. // here, cell has four columns, so here is the result of 4 remainder to get the current column. // If other columns exist, replace them with numbers. _ CurrentRect = CGRectMake (DYScreenW * (self. currecntIndex % 4)/4, DYScreenH, 0, 0);} else if (self. currecntIndex <self. index) {// indicates sliding to the right. currentCell should be at the top of the screen _ 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];}

 

V. GitHub links

Here is the Demo.

Vi. Others

This Demo is only for local images. If you are doing local image processing, you only need to modify the places of this Demo.
However, in actual projects (such as my current project), images are often requested from the network. At this time, you should pay attention to a lot of things, but the idea is still the same. It is nothing more than: Find the final position when the big image is reduced.