IOS - 如何使用水平滚动列表创建 TableView

Question

我正在尝试实现一个带有可滚动水平项目（项目数量未知）的表格视图，如下图所示：

UI 应该是这样的：

1. 在初始化状态下，表格单元格显示一个标签和一些文本，并且圆形项目从右侧弹出
2. 如果用户从右向左滑动，标签和文本会淡出，而水平列表（在单元格内）会取而代之

---

我考虑过使用 TableView 和 dequeueReusableCellWithIdentifier 并创建一个原型单元格，但是我需要记住列表水平位置并在 cellForRowAtIndexPath 上正确初始化单元格，这可能会影响性能。

问：你会使用什么布局来实现这个目标，任何输入/教程将不胜感激

Answer 1

您可以使用 ScrollView 放入 tableview 并将滚动视图的值“启用方向锁”和“启用分页”设置为 true。

Answer 2

如果每个滚动视图中有大量 UI 元素，则使用 UIScrollView 可能需要付出很大的努力，因为您必须预先实例化所有这些元素。更好的解决方案是定义您的自定义UITableViewCell，它有自己的UITableView，但旋转90 度以进行水平滚动。仅当需要使用dequeueReusableCellWithIdentifier:forIndexPath: 显示时，才会创建内部的 UI 元素。请参阅一些示例代码，了解如何创建 90 度旋转的表格视图：

iPhone Tableview Use Cells in Horizontal Scrolling not Vertical

Answer 3

使用UITableView 并将UICollectionView 添加到可重复使用的tableView 单元格中。 UICollectionView 与UITableView 的工作方式相似，因为“项目”（如单元格）只有在它们出现在屏幕上时才可重复使用和实例化。我在谷歌上快速搜索了教程并找到了UICollectionView in UITableViewCell。看看这个和其他一些关于设计的 StackOverflow 问题，你应该是金子。

Answer 4

- SwiftUI

在 swiftUI 中，您可以使用 Stacks 和 ScrollView 以及 List 的强大功能（如果需要）：

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)
                    }
                }
            }
        }
    }
}

在此示例中，我使用 List 表示垂直数据，使用水平 ScrollView 包含一个 HStack（水平堆栈）圆圈。

- 示例

以下代码是唯一可以重现与您的插图完全相同的视图的代码（4 年后在 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())
        }
    }
}

- 结果