UIScrollView Tutorial: Getting Started

Displaying a Page Control Indicator

For the final part of this UIScrollView tutorial, you'll add a UIPageControl to your app.

Fortunately, UIPageViewController has the ability to automatically provide a UIPageControl.

To do so, your UIPageViewController must have a transition style of UIPageViewControllerTransitionStyleScroll and you must implement two special methods on UIPageViewControllerDataSource.

You previously set the Transition Style – great job! All you need to do now is add these two methods inside the UIPageViewControllerDataSource extension on ManagePageViewController:

func presentationCount(for pageViewController: UIPageViewController) -> Int {
  return photos.count
}
  
func presentationIndex(for pageViewController: UIPageViewController) -> Int {
  return currentIndex ?? 0
}

Here's what this code does:

• In presentationCount(for:), you specify the number of pages to display in the page view controller.
• In presentationIndex(for:), you tell the page view controller which page it should initially select.

After you've implemented the required delegate methods, you can add further customization with the UIAppearance API.

To try it out, go to AppDelegate.swift and replace application(_:didFinishLaunchingWithOptions:) with this:

func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?)
    -> Bool {
  let pageControl = UIPageControl.appearance()
  pageControl.pageIndicatorTintColor = UIColor.systemGray
  pageControl.currentPageIndicatorTintColor = UIColor.systemPurple

  return true
}

This will customize the colors of the UIPageControl.

Build and run.

Putting It All Together

Almost there! The very last step is to add back the zooming view when the user taps an image.

Open PhotoCommentViewController.swift and add the following to the end of the class:

//1
@IBAction func openZoomingController(_ sender: AnyObject) {
  self.performSegue(withIdentifier: "zooming", sender: nil)
}
  
//2
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {  
  if let id = segue.identifier,
    let viewController = segue.destination as? ZoomedPhotoViewController,
    id == "zooming" {
    viewController.photoName = photoName
  }
}

Take a look at this code, step-by-step:

1. The action for opening the zooming view simply calls performSegue(withIdentifier:sender:) with the zooming segue identifier.
2. In prepare(for:sender:), you send the destination controller's photoName value to the image the user selected.

In Main.storyboard, add a Show Detail segue from Photo Comment View Controller to Zoomed Photo View Controller. With the new segue selected, open the Identity inspector and set the Identifier to zooming.

Select the Image View in Photo Comment View Controller, open the Attributes inspector and check User Interaction Enabled. Drag a Tap Gesture Recognizer onto the image view and connect it to openZoomingController(_:).

Now, when you tap an image in Photo Comment View Controller Scene, you'll go to the Zoomed Photo View Controller Scene where you can zoom the photo.

Build and run one more time.

You did it! You've created an iOS Photos app clone. You can select and navigate through a collection view of images by swiping, and you can zoom the photo content.

Where to Go From Here?

Download the completed version of the project using the Download Materials button at the top or bottom of this tutorial.

You’ve delved into many of the interesting things that a scroll view is capable of doing. If you want to go further, there's an entire video series dedicated to scroll views. Take a look.

Now, go make some awesome apps, safe in the knowledge that you’ve got mad Scroll view skillz!

If you run into any problems along the way, or want to leave feedback about what you've read here, join the discussion in the comments below.