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 Stretchy Header Effect for UITableView in iOS

create Stretchy Header Effect
Category:   
iOS, Swift
3 like

Stretchable tableview header can certainly make your application more interactive and intuitive. Users get such an amazing experience in Android that allows them to that stretchy and zoomed-in effect. This Stretchy Header effect is possible in iOS as well. We will tell you how. Read on!

What you may need to know?

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

Now let’s get into the real business.

Step to create Stretchy Header Effect for UITableView in iOS

  • First create Xcode project.

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

    Stretchy-Header-Effect
  • Set up the tableview

    First we need to create a tableview. For that you will be required to add TableView to ViewController.

    Stretchy-Header-Effect-ios
  • Set up the height of TopView and HeaderView

    First we need to set up the contentInset. For that the top value that is set here is 318 which is the initial normal height for the header imageview. The tableview’s frame will start at (0,0) and the first cell will start at (0,318).

    var topViewSize:CGFloat = 318 // Topview height
    var navigationHeight:CGFloat = 82 // Headerview height
    
    tableView.contentInset = UIEdgeInsetsMake(topViewSize, 0, 0, 0)
    
  • Make TopView as UIView and Add to TableView

    Here we have created a UIView with height 318 and added to the current view above TableView.

    var topView = TopView()
    override func viewDidLoad() {
    super.viewDidLoad()
    let view = Bundle.main.loadNibNamed("TopView", owner: self, options: nil)![0] as! TopView
    view.frame = CGRect(x: 0, y: statusHeight, width: self.view.frame.width, height: self.view.frame.width)
    self.view.addSubview(view)
    topView = view
    tableView.estimatedRowHeight = 50
    tableView.contentInset = UIEdgeInsetsMake(topViewSize, 0, 0, 0)
            
  • Load TableView

    Next step is to add data to the TableView.

    extension ViewController: UITableViewDelegate, UITableViewDataSource {
        
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 20
        }
        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            return UITableView.automaticDimension
        }
        
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! CustomTableViewCell
            cell.titleLabel.text = "\(indexPath.row+1). Music name."
            return cell
        }
    }
            
  • Override scrollViewDidScroll 

    After loading the Tableview, set the scrollViewDidScroll(). Here, all the UI elements is wrapped under scrollViewDidScroll(). This is the major part of the coding where the magical Stretchy Header effect happens.

    func scrollViewDidScroll(_ scrollView: UIScrollView){
        let y = topViewSize - (scrollView.contentOffset.y + topViewSize)
        let newHeaderViewHeight = topView.frame.height - scrollView.contentOffset.y
        
        if(y >= navigationHeight){
            if(y<=148 && y >= navigationHeight){
                let percent:Float = (Float((148-y) / y));
                topView.albumTopButton.alpha = CGFloat(percent)
            }else{
                topView.albumTopButton.alpha = 0
            }
            
            topView.albumTopButton.frame.origin.y = y
            
            if(isOpenButton == 1){
                isOpenButton = 0
                UIView.animate(withDuration: 0.1, animations: {
                    self.topView.btnAlbum.frame.origin.x = self.topView.btnAlbum.frame.origin.x + 5
                    self.topView.btnMusic.frame.origin.x = self.topView.btnMusic.frame.origin.x - 5
                }) { (Bool) in
                    self.shakeAnimation()
                }
            }
        }else{
            if(isOpenButton == 0){
                isOpenButton = 1
                UIView.animate(withDuration: 0.1, animations: {
                    self.topView.btnAlbum.frame.origin.x = self.topView.btnAlbum.frame.origin.x - 5
                    self.topView.btnMusic.frame.origin.x = self.topView.btnMusic.frame.origin.x + 5
                }) { (Bool) in
                    self.shakeAnimation()
                }
            }
            topView.albumTopButton.alpha = 1
            topView.albumTopButton.frame.origin.y = 100
        }
        
        let height = min(max(y, navigationHeight), 800)
        topView.frame = CGRect(x: 0, y: statusHeight, width: UIScreen.main.bounds.size.width, height: height)
        
        if(y >= topViewSize){
            topView.albumimage.transform = CGAffineTransform(scaleX: (y/topViewSize), y: (y/topViewSize))
            topView.albumTop.constant = 25
        }else{
            topView.albumTop.constant = (y-(topViewSize-25))+((y-topViewSize)*0.6)
        }
        
        if(y >= topViewSize){
            let final = ((450)-y) / ((450) - topViewSize)
            topView.albumButton.alpha = CGFloat(final)
        }else if (newHeaderViewHeight > topViewSize){
            let alphavalue = (newHeaderViewHeight/topViewSize) - 1
            topView.albumButton.alpha = CGFloat(alphavalue)
        }
    }
            

    Compile and run the code.

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

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

Choose Artoon Solutions Pvt. Ltd., as we are always happy to help you. Being one of the finest iOS app development service providers, Artoon Solutions Pvt. Ltd. has offered quality mobile app development services across the globe. Our extensively knowledgeable and experienced developers have delivered masterpieces to client worldwide that has helped their businesses stay ahead of the curve.

Avail free git code

Interested! Get a free quote today!

Leave a Reply

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

Popular Blog

View All Blog