I have a horizontal scrolling paged collectionview on top, and a tableview at the bottom, like this:
What I'm trying to achieve is that when the user scrolls up the table view, I want the whole page to scroll upwards. Currently, the tableview is confined to the bottom space when scrolling up. Lots of apps have this pattern, but the Fiverr app is an example, and here is a screenshot. The second picture is when I started to scroll up:
I am a complete beginner in Swift so I have no idea even what keywords to search for. What would be the easiest way to accomplish this?
I think you want to put all the views into a UIScrollView.
You can also put the UICollectionView into the table's header view. But if you have more components below the UITableView, I find it easier to just put the whole thing into a UIScrollView.
override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView()
//build header view here
headerView.addSubview(collectionView)
return headerView
}
override func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
//Return the height of the headerview.
return height
}
Edited to answer comment :)
Related
I have a tableView with hundreds of cells. I want to add a feature to pin to top favorite cells, for example by swipe. Is there a way to do that? Or is it easier to have a different tableView with favorite cells?
Section for this.
Add your favorites to view, you can create it using storyboard or programmatically using following code. If you use storyboard, create and make a reference to the tableViewController and just return in this code.
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
{
// create and return yourView
}
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
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
}
I'm using this code to display my custom footer:
override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCellWithIdentifier("footerCell") as! FooterTableViewCell
return cell
}
However, when I reach the bottom of the table the custom footer cell detaches and bounces from the bottom. How can I make the other cells bounce but the footer cell sticky? Is there an easy way to do this in interface builder?
Ideally I'd like to not have to embed or subview the tableviewcontroller. Thanks! CHM
Is there a way to insert a Table Header View (tableHeaderView) in StoryBoard (like we used to do in Interface Builder)?
It looks like one simply drags a control to the top of the table view. I didn't expect it to be that easy.
Before Drop
After Drop
You can do this easily by dragging your UIView/UIImageView just below the UITableView in the document outline (instead of the layout).
If you try to drag in the layout instead of document outline the UITableViewCell will jump to the top handling which is frustrating!
Dragging and dropping a view on top of the tableview worked for only one screen size, at least in Xcode 11. It didn't size well on different screens.
I just created a view and left it there behind the tableview in storyboard. I created an IBOutlet for it:
#IBOutlet weak var audioView: UIView!
Then in tableview code I did:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return audioView
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 142
}
It worked well on all screen sizes.