IOS simple image browser – Gallery effect

These days to do the project in time, met with photo browser needs on the Internet to find some information, found that most of the said approach is not well understood, and then try to use UICollectionView to write a simple picture browser, do a simple transition, also can achieve the picture zoom.

The following is the basis of the effect:

IOS simple image browser - Gallery effect
demo demo.gif
IOS simple image browser - Gallery effect
demo demo2.gif

The next step is to explain the steps:

Construction of Demo1 interface

  • First, we need to use to create a controller, then build the collectionView collectionView object is created in the controller above first create the UICollectionViewFlowLayout, set up a rolling way of layout, and the size of each item, and then create collecitonView
UICollectionViewFlowLayout * layout alloc]init] = [[UICollectionViewFlowLayout; layout.scrollDirection = UICollectionViewScrollDirectionVertical; layout.itemSize = CGSizeMake (SCREENWIDTH / SCREENWIDTH / 4 - 1, 4 - 1); _collectionView = "UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout]; _collectionView.frame = CGRectMake (0, 0, SCREENWIDTH, SCREENHEIGHT); _collectionView.contentInset = UIEdgeInsetsMake (45 * W, 0, 57, 0); [self.view addSubview:_collectionView];
  • Next, set up a proxy and register cell to allow cell to be recycled
_collectionView.delegate = self; _collectionView.dataSource = self; / / cell [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@ registered "table"];
  • The next step is to implement the data source method, and then the following several methods
The number of each group / / item - (NSInteger) collectionView: (UICollectionView *) collectionView numberOfItemsInSection: (NSInteger) section; //cell creation and data - (UICollectionViewCell) collectionView: (UICollectionView * collectionView) cellForItemAtIndexPath: (NSIndexPath * indexPath); / / the minimum spacing between each line - (CGFloat) collectionView: (UICollectionView *) collectionView layout: (UICollectionViewLayout *) collectionViewLayout minimumLineSpacingForSectionAtIndex: (NSInteger) section item (cell); / / each of the minimum distance (CGFloat) - collectionView: (UICollectionView * collectionView) layout: (UICollectionViewLayout *) collectionViewLayout minimumInteritemSpacingForSectionAtIndex: section (NSInteger); / / cell was selected to perform - (void) collectionView: (UICollectionView * collectionView) didSelectItemAtIndexPath: (NSIndexPath * indexPath) {/ / in the inside we must complete the indexPath second interface}

I ignored the specific operation of the data provided, they can find the data to achieve the above data source method, and then get the interface should be as shown below:

IOS simple image browser - Gallery effect

Second interface structures

At this time we have two ways to refer to:

  1. One is to jump directly to another controller, the controller to create collectionView, the corresponding operation
  2. We directly customize a View collectionView created directly in the View above, and then directly to the View when you need to use KeyWindow to the first controller above, and then removed when needed

I chose the second method

  • We directly customize 1 View, set View and the screen width and height of the same, and then directly define collectionView, and above the first interface is similar, just need to take the size of each item is set to direct the size of the screen. Scroll to horizontal scrolling.
The rolling direction is arranged in a horizontal / rolling layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; layout.itemSize = CGSizeMake (SCREENWIDTH, SCREENHEIGHT);
  • Next we need to customize the cell to complete the next operation, get the first page of indexPath, then according to the indexPath.row calculated the initialization time offset, we colletionView, are located in the end we choose a picture, and we actually use the data of the two groups is the same set of data source.
Self.collectionView.contentOffset = CGPointMake (SCREENWIDTH * index.row, 0);

Up to now we have two basic structures to complete the interface, the most critical point is to achieve the interface interaction, and the second interface of the image zoom

Scaling problem

  • We need to put the same screen size scrollView in the custom cell, and set the following properties:
Self.artScrollView alloc] init] = [[UIScrollView; self.artScrollView.frame = CGRectMake (0, 0, SCREENWIDTH, SCREENHEIGHT); self.artScrollView.minimumZoomScale = 0.5; self.artScrollView.maximumZoomScale = 3; self.artScrollView.showsVerticalScrollIndicator = NO; self.artScrollView.showsHorizontalScrollIndicator = NO; self.artScrollView.delegate = self; [self.contentView addSubview:self.artScrollView];
  • Then, in the set method of the model, the UIimageView is created and set
UIImageView *textimage = [[UIImageView alloc] initWithImage:image]; / / artimage [self.artimage removeFromSuperview] to remove a self.artimage; alloc] init] = [[UIImageView; self.artimage.contentMode = UIViewContentModeScaleAspectFit; self.artimage.frame = [self setImage:textimage]; self.artimage.image = image; [self.artScrollView addSubview:self.artimage]; / / scroll contentsize frame set self.artScrollView.contentSize = self.artimage.frame.size;
  • Set scrollView zoom
This method / / return value decided to zoom the contents (only UISCrollView controls) - (UIView) viewForZoomingInScrollView: (UIScrollView * scrollView) {return self.artimage;}
  • The next two methods is to achieve the image zoom when the picture is still centered, and set the imageView frame to make the picture according to their size, adaptive screen
Control is in the center / Zoom (void) scrollViewDidZoom: (UIScrollView * scrollView) {CGFloat = offsetX (scrollView.bounds.size.width > scrollView.contentSize.width)? (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5: 0; CGFloat = offsetY (scrollView.bounds.size.height > scrollView.contentSize.height)? (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5: 0; = CGPointMake (scrollView.contentSize.width * 0.5 * 0.5 + offsetX, scrollView.contentSize.height + offsetY);} / / set size according to the different proportion of - (CGRect) setImage: (UIImageView * imageView) {CGFloat imageX = imageView.frame.size.width; CGFloat = imageV imageY Iew.frame.size.height; CGRect imgfram; CGFloat CGscale; BOOL = FLX (SCREENWIDTH / SCREENHEIGHT) > (imageX / imageY); if (FLX) {CGscale = SCREENHEIGHT / imageY; imageX = imageX * CGscale; imgfram = CGRectMake ((SCREENWIDTH - imageX) / 2, 0, imageX, SCREENHEIGHT); return imgfram;} else {CGscale = SCREENWIDTH / imageX; imageY = imageY * CGscale; imgfram = CGRectMake (0, 2 / (SCREENHEIGHT - imageY), SCREENWIDTH, imageY); return imgfram;}}

The second interface of the scaling process is completed, and then how to display on the first interface

  • We can make use of KeyWindow above second View interface directly cover at the first interface, and to do the animation operation, we can see under my approach to understand (the principle is the use of mask to do animation, then let the second interface directly to cover, remove when using CGD timer delay for View transparent, then at this time after View can be directly removed)
The first method # interface cell is selected when the call for the following UIView * backview = [[UIView alloc]initWithFrame:self.view.bounds]; backview.backgroundColor [UIColor = blackColor]; openartModel = model * self.objcArray[indexPath.row]; / / CGFloat startX = indexPath.row% of the calculated position (4 * (SCREENWIDTH - 10) /4) + 15; CGFloat = indexPath.row (startY / 4 * (SCREENWIDTH - 10) /4) CGFloat + 84; animatime = 0.7; ImageView = UIImageView * [[UIImageView alloc]initWithFrame: CGRectMake (startX, startY, ((SCREENWIDTH - 10), (/4) (SCREENWIDTH - 10) /4)]); / / str = [NSString * NSString loading picture "stringWithFormat:@", imageview.image = model.ARTWORK_FILE_ORIGINAL]; [[SDI MageCache sharedImageCache] imageFromDiskCacheForKey:str]; imageview.contentMode = UIViewContentModeScaleAspectFit; [[UIApplication sharedApplication].keyWindow addSubview:backview]; [[UIApplication sharedApplication].keyWindow addSubview:imageview]; / / [UIView animateWithDuration:animatime animations:^{CGRect set up the animation display frame = CGRectMake (0, 0, SCREENWIDTH, SCREENHEIGHT); imageview.frame = frame;}]; / / add a new view dispatch_after (dispatch_time (DISPATCH_TIME_NOW (int64_t) (animatime * NSEC_PER_SEC)). Dispatch_get_main_queue (DetailArtView), ^{* detailView = [[DetailArtView alloc] initWithFrame:CGRectMake (0, 0, SCREENWIDTH, SCREENHEIGHT) AndIndex:indexPath]; DetailView.objcArray = self.objcArray; [[[[UIApplication sharedApplication].keyWindow subviews] lastObject] removeFromSuperview] [[[[UIApplication sharedApplication].keyWindow subviews] lastObject]; removeFromSuperview] [[UIApplication; sharedApplication].keyWindow addSubview:detailView];});

This is the complete approach, the method is relatively easy to understand, for your reference, if you have a better approach and ideas, you can leave a message below. If you need demo, I will provide you with the following