UICollectionView horizontal continuous loop

Question

So, I have a UICollectionView with custom UIView for each cell. UIView takes up the entire screen, and you can move horizontally to each of 4 different UIView / cells. All this works great and uses a pager to indicate the page you are on.

I looked at google and the like to see if I can get it back to the top after you go past the last cell. For example:

I start in the 3rd cell, go to the fourth, and then when I sit to the right, he will return to the first cell (the pager will reflect what you are on the first page) and continue from there.

Is it easy to do? Or am I missing something?

Thanks Jake

Answer 1

You need only 3 UIViews to hold the image to the left of your current view, the image to the right of the current view and the middle view that is currently on the screen.

So let's say we have UIImages ABCD and UIViews 1 2 and 3

We look at view 2, image B. On the left side of the page we take image A, the page on the right is image C.

When scrolling left / right, view 3 becomes the on-screen view with image C. When the paging comes to life, you change the contents of the views around, so the user actually looks at the middle UIView2 again with image C. View 1 has image B, view 3 has an image D.

Go right again and do the same thing randomly. Now you have

View 1 -> image C View 2 -> image D View 3 -> image A 

Next page on the right

 View 1 -> image D View 2 -> image A View 3 -> image B 

so ad infinitum in any direction

Since 2011, there is a good WWDC video on this subject. Its value is digging. This demo video UIScrollView ( PDF Documentation ) doesn't need collections to do this, although there is no reason why you shouldn't ...

Answer 2

Well prepared for this heat?

So, in my main view of the controller, viewDidLoad, I identify the views to load into the uicollectionview cells in the array:

 NSArray *vcs = [@"view5", @"view1", @"view2", @"view3", @"view4", @"view5", @"view1"] 

I also set the pagecontrol counter:

 self.pageControl.numberOfPages = vcs.count - 2; // for the fake first and last cells 

Then I instantiate the viewcontrollers in the main view, viewDidLoad, and set the alpha for the collection to 0. Then in our scrollViewDidEndDecelerating I process the carousel (transition from the last cell to the first and first cell to the last) and update the pageControl to reflect the "real" number pages.

 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { // Snaps into the cell CGFloat pageWidth = scrollView.frame.size.width; float fractionalPage = scrollView.contentOffset.x / pageWidth; NSInteger page = lround(fractionalPage); self.pageControl.currentPage = page - 1; // because our first cell is the last cell for animation purposes only // Carousel from first to last and last to first while updating pagecontrol if (page == 0) { [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:self.activeGaugeClusters.count - 2 inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO]; // Set our pagecontrol circles to the appropriate page indicator self.pageControl.currentPage = self.activeGaugeClusters.count - 2; } else if (page == self.activeGaugeClusters.count -1) { [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO]; self.pageControl.currentPage = 0; } } 

Then in the collection implementation I do the following:

 numberOfItemsInSection = vcs.count 

and viewDidAppear to load the first cell (whether it is a cell in indexPath.row == 1 or 2 or 3 ... (1 - the first real page is not 0)

 - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:self.lastGaugePanel inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO]; self.pageControl.currentPage = self.lastGaugePanel - 1; [UIView animateWithDuration:0.5 animations:^{ self.collectionView.alpha = 1.0; }]; } 

I think this sums it up. The remaining implementations of both the main and collective viewing are standard. So now I have a collection view that loads other views and their VCs, each of which has its own animation or something else. I save indexPath.row in NSUserDefaults, so the cell that I was in when I left is the first cell to be displayed the next time it loads.

Hope this helps someone, I know that it is for me, unfortunately, the use of third-party libraries was discouraged, so I had to build this bad boy (using @He Was, thanks again!)