Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IOS - How to create TableView with horizontal scrollable lists

I'm trying to implement a table view with scrollable horizontal items (with unknown number of items) like the illustration below:

enter image description here

The UI should behave like so:

  1. At the init state the table cell shows a label and some text and the circle item pops out of the right side
  2. If the users swipes from right to left, the label and text fades out and the horizontal list (inside the cell) takes it's place

I thought about using TableView and dequeueReusableCellWithIdentifier and creating a prototype cell, but then I need to remember the list horizontal position and init the cell properly on cellForRowAtIndexPath and that will probably affect performance.

Q: What layout would you use in order to achieve this goal, any input / tutorial would be appreciated

like image 645
Shlomi Schwartz Avatar asked Jan 08 '15 16:01

Shlomi Schwartz


People also ask

Can UITableView scroll horizontal?

You can add a UITableView to a UIScrollView and have it scroll horizontally.

How do I make a Tableview not scrollable?

You need to set the UITableView scroll to false , tableview. scrollEnabled = false; tableview.

How do I scroll to top Tableview?

To scroll to the top of our tableview we need to create a new IndexPath . This index path has two arguments, row and section . All we want to do is scroll to the top of the table view, therefore we pass 0 for the row argument and 0 for the section argument. UITableView has the scrollToRow method built in.


2 Answers

Use a UITableView and add a UICollectionView to your reusable tableView cell. UICollectionView works similar to UITableView in that the "items" (like cells) are reusable and instantiated only when they will appear on screen. I did a quick google search for tutorials and found UICollectionView in UITableViewCell. Check that out and a few other StackOverflow questions regarding design and you should be golden.

like image 135
Andrew Robinson Avatar answered Oct 11 '22 20:10

Andrew Robinson


Using UIScrollView may require heavy effort if there are large amount of UI elements inside each scrollview because you have to instantiate all those upfront. A better solution is to define your custom UITableViewCell which has its own UITableView but rotated in 90 degree for horizontal scrolling. UI elements inside will be created only when they need to be shown by using dequeueReusableCellWithIdentifier:forIndexPath:. Please see some sample code on how to create a 90 degree rotated table view:

iPhone Tableview Use Cells in Horizontal Scrolling not Vertical

like image 6
Xiaojun Avatar answered Oct 11 '22 20:10

Xiaojun