Offset HeaderView in Tableview to display like cards - ios

Question

I am currently trying to offset HeaderView for UITableView to get some feel of passbook view but doesn't need to behave like a passbook, just that the upper view gets offset certain pixels to overlay the sections.
Below are a couple of examples I have been working on.
If you notice the first picture, the layout is completed customized in CollectionView, however, I feel like it's over-engineered to get the feel of something based on UITableView in UICollectionView. However the context of the output needs to be rendered just like the one in UITableView based on the second picture, but I am curious if there is any way to offset the "y" value to overlap the previous section header in UITableView?

Answer 1

You need to use a custom UICollectionViewLayout.
Basically, use a UICollectionView with vertical scroll, set the items width equal to the screen's width and implement a custom UICollectionViewLayout instead using UICollectionViewFlowLayout.
You can't overlap two cells in UITableView, because doesn't exist the concept of layout. Cells in UITableView are sequentially.
Here a possibile library.

Answer 2

as #Fry mentioned in his answer, UITableView not really expect you to "move" the section header or cell, and UICollectionView maybe a better option as it give a high degree of flexibility (but of course you will need some work to implement a custom UICollectionViewLayout).
But if you insist to use UITableView, here is a simple idea to achieve what you asked for. Just set the backgroundColor of the section header of next section to match the previous section. This really just give you the "feel" of passbook view but not behave like it.
For example,
let mockData = [(key: "section 1", value: [], color: UIColor.red),
(key: "section 2", value: [], color: UIColor.blue),
(key: "section 3", value: [3, 4, 5], color: UIColor.green)]
...
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "header") as! TestViewHeader
header.containerBackground.backgroundColor = mockData[section].color
// here .white is just an example, you can add any color you want to match with the background or the navigationBar, depends on your design
header.contentView.backgroundColor = (section == 0) ? .white : mockData[section - 1].color
header.containerLabel.text = mockData[section].key
header.containerBackground.roundCorners(corners: [.topLeft, .topRight])
return header
}
And here is the result:
also attached my tableView Header and my helper function for your reference: