IOS - Как создать TableView с горизонтальными прокручиваемыми списками

Я пытаюсь реализовать табличный вид с прокручиваемыми горизонтальными элементами (с неизвестным количеством элементов), как показано ниже:

Пользовательский интерфейс должен вести себя так:

В состоянии init ячейка таблицы показывает метку, а текст текста и элемент круга выходят из правой стороны.
Если пользователи щелкают справа налево, ярлык и текст исчезают, а горизонтальный список (внутри ячейки) занимает место

Я думал об использовании TableView и dequeueReusableCellWithIdentifier и создании ячейки прототипа, но тогда мне нужно запомнить горизонтальную позицию списка и правильно инициализировать ячейку на cellForRowAtIndexPath, и это, вероятно, повлияет на производительность.

Q: Какой макет вы используете для достижения этой цели, любой ввод/учебник будет оценен

Ответ 1

Используйте UITableView и добавьте UICollectionView в свою повторно используемую ячейку tableView. UICollectionView работает аналогично UITableView тем, что "элементы" (например, ячейки) повторно используются и создаются только тогда, когда они появятся на экране. Я быстро выполнил поиск учебников и нашел UICollectionView в UITableViewCell. Проверьте это и несколько других вопросов StackOverflow, касающихся дизайна, и вы должны быть золотыми.

Ответ 2

Использование UIScrollView может потребовать значительных усилий, если в каждом представлении прокрутки имеется большое количество элементов пользовательского интерфейса, поскольку вам необходимо создать все эти предварительные версии. Лучшее решение - определить свой пользовательский UITableViewCell который имеет собственный UITableView но повернутый на 90 градусов для горизонтальной прокрутки. Элементы пользовательского интерфейса внутри будут создаваться только тогда, когда они должны быть показаны с использованием dequeueReusableCellWithIdentifier:forIndexPath: Посмотрите пример кода о том, как создать табличное представление с поворотом на 90 градусов:

Ячейки iPhone для просмотра таблиц при горизонтальной прокрутке, а не по вертикали

Ответ 3

Вы можете использовать ScrollView для размещения внутри вашего табличного представления и установить для "scrollview" значение "Direction lock enabled" и "Paging Enabled" равным true.

Ответ 4

- SwiftUI

В swiftUI вы можете использовать мощность Stack и 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 (стек Horizonl) кругов.

- Пример

Следующий код - единственный код, который воспроизводит вид, точно такой же, как ваша иллюстрация (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())
        }
    }
}