Scroll View Tutorial in iOS8 with Swift

A Scroll View provides support for displaying content that is larger than the size of the application’s window. In this tutorial a large image is added inside a Scroll View. This image can be panned around. This tutorial is built in iOS 8.1 and Xcode 6.1.

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftScrollViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Download the image and add it to the project, make sure The "Copy items if needed" option is selected.

Go to the ViewController.swift file and add the follwing properties

var imageView: UIImageView!
var scrollView: UIScrollView!

Change the viewDidLoad method to

override func viewDidLoad() {     
  // 1   
  imageView = UIImageView(image: UIImage(named: "strandvagen.jpg"))    
  // 2
  scrollView = UIScrollView(frame: view.bounds)
  scrollView.backgroundColor = UIColor.blackColor()
  // 3
  scrollView.contentSize = imageView.bounds.size
  // 4      
  1. The large image is added to the Image View
  2. A Scroll View is initialized with the size of the whole screen and a black background color
  3. The contentSize property is the size of the content that you need to display in the scroll view. 
  4. The Image View is added as a subview of the Scroll View which is added as a subview of the main View.

Build and Run the project and pan around to view different portions of the image.

You can download the source code of the IOS8SwiftScrollViewTutorial at the ioscreator repository on Github.