Jetpackの作成:リスト入門



Jetpackの構成が最終的に安定した形であるので、それはしばらくありました.いくつかは、プライムタイム(まだ)の準備ができていない可能性がありますすべてのUIは、構成を使用して実装することはできません.
それにもかかわらず、それはAndroidのUIの未来であり、私はそれはすべてのいくつかの複雑なシナリオを扱うことができる以上のものだと思う.ボーナスとして、また、非常に楽しい経験を構築するときには、雑用されています!
それ以上のADOなしで、現代のUIのリストの最も基本的なビルディングブロックのリストを持っていましょう:リスト.これ以上RecyclerView.Adapter またはその他のアダプタ.構成は、効率的なリストを構築するのすべての複雑さを取ります.

小さなリスト
簡単な小さなリストについては、非常に簡単です Column そして、アイテムは他の後に1つを積み重ねます.
そのようなリストの項目の数を小さく保つ必要があることに留意してください.すべての項目は、画面上に描画されます.リストが長いならば、潜在的パフォーマンス問題は現れるかもしれません.
たとえば、表示するタスクの一覧がある場合は、次のスニペットを使用できます.
    @Composable
    fun smallList(tasks: List<Task>) {
        Column {
            tasks.forEach { task ->
                Text(task.text)
            }
        }
    }

大きなリスト
いくつかの項目のみが表示され、残りの部分を表示するスクロールする必要がある“現実世界”のリストについては、使用することができます LazyColumn . これはverboseの代わりですRecyclerView.Adapter XMLベースのAndroidのUIの世界.
この構成可能なものを使用して、目に見える項目だけが画面上に描画されます.リストがスクロールされるとすぐに、新しいアイテムは効率(スクリーンから出るいくつかの見解が再利用されるかもしれない)でスクリーンに描かれます.しかし、これらはスクリーンの後ろにあります.あなたがする必要があるすべてのアイテムを描画するために提供されます.
    @Composable
    fun largeList(tasks: List<Task>) {
        LazyColumn(
            contentPadding = // 1.
                PaddingValues(horizontal = 16.dp, vertical = 8.dp))
        {
            items(tasks, // 2.
                key = { task -> task.id } // 3.
            ) { task ->
                Text( // 4.
                    task.text,
                    Modifier // 5.
                        .clickable( // 6.
                            onClick = {
                                viewModel.onItemClick(task)
                            },
                            interactionSource = MutableInteractionSource(),
                            indication = rememberRipple(bounded = true), // 7.
                        )
                )
            }
        }
    }
  • 各行の項目の間にいくつかのスペースを持つため.
  • 使用するitems() リストに表示する行を提供するメソッドです.
  • 既定では、リスト内の各項目は、項目の位置を一意の識別子として使用します.これは、リストの順序が変わるとき、問題を引き起こすことがありえます.並べ替え項目の状態は失われる可能性があります.可能な場合は、基になるデータの実際の一意の識別子を提供します.
  • この簡略化された場合には、リスト内の各行を単純なText . しかし、ここでは、任意のComposable 各行を表すメソッド.
  • 使用するModifier 行のカスタマイズ可能な行の行.
  • これは行をクリック可能にする(そして、行がクリックされたときに何が起こるかを提供する)ことです.
  • これは行をクリックすると“リップル”効果を持つためです.また、あなただけのアプリケーション全体のテーマを提供することができますlearn more ).

  • 更なる読書
    これは、構成のリストのための速いプライマーであることを目指します.しかし、簡単にできるいくつかの非常にクールなものがありますLazyColumn 例えばsticky headers , reacting , and controlling スクロール位置.
    君が今できることはitems animations ドラッグアンドドロップの順序を変更する(しかしうまくいけばすぐに実装されます.いくつかの回避策/ハック/外部ライブラリが存在します).
    ハッピーコーディング!