Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do i keep the header cell moving with the tableview cells in Swift 2.0

I am trying to create a tableview which starts the header in the middle of the tableview and then can be scrolled up with the added tableView Cells to the top then stops, and then the tableview cells can just scroll "under" it. I got the header to be in the middle of the tableview, but the tableView Cells just scroll on top of it, and the header doesnt really scroll to the top. it just stay where it is. I want to be able to let the header move as you scroll the list, and then stops when it reaches the top of the list, and then its just the tableView Cells that are moving afterwards.

I am using the latest version of XCode

like image 455
BlueIceSky Avatar asked Mar 02 '16 04:03

BlueIceSky


People also ask

What is Tableview cell?

A table view tracks the height of rows separately from the cells that represent them. UITableView provides default sizes for rows, but you can override the default height by assigning a custom value to the table view's rowHeight property. Always use this property when the height of all of your rows is the same.


2 Answers

GO TO STORYBOARD > SELECT VIEW > SELECT TABLEVIEW > PROPERTY INSPECTOR > CHNAGE STYLE TO GROUPPED from PLAIN

Don't forget to handle footerview. In Groupped mode a footer will appear and arrange background or other properties. They will change.

see Image : enter image description here

like image 138
Devang Tandel Avatar answered Oct 12 '22 10:10

Devang Tandel


You can do it using sections. If i understood your question correctly, what you want to do is, you have to display header in the middle of screen while having some cells above the header and some cells below the header, and when you scroll the tableView up your header should be scrolled to top and when it reaches to the top you want your header to keep at the top while cells should be scrolled underneath the header.

So to do this return two section from the data source

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

And in the data source return conditional cells

func tableView(tableView: UITableView, numberOfRowsInSection section:    Int) -> Int
{
    If(section == 1) {
      return <Return number of cell you want to display above header>
    } else {
      return <Return number of cell you want to display below header>
    }
}

Then override the delegate

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
{
    if(section == 0) {
        return nil //As you do not have to display header in 0th section, return nil
    } else {
        return <Return your header view>

       //You can design your header view inside tableView as you design cell normally, set identifier to it and dequeue cell/headerView as:
       //However this may result in unexpected behavior since this is not how the tableview expects you to use the cells.

        let reuseIdentifier : String!
    reuseIdentifier = String(format: "HeaderCell")

        let headerView = tableView.dequeueReusableCellWithIdentifier(reuseIdentifier, forIndexPath: NSIndexPath(forRow: 0, inSection: 0))

        return headerView
    }
}

Set conditional height as

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat
{
    if(section == 0) {
        return 0 
    } else {
        return <Return your header view height>
    }
}

What we are doing here is, we are displaying header in second section which would have some cell, so you will see some cells in the tableView without header and below this cells you will see headerView with some cells and when you scroll your tableView up headerView will scroll with the cell till it reaches at the top.

Hope this will help you.

like image 26
Bharat Modi Avatar answered Oct 12 '22 11:10

Bharat Modi