web-dev-qa-db-ja.com

IOS-水平スクロール可能なリストを使用してTableViewを作成する方法

次の図のようなスクロール可能な水平アイテム（アイテムの数が不明）を含むテーブルビューを実装しようとしています。

enter image description here

UIは次のように動作するはずです。

  1. 初期状態では、表のセルにラベルとテキストが表示され、円形のアイテムが右側から飛び出します
  2. ユーザーが右から左にスワイプすると、ラベルとテキストがフェードアウトし、水平なリスト（セル内）がその場所を取ります

TableViewとdequeueReusableCellWithIdentifierを使用してプロトタイプセルを作成することを考えましたが、リストの水平位置を覚えて、cellForRowAtIndexPathでセルを適切に初期化する必要があります。これはおそらくパフォーマンスに影響します。

Q：この目標を達成するためにどのレイアウトを使用しますか、どんな入力/チュートリアルも歓迎します

iosuitableviewswiftlayout
49
Shlomi Schwartz

UITableViewを使用して、UICollectionViewを再利用可能なtableViewセルに追加します。 UICollectionViewは、[アイテム]（セルなど）が再利用可能で、画面に表示されるときにのみインスタンス化されるという点で、UITableViewと同様に機能します。私はチュートリアルのために簡単なグーグル検索を行い、 ITableViewCellのUICollectionView を見つけました。それを確認し、設計に関する他のStackOverflowの質問をいくつか確認してください。

50
Andrew Robinson

各scrollview内に大量のUI要素がある場合、UIScrollViewを使用するには、それらすべてを事前にインスタンス化する必要があるため、多大な労力が必要になる場合があります。より良い解決策は、独自のUITableViewCellを持つが、水平スクロールのために90度回転したカスタムUITableViewを定義することです。内部のUI要素は、dequeueReusableCellWithIdentifier:forIndexPath:を使用して表示する必要がある場合にのみ作成されます。 90度回転したテーブルビューを作成する方法に関するサンプルコードを参照してください。

iPhone Tableviewは、垂直ではなく水平スクロールでセルを使用します

6
Xiaojun

ScrollViewを使用してTableview内に配置し、ScrollViewの値「Direction lock enabled」および「Paging Enabled」をtrueに設定できます。

4
Calc91

-SwiftUI

SwiftUIでは、StackとともにScrollViewsおよび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())
        }
    }
}

-結果

enter image description here

0
Mojtaba Hosseini