Header View Animation on TableView Scrolling.

If you have noticed in the Apps like Facebook, Twitter, these apps having news feed on the dashboard, you may have observed while scrolling newsfeed the header section containing the cover picture or search box view, this header section is expanding and collapsing with animation,

Header View Animation on TableView Scrolling.

The dynamic header on the dashboard or profile screen looks app more attractive and comprehensive. We will look at how to implement a stretchable header view in swift while scrolling table view. follow the below steps to achieve this header stretchable functionality.

1) Create UITabelView and HeaderView

Add UIView as header view from the component collection, add top, leading, and trailing constraints to header view.

Add height Constraint to HeaderView and create outlet of height Constraint.

Add UITableview below header view, add bottom, leading, trailing and top constraints to table view.and then configure table view delegate methods as below.

Add those properties and outlets in the view controller. Including table view outlet, maxHeight for store maximum height of header view, and minHeight for store minimum height of header view, and previousScrollingOffsetValue will store the previous offset value ScrollView, Don’t worry later on you will get to know why we are using previousScrollingOffsetValue. for now, initialize all those properties.

Configure all properties and outlets in viewDidLoad() and viewDidAppear(), Set table view data source and delegate to ViewController and in viewDidAppear, the maximum height of header view and the minimum height of header view and set headerViewHeightConstraint constraint height value which I set 200 now, you can set it as per your requirement.

2) Handle table view Scrollview

UITableview is backed by UIScrollview. We can access ScrollView delegate methods with respect to UITableview. Add this scrollViewDidScroll delegate method below UITableview Delegate method, let’s discuss what we have done in scrollViewDidScroll.

As we are using Tableview, Tableview will always scroll vertically. scrollViewDidScroll delegate method will get called when the user scrolls at each pixel.

The difference variable get difference offset value between current scroll view y-axis and previously scrolled offset. here we are resetting difference variable value at the end of this function.

One more condition we have to handle. Check weather maxHeight is greater than headerViewHeightConstraint and then assign maxHeight to headerViewHeightConstraint.

Else eliminate difference offset value from headerViewHeightConstraint constant value and assign to headerViewHeightConstraint constant value

And at the end reset difference variable with current scrollView y-axis offset value.

3) What if the user stopped scrolling?

What if the user stopped scrolling, this is how we will handle header view height.

What if the user stops scrolling table view in-between, then header view will be stuck somewhere in the middle and you can see the inappropriate height of the header view, we will write supportive functionality to figure out what should be the height of header view.

When user will stop scrolling, UIScrollview scrollViewDidEndDragging and scrollViewDidEndDecelerating get called, here we will write functionality in scrollViewDidEndDragging delegate function.

First, get half range value of maxheight in midValue, which means header view height middle Value, like header view height, has 200 height, midValue will be 100.

if the current height of the header view is greater than midValue. Set minHeight as a height of header view else Set maxHeight as a height of header view.

Conclusion:

UITableView and UIColloctionView have its own scroll view, We can use scroll view delegates and properties for animate and reposition other views with respect to UITableView and UIColloctionView scroll position. here we have created a simple demo like stretching header view on the basis of table view scroll offset position.

Thanks for reading, if you have anything to ask please comment below i will reply or email me : blogswithrahul@gmail.com

Keep coding…..

1 thought on “Header View Animation on TableView Scrolling.”

  1. not working
    error: Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘-[UIView constant]: unrecognized selector sent to instance 0x7f91b6716450’

    Reply

Leave a Comment