Khuong Khuong - 1 year ago 106
Swift Question

Scrolling Delegate in TableView

I want to make an animation like this link:

Here is my simple screenshot:

enter image description here

In my case, I want when I swiping up, the blue Header View will disappear and the navigation bar will change to blue color.

Here is my code:

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

@IBOutlet var tableView: UITableView!
@IBOutlet var headerView: UIView!

var dataSource: [String] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].map {"\($0)"}

override func viewDidLoad() {

tableView.dataSource = self
tableView.delegate = self
headerView.backgroundColor = UIColor.blueColor()

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataSource.count

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)
cell.textLabel!.text = dataSource[indexPath.row]
return cell


I can change the views with animation like this, include: Navigation Bar, Header View of TableView, Status Bar.

But how to check when the TableView scroll down, then the Header View will change.

Please point me some things. Thanks.

Answer Source

You must use UIScrollViewDelegate in your tableView to intercept scrollView actions with:

class YourClass: YourType, UIScrollViewDelegate {}

Check the official apple documentation

You can handle scrollview looking for scrollViewDidScroll(_:) method.

This is just an example to add more network data when the user scroll to the end, you can use it to trigger your header animation..

let threshold = 100.0 // threshold from bottom of tableView
var isLoadingMore = false // flag

func scrollViewDidScroll(scrollView: UIScrollView) {
    let contentOffset = scrollView.contentOffset.y
    let maximumOffset = scrollView.contentSize.height - scrollView.frame.size.height;

    if !isLoadingMore && (maximumOffset - contentOffset <= threshold) {
        // Get more data - API call
        self.isLoadingMore = true

        // Update UI
        dispatch_async(dispatch_get_main_queue()) {
            self.isLoadingMore = false


By analizying your animation, it's not simple but not impossible :) I can see two different states:

enter image description here

And the second state:

enter image description here

You can organize your controller by choose a UIViewController type. This UIViewController must be composed by:

  • -UINavigationController (as you can see on the top of the images , choose if you want to embedded it or link a navigation controller and set your viewController as the navigation rootViewController)
  • -UIPageView (you can use in your main viewController with the UIPageViewControllerDataSource and UIPageViewControllerDelegate, pay attention to the dimension , it cover the 30% of the top of your controller)
  • -UITableView (this is the last layout part, everytime page scroller the datasource can be changed and refreshed to the table)

P.S. The tableViewHeader can be the gray label with the date: Thursday 21 January 2016, as you can see the dimension dont change during animation.