iOS click cell to view larger image, click the large image to restore the small image

First, the project needs

Show a lot of photos with CollectionView, click on a photo, and view the picture in a full-screen scrollview infinite loop.
Click on the enlarged image to reduce the image to its original size.

Gif1.gif, click the middle picture, enlarge the picture, slide the picture. Then click on the larger image to return to the corresponding position.

Gif1.gif

As shown in Gif2.gif. The currently displayed picture is not in the screen, after clicking on the larger image, if the picture is at the top of the screen, go back to the top, or at the bottom, back to the bottom.

Gif2.gif second, common scenes

Weibo, Album: Nine Gongge Show photos, click on an image, images added to ScrollView to view.

The "micro" family of these two brothers is just nine photo album, the way to achieve a lot, clever and skillful way, simple rough way, everything. My project is hundreds of pictures, not suitable for nine Gongge way, Today wrote a demo, is considered to solve the problem of a train of thought.

Third, my realization

1. Click on the cell, create a baseview, display to the current window, the image array to Baseview;
2. Add the ScrollView to the Baseview, and then make an infinite loop carousel on the ScrollView to show the pictures that came with step 1.
3. Add a gesture to ScrollView, click Scrollview,baseview to zoom Out, and the image shrinks back to its original size and position.
   Key points
   When the big picture is restored, find the location of the cell at the moment the Baseview comes out.
   I was in CollectionView just showing the cell finished, and when the slide stopped, calculate the position of all cells relative to UIWindow (recorded as Rectinwindow), and then put these rectinwindow in an array, Passed to Baseview.
   Because the data model array, the picture array, Cell Indexpath.row is one by one corresponding, that is, the cell row is the subscript of the array, and the current big picture subscript We know, know the subscript, that is, know the cell row, also know the Rectinwindow array corresponding subscript, you can get the large image scaling target bit The.

Iv. key code (at the end of the article with GitHub links) code in Uiviewcontroller

(1) Calculates the position of the cell in the window. Here only the implementation of the Scrollviewdidscroll is given. In the Viewdidappear method also to calculate again, because if you do not swipe, directly click on the cell, it is also necessary to obtain the cell's 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;  Convert the coordinate system. Change the frame of the cell image from the cell to UIWindow cgrect Rectinwindow = [cell Convertrect:cell. ImageView. Frame Toview:window] ; [Array AddObject:nsstringfromcgrect (Rectinwindow)];} //Rectarray is an array of the cell's original position (in the window frame) Self . Rectarray = array;}       

(2) Click on the cell to create the Baseview and pass the required parameters in the past.

- (void) CollectionView: (Uicollectionview *) CollectionView Didselectitematindexpath: (Nsindexpath *) Indexpath {Dybaseview *baseview = [[Dybaseview alloc] initWithFrame:self. View. bounds]; //image array Baseview. Iconarray = self. Iconarray; //position array Baseview. Rectarray = self. Rectarray; //The current cell corresponds to subscript baseview. index = Indexpath. Row; [[uiapplication sharedapplication]. Keywindow Addsubview:baseview]; Baseview. backgroundcolor = [  Uicolor Blackcolor];}                 

Code in the Baseview

(1) infinite loop picture carousel. On this, there are many articles on the Internet. I included the demo inside also have the relevant code, do not post code.
(2) After clicking ScrollView, the large image shrinks

- (void) Scrollviewdidclick {Because the size of the ScrollView is three screen size, so if the direct use of ScrollView to reduce the animation, the effect is not good to see.I'm going to use this simple, rude way to deal with it. Remove the ScrollView directly and add the middle picture to the new UIView.Let the new UIView do the animations 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, i.e. _currentrect = {0,0,0,0};if (Self. Currecntindex >Self. Index) {If you swipe left, CurrentCell should be at the bottom of the screen.I have a cell here with 4 columns, so here is the penalty for 4 redundancy, to get the forefront.If the number of other columns, you need to change the corresponding number. _currentrect =CGRectMake (DYSCREENW * (Self. Currecntindex%4)/4, Dyscreenh,0,0); }Elseif (Self. Currecntindex <self.index) {//description swipe right, CurrentCell should be at the top of the screen _currentrect = cgrectmake (DYSCREENW * (.currecntindex% 4)/4, 0, 0, 0);}} [uiview animatewithduration:1 animations:^{self.frame = _currentrect; Tempimageviewself.bounds;} completion:^ ( bool finished) {[self Removefromsuperview];}         

V. GitHub links

Here's the demo.

Vi. Other

This demo is only the picture in the local situation, if you are doing local image processing, only need to modify the demo of a few places on the line.
However, the actual project (such as my current project) is often requested from the network picture, this time to pay attention to a lot, but the idea is still the idea. Nothing but: find the big picture to narrow down when the final position.

iOS click cell to view larger image, click the large image to restore the small image