/ ios

Parallax Effect for iOS with Swift

For an app which has many long content, mixed with images and text, scrolling through a long and static content is boring. We can make scrolling more interesting by implement parallax effect for images inside. There are many way to create parallax. Let’s take a look at Twitter for iOS – Profile screen:
Twitter_Parallax_Normal

Now what happen when we try to scroll down (note that we are already at top position of scroll view):

Twitter_Parallax_Scrolled

You can see that it looks like cover image is behind wall of information. When we scroll down, the wall is more down and let a window open for us to see cover image bigger, scale nicely. This is a simple case where parallax is perfect fit. Today, we will try to implement this effect with Swift and Storyboard/Autolayout in iOS.

New Project

Let’s start by create a project with XCode. Here I use XCode 6.4 and Swift 1.2 for a new Single View Application:

ParallaxiOS_NewProject

Go to Storyboard and change ViewController size to iPhone 4″ for easier drag-n-drop:

ParallaxiOS_ResizeViewController

With auto-layout setup, we start adding a scrollview and elements inside into our view controller:

ParallaxiOS_SetupView

Run app on simulator with some adjustment for our avatar view to make it look like Twitter:

class ViewController: UIViewController {
  @IBOutlet weak var avatar: UIImageView!
  override func viewDidLoad() {
    super.viewDidLoad()
    avatar.layer.cornerRadius = 5.0
    avatar.layer.borderWidth = 4.0
    avatar.layer.borderColor = UIColor.whiteColor().CGColor
    avatar.clipsToBounds = true
  }
}

Here is the result:

ParallaxiOS_S1

Setup constraints for a happy scrollview

You can note that our scrollview does not work for now. We will start adding constraints onto our elements to make sure that:

  1. Ensure the scroll view’s own frame constraints are not ambiguous (eg. make the leading, trailing, top and bottom space to superview all equal to 0.f).
  2. All four edges of the scroll view should have some kind of constraints to it’s subviews (in order for the content size to be defined correctly).
  3. At least one subview needs to define the content width (eg. I like to set an equal width constraint from the header UIImageView to the scroll view’s superview) so that the content height can be calculated automatically.

ParallaxiOS_Constraints

Verify that our scrollview works:

ParallaxiOS_ScrollView

Now when we try to scroll down at the top position:

ParallaxiOS_PullDown

You can see a blank space at the top position, this is where parallax comes to rescue.

Parallax Effect

First, you want to have the image view height constraint to be removed:

ParallaxiOS_RemoveHeightConstraint

Then, we are going to make top of imageView has constraint with topLayoutGuide of view controller, and bottom of imageView sticks with the rest of scroll content. So we create the following constraints:

  • Hold Ctrl, and drag from our imageView then drop on to Top Layout Guide in Storyboard, select Vertical Spacing and set value to 0.f.

ParallaxiOS_TopLayoutConstraint

  • Select our imageView and first scroll view content element. Here I choose our avatarImageView and pin Vertical Spacing with value of 0.f.

ParallaxiOS_ElementConstraint

Now we should ready to go. Run project again, and see the result when you try to scroll down from the top position:

ParallaxiOS_Effect

Congratulation, you have just finished your parallax view in just few steps without involving code. Now you want to see parallax in other case? Wait for our next post in Parallax with iOS series in next week. Stay tuned!

Update: source code for the demo is commited at part-1 tag in GitHub.