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
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.
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 :
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With