IOS - How to create TableView with horizontal scrollable lists

Question

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

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

Answer 1

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.

Answer 2

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

Answer 3

You can use a ScrollView to put inside your tableview and set the values "Direction lock enabled" and "Paging Enabled" to true for the scrollview.

Answer 4

- SwiftUI

In swiftUI, you can use the power of Stacks and ScrollView alongside with List (if you want):

struct ContentView: View {

    var verticalData = 0...3
    var horizontalData = 0...15

    var body: some View {
        List(self.verticalData, id: \.self) { vData in
            ScrollView(.horizontal) {
                HStack(spacing: 16) {
                    ForEach(self.horizontalData, id: \.self) { _ in
                        Circle()
                            .foregroundColor(.blue)
                            .frame(width: 40, height: 40, alignment: .center)
                    }
                }
            }
        }
    }
}

In this example I used a List for vertical data and a horizontal ScrollView containing a HStack (Horizonl stack) of circles.

- Example

The following code is the the only code to reproduce a view exactly like your illustration (4 years later on iPhone Xs):

struct CircleView: View {
    var body: some View {
        Circle()
        .foregroundColor(.blue)
        .frame(width: 80, height: 80, alignment: .center)
    }
}

struct RowView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 16) {
                VStack(alignment: .leading, spacing: 4) {
                    Text("Label")
                    Text("Some text here")
                }
                ForEach(0...15, id: \.self) { _ in
                    CircleView()
                }
            }
            .padding(16)
        }
    }
}

struct ContentView: View {

    var body: some View {
        List {
            ForEach(0...3, id: \.self) { _ in
                RowView()
            }.listRowInsets(EdgeInsets())
        }
    }
}

- Result