How to make a sticky footer and header with a tableview? - ios

I have a UITableView in the storyboard with also a header and a footer defined as can be seen in the picture.
However, the header disappears when I move the cell (it seems the header is the top cell). Same thing with the footer. It appears after I have browsed through all cells.
I tried to move the header and the footer outside of the Cell hierarchy. But this resulted in being not visible any more.
How can I make the header and footer sticky?

Don't confuse the section header and footer with the table header and footer.
The section header and footer, in a non-grouped table, are pinned to the top and bottom of the table while you scroll.
But the table header and footer, as you rightly say, are sort of like cells: they are before the first section and after the last section, and they scroll with the table.
If that's not what you want — that is, if there is something you want to show above the table and below the table, all the time — then you need to put them above and below the table view as completely separate views:
thing above
table
thing below
Of course, if you do that, you can't use a UITableViewController. You'll have to have a normal view controller, with the table view as an embedded view and the table view controller as a child view controller.

When using static UITableViews, you can't add custom views as header. You need to set the header and footer like this:
//Header
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
//return your custom view here
}
//Footer
override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
//return your custom view here
}
You also have to specify the height of your header/footer:
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
//return the height
}
override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
//return the height
}

Related

Table View Height Dynamically

I implemented expandable sections on my UITableView and now my problem is that when the UIViewController loads the table there are rows below the section.
Not expanded:
Expanded:
I want the UITableView to have no rows if the section is not expanded so I can set another UIView below the section. When the section is expanded the UIView should disappear and the table view to be presented on the whole screen.
Simply implement the viewForFooterInSection and return an empty view.
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
return UIView(frame: .zero)
}
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
return UIView()
}
just use this code it will remove your unwanted rows.

tableview size adjusting while collapsing using tableview

I am using collapsing header using tableview. When I collapse using tableview, tableview content moved to top. I want tableview content fixed to the screen even after collapsing. I mean after collapsing there is an empty space in view since tableview moved to top.Any Ideas?
You can use Table Header View with number of row just like this
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if isCollepse
{
return noOfRow
}
return 0
}
and on click of header change isCollepse and reload Section of table view

I want to add a sort and filter button on top of tableview in ios?

I want to implement Something like this two views for Sort and Refine on top of table view.
is there something called table header or something similar where i can add this .
this screenshot is from myntra app u can check that for reference.
Use a UIViewController with a container UIView on top and a UITableView in bottom
Something like in the screenshot
Grey part is the UITableViewController
Upper part is a UIStackView with 3 buttons in it.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = UIView(frame: CGRect(0,0,view.frame.width,30))
return header
}
create a view with two buttons Sort and Filter and return in above function also dont forget to return height in below func
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat
this will give you sticky header like Myntra app
OR return view in tableView.tableHeaderView = yourview but this will not stick and get scrolled along the scroll

How to make the first row of an UITableView a header of a section?

I have an UITableView with custom cells. I would like that the first row is always visible. As I have only once section, I thought of making a header but in this case I don't really know how to do it?
Is it possible to make a header from the first row with the same gesture recognizers, same dataSource behind the rows, briefly, have the header exactly like th row, just as if the row was pined to the top of the tableView?
You should use a header, or a separate view outside the table view. You can use the same gestures (generally, though not the delete) and data source.
If you want it all, you could use 2 table views- the first with one section and one row, the second with all the other data. It would be easiest if your data source was broken down in a similar way in the view controller.
In either case you can achieve what you want, but not by flicking a switch, you will need to add some logic and different views to make it happen.
If you want to make one static cell that is pinned to the top but in all other ways the same to the others, you could simply add one to your numberOfRowsInSection
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataSource.count + 1
}
Then when you display the cells, check for the row number and always set the first row to contain your static header content.
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
if indexPath.row == 0 {
// Create or set static cell content.
}
}
The other way is to create a custom section header and set it using viewForHeaderInSection
override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if section == 0 {
var view = UIView()
view.backgroundColor = UIColor.blueColor()
return view
}
return nil
}

UITableView headerView different sizes

I'm trying to apply a size on my UITableView headerView but it seems like the first section header always is a bit smaller than the rest section headerViews. I've said the constraints for the UITableView so it should be fine. How come the first section is smaller?
func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return ""
}
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 20
}
This behavior occurs when using a Grouped UITableView. The section header height appears shorter for the first section header, because it doesn't have a footer above of it. However, every section header after the first one, does have a footer directly above it. The footers have a default height, which is contributing to the overall height appearance of the section header. Therefore, set the section footer heights so the space between the group sections will have the same visual height.
override func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return CGFloat.min
}
We use CGFloat.min instead of 0, because returning 0 will cause the footer to return a default height.

Resources