Jetpack Compose Academy · レッスン

固定ヘッダーとセクションリスト

固定ヘッダーで項目をグループ化します。

「固定ヘッダーとセクションリスト」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Lists Often Have Sections

Real lists group data, like contacts by letter or emails by date. Each group deserves a clear header above its rows.

A Header Is Just an item

The simplest header is a single item block holding a styled Text. Place it before the group's items and it scrolls along.

item { Text("A", style = MaterialTheme.typography.titleMedium) }

Build Sections in a Loop

Loop over your grouped data and, for each group, add its header item then its items. This builds a clean section list.

groups.forEach { (letter, names) ->
    item { Text(letter) }
    items(names) { Text(it) }
}

The Problem: Headers Scroll Away

A plain header scrolls off the top with its rows. Mid-section, you lose track of which group you're even looking at.

Enter Sticky Headers

A stickyHeader pins itself to the top while its section scrolls beneath it. The current group label always stays in view. 📌

stickyHeader { Text("A") }

Use It Like item

Call stickyHeader exactly where you'd put a header item, just before the section's items block. Compose handles the pinning.

groups.forEach { (letter, names) ->
    stickyHeader { Text(letter) }
    items(names) { Text(it) }
}

One Header at a Time

As a new section reaches the top, its header pushes the old one up and out. Only the current group's header stays pinned.

Headers Need a Background

Give the sticky header a solid background. Without one, scrolling rows show through and the pinned text becomes hard to read.

stickyHeader {
    Text(letter, Modifier.background(Color.White).fillMaxWidth())
}

Group Your Data First

Prepare a grouped structure before composing, often with groupBy. Clean data makes the section loop short and readable.

val byLetter = names.groupBy { it.first() }

Sticky Headers Lives in LazyColumn

The stickyHeader builder is part of the LazyColumn scope. It works only inside a lazy list, not a plain Column.

Polished, Scannable Lists

Together, section headers and sticky pinning turn a long flat list into a scannable, professional screen users can navigate fast.

Quick Check

What does a sticky header do?

Recap: Headers That Stick

Build sections by pairing a header with items, then swap to stickyHeader so the group label pins while you scroll. Add a background! 🎉

よくある質問

「固定ヘッダーとセクションリスト」レッスンは無料ですか？

はい。「固定ヘッダーとセクションリスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「固定ヘッダーとセクションリスト」で何を学びますか？

固定ヘッダーで項目をグループ化します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「固定ヘッダーとセクションリスト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る