UIScrollView with "Circular" scrolling
Solution 1
I've implemented this method, but it requires paging enabled. Lets assume you have five elements A,B,C,D and E
. When you set up your view, you add the last element to the beginning and the first element to the end, and adjust the content offset to view the first element, like this E,[A],B,C,D,E,A
. In the UIScrollViewDelegate, check if the user reach any of the ends, and move the offset without animation to the other end.
Imagine the [ ] indicates the view being shown:
E,A,B,C,[D],E,A
User swipes right
E,A,B,C,D,[E],A
User swipes right
E,A,B,C,D,E,[A]
Then, automatically set the content offset to the second element
E,[A],B,C,D,E,A
This way the user can swipe both ways creating the illusion of an infinite scroll.
E,A,[B],C,D,E,A
Update
I've uploaded a complete implementation of this algorithm. It's a very complicated class, because it also has on-click selection, infinite circular scroll and cell reuse. You can use the code as is, modify it or extract the code that you need. The most interesting code is in the class TCHorizontalSelectorView
.
Enjoy it!
Update 2
UICollectionView
is now the recommended way to achieve this and it can be used to obtain the very same behavior. This tutorial describes in details how to achieve it.
Solution 2
Apple has a Street Scroller demo that appears to have exactly what you want.
There's also a video from WWDC 2011 that demos their demo. ;) They cover infinite scrolling first in the video.
Comments
-
werbary about 4 years
I am trying to make "Circular" scrolling in my UIScrollView, but unsuccessful.
What I want to do: if uiscrollview reaches end, it should move to start if uiscrollview at start and moving back, it should move to end
Appending scrollview isn't good way in my situation (other methods should get "page id")
Have you any ideas?
-
werbary about 12 yearsMy scroll view has paging enabled
-
Nitin about 12 yearsAbove code should work but i don't why it;s not working. than after visit this url. It's also contain sample code >>> mobiledevelopertips.com/user-interface/… ...
-
Kai Huppmann about 12 years+1 Nice, but it doesn't work with paging, at least not out of the box. I tried with enabling paging, but the frame seems larger then the display. Maybe with some adjustments.
-
mbm29414 about 12 years@Kai This isn't really meant for paging, and I'm not sure the OP actually wants paging. I know it's enabled, but infinite scrolling != paging. Based on his question, it sounds more like a side-scrolling game than an infinite cover flow. If it's actually paging, you could just use Apple's demo for loading a
UIPageControl
and simply modify the code to use remainder math when you are outside of your actual index zone. -
werbary about 12 yearsThank you, it's beautiful solution.
-
Nico about 12 yearsHow, specifically, does this code solve the questioner's problem?
-
kbtz over 10 yearsWhich event should I use to go from the last element to the second?
-
redent84 over 10 years@sMember you switch in the
scrollViewDidEndDecelerating
delegate method. I've added a complete example, you can use it or check how it's done. -
iAkshay over 4 yearsNice solution explained nicely :) +1