Create Parallax Header Using UIScrollView Tutorial

Parallax Header using UIScrollView is one of the most versatile and useful controls in iOS. It’s the base for the very popular UITableView and it’s a great way to present content that’s larger than a single screen. Scroll views allow you to display content in an area on the screen that is smaller than the size of the content. They allow the user to pan (scroll) and/or zoom the content.

What you may need to know?

You must have a basic and clear understanding of Xcode Basics, UIKit Basics and Autolayout.

So now, we shall add a Parallax header into our own app!

Step to create Parallax Header Effect for UIScrollView in iOS

For understanding what I am doing here, you should be familiar with UIScrollView and its delegate methods. You also need to know about UIScrollView content inset property.

• Create a new Xcode project

  In Xcode, first open a new project and choose single view application under iOS (Application) and select Swift language.

  

  In your freshly created Xcode project, The first thing we need to do is to create a ScrollView, for that you will be required to add ScrollViewto ViewController.

  

• Set the ScrollView contentInset property:

  @IBOutlet weak var scrView: UIScrollView!
  
  let scrollTopEdgeInsets:CGFloat = 200//scrollView Top insets size
  @IBOutlet weak var headerviewHeightConstraint: NSLayoutConstraint!//headerView height constraint
  
  scrView.delegate = self
  scrView.layer.cornerRadius = 25
  scrView.layer.masksToBounds = true
  scrView.contentInset = UIEdgeInsets(top: scrollTopEdgeInsets, left: 0, bottom: 0, right: 0)
  
  

• Override scrollViewDidScroll

  Post this, the header view shall react accordingly depending on the scrollviews content offset.

  Once the loading is done the ScrollView, we need to set the scrollViewDidScroll().. Here, all the UI elements are wrapped under scrollViewDidScroll(). This is the major part of the coding where the magical Parallax Header effect happens.

  func scrollViewDidScroll(_ scrollView: UIScrollView)
  {
    let minHeight:CGFloat = 50
    let maxHeight:CGFloat = 250+minHeight
    let yPos = scrView.contentOffset.y
    let newHeaderViewHeight = (maxHeight - yPos)-(maxHeight-minHeight)
    let tempNewHeaderViewHeight = (maxHeight - yPos)-(maxHeight-minHeight)
    let titleValue = newHeaderViewHeight-minHeight
  
    //set screen title alpha value
    if(titleValue > 0){
      let finalValue = titleValue*100/scrollTopEdgeInsets
      let alphaValue = finalValue/100
      screenTitleLbl.alpha = 1-alphaValue
    }
  
    //manage header height constraint
    if (newHeaderViewHeight > maxHeight) {
      headerviewHeightConstraint.constant = (max(tempNewHeaderViewHeight, maxHeight)+(minHeight/2))+statusHeight
    } else {
      headerviewHeightConstraint.constant = (max(newHeaderViewHeight, minHeight)+(minHeight/2))+statusHeight
    }
  }
  
  
  

• Compile and run the code.

  Here is the result we will get after adjusting the table header height and other UI parameters.

 

Looking for an iOS development company that can handle this for you?

We are always glad to help you. Being one of the finest iOS app development service providers, Artoon Solutions Pvt. Ltd. has offered quality mobile app development services globally. Hiring our dedicated developers who have extensive knowledge and experience in app development leads you to a better business world. We have delivered masterpieces to clients worldwide which has helped their businesses stay ahead of the curve.

Avail free git code