To Infinity. Literally.

An "infinite loop," if you will...

Thinking Differently

My first thought was one of regret. Why, why did I need to make my own life so very difficult? Any iOS developer will likely understand the struggles that Apple’s sometimes nonsensical limitations present to the individual. It’s borderline torture — first you’ve got to think differently, then you’ve got to get whatever it is working well enough to ship.

My second thought was to search Github, Google, and the omnipresent StackOverflow for this idea. My five minutes of searching revealed to me that many had tried to solve this problem and indeed done so, but that most of the solutions had unresolved issues or were written almost five years ago. Because of this, I decided to write my own in Swift. 🎉

Doing The Thing!

Swift…is good. Swift…is good.

The first thing you’re going to do, is create a new project in Xcode which uses the Single View Application template. Once this is done, create a new Cocoa Touch Class file, call it something like LoopyScrollThingy and ensure that its subclass is set to UIScrollView.

If any of the above felt like suddenly being asked to translate ancient Chinese battle hymns into Shakespearean English, please turn back now. It only gets worse from here.

Open up your new file if Xcode forgot how or you haven’t already, select everything, then paste this in:

Breakpoint

  • 2: We need this type of initialiser because we’ll be using Interface Builder to keep things simple a bit later on.
  • 3: The setup() function adds the views you connected to the scroll view for you. It also sets its own contentSize.
  • 4: The loadScrollViewWithPage() function, which takes a page parameter, adds the required page/s to the scroll view.
  • 5: Method implemented from UIScrollViewDelegate. The scrollViewDidScroll method is responsible for updating the scroll view as you move.
  • 6: Method implemented from UIScrollViewDelegate. The scrollViewDidEndDecelerating method gets called when the scroll view stops moving, and then updates the content offset if you’re at the end of the pageable content. This is the key.

Did I mention I’m really glad Swift 3 is removing unnecessary repetition of things like color and scrollView? 'Cause I am!

Making The Thing Work! Kinda!

Declare yourself a weak IBOutlet, named whatever you like, ensuring that its of type LoopyScrollThingy?, then save.

Now, open up your storyboard and find the associated UIViewController container. Drag a UIScrollView object onto it, then give it AutoLayout constraints as follows:

Thankfully we can use Springs and Struts (again) in Xcode 8!

Wire up the outlet you created before to this scroll view object, then save. Make sure that the object has its class set to LoopyScrollThingy too.

Back in your View Controller, and find the viewDidLoad() method. Highlight the entire method, and paste the following in:

Breakpoint

  • 2: We tell the scroll view how many pages we want, then give it the array of views.
  • 3: Then we call setup() which sets up the different thing! 🎉

If you did the different thing properly, running the app in the Simulator will show you how well you did! You’ll see your first page displayed, and a quick swipe to the left gives you the 2nd one, etcetera.

Note: This can still break if you go too quickly at this stage. It’s designed to be paged at an "ordinary" pace.

Putting A UIPageControl On The Thing!

  • Add a private UIPageControl variable to the LoopyScrollThingy class.
  • Then replace the setup() method with this:
  • And the scrollViewDidScroll() method with this:

Run the app and see that, YAAAAAS! It shows the page dots! 🎉

Building An Interface For The Thing!

Then open up the LoopyScrollThingy class, and change viewObjects into an IBOutlet, and add some extra UIView objects to your UIViewController’s container in the storyboard, like so:

Fun fact: “Emoji” is Japanese for “Picture Character.” E (pron. Eh) is “Picture” and “Moji” is “Character.”

You can put anything in them, really. Images, if you want, or cuss words. Whatever floats your boat. However as mentioned above, this effect works better with 3+ screens however we’ll rectify that in Part 2 of this tutorial series.

Now wire up the scroll view’s viewObjects property to each one of the views. Pay careful attention to the order, because this is the order in which they will appear on screen.

Run the app again. This time, the views you connected in Interface Builder are now the panels of your scroll view! You’ll see it doesn’t work perfectly, but that’s what we’ll fix in our next attempt at thinking differently.

© Allie Brosh, Hyperbole and a Half

Aussie iOS Engineer based in Tokyo, Japan | 日英可

Aussie iOS Engineer based in Tokyo, Japan | 日英可