Bulb Image

If you have any idea!
get free quotation

Get Free Quotation

Do you want to work with us?

weare-hiring [email protected]
Close

Let’s Build Your Dream

Book your FREE call with our technical consultant now.

Thank you for your inquiry. One of our team members will get in touch with you shortly.

Create Parallax Header Using UIScrollView Tutorial

Create Parallax Header Using UIScrollView Tutorial
Category:   
App Development, iOS, Swift
1 like

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.

    parallax header effect

    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.

    uiscrollview
  • 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 who 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 globelly. Hiring our dedicated developers who have extensive knowledge and experience in app development leads you to the better business world. We have delivered masterpieces to client worldwide which has helped their businesses stay ahead of the curve.

Avail free git code

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular Blog

View All Blog