TopAppBar: Jetpack Composeでの概要、設定、使用方法

Jetpack ComposeのTopAppBarとは？

TopAppBarは、Jetpack Compose用のMaterial Designライブラリのコンポーザブル関数で、上部アプリケーションバーを実装します。このコンポーネントは、現在の画面のタイトル、左側のナビゲーションボタン、右側の追加アクションを表示します。

従来のViewシステムとは異なり、Compose版のTopAppBarは完全に宣言的です。findViewByIdで管理されるのではなく、状態が変更されるとバーが再描画されます。TopAppBarはスロットAPIの概念を使用し、title、navigationIcon、actionsがコンポーザブルラムダとして渡されます。これにより、継承なしでバーの任意の要素をカスタマイズできます。

Google Material Design（2025年）によると、ComposeのTopAppBarには3種類あります：CenterAlignedTopAppBar（中央揃えタイトル）、SmallTopAppBar（標準）、MediumTopAppBar（拡張）。各タイプはバーの高さ、タイトルのフォントサイズ、スクロール動作を定義します。中央揃えバリアントはメイン画面でより頻繁に使用され、MediumTopAppBarはスクロール時にタイトルがスムーズに縮小するコンテンツページに使用されます。

TopAppBarを正しく動作させるには、システムマージン（WindowInsetsCompatからのInsets）を考慮する必要があります。Android Developers（2025年）の推奨によると、Modifier.statusBarsPadding()またはwindowInsetsPadding(WindowInsets.systemBars)を呼び出すことで、バーがステータスバーと重なるのを防ぎます。

TopAppBarパラメータ：タイトルとModifierの設定

TopAppBarコンポーネントは、いくつかの必須およびオプションのパラメータを受け入れます。主要なものはtitleで、タイトルテキストを含むコンポーザブルブロックが渡されます。titleは@Composableラムダであるため、テキストだけでなく、アイコン付きテキスト、検索フィールドの作成、進行状況の表示も可能です。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar() {
    TopAppBar(
        title = { Text("Main") },
        navigationIcon = {
            IconButton(onClick = { /* open drawer */ }) {
                Icon(
                    Icons.Filled.Menu,
                    contentDescription = "Menu"
                )
            }
        },
        actions = {
            IconButton(onClick = { /* search */ }) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
        }
    )
}

Modifierパラメータを使用すると、バー全体のパディング、サイズ、配置を設定できます。Modifier.heightInを使用して最小高さと最大高さを制限できます。colorsパラメータは、背景、タイトル、アイコンの色を上書きするTopAppBarColorsオブジェクトを受け入れます。

デフォルトでは、TopAppBarは現在のMaterialThemeのカラースキームを使用します。カスタムパレットが必要な場合は、TopAppBarDefaults.smallTopAppBarColors()を使用します。Material3では、背景色がライトテーマとダークテーマでsurfaceColorに自動的に適応するため、手動設定は不要です。

TopAppBarのナビゲーションボタン

NavigationIconはTopAppBarの左側にあるコンポーザブルブロックで、ナビゲーションを実装します。典型的なシナリオ：Navigation Drawerを開く（メニューアイコン）、前の画面に戻る（ArrowBackアイコン）、現在の画面を閉じる（Closeアイコン）。

アイコンの選択は、ナビゲーションスタック内の画面の位置によって異なります。画面がルートの場合は、Drawerを開くためにメニューアイコンが表示されます。画面がネストされている場合は、戻るためにArrowBackアイコンが表示されます。Composeでは、このロジックはNavControllerを介して実装されます。現在のバックスタックエントリが表示するアイコンを決定します。

Material Design（2025年）の推奨によると、ナビゲーション領域の幅は48 dpで、タッチインタラクションの標準ターゲットです。アイコンは視覚的なフィードバック（リップル）とともにクリック可能でなければなりません。Composeでは、ナビゲーションをトリガーするonClickコールバックを持つIconButtonでラップすることで保証されます。

Scaffoldを使用する場合、ナビゲーションボタンはTopAppBarに直接ではなくScaffoldに渡されるDrawerStateを複製する可能性があります。この場合、navigationIconはrememberDrawerStateを介してDrawerの状態を参照します。

アクションとドロップダウンメニューの追加

TopAppBarのactionsパラメータは、RowScopeコンテキストを持つコンポーザブルブロックを受け入れ、タイトルの右側に複数のアイコンやボタンを配置できます。各アクションはクリック可能なアイコン要素（検索、通知、設定、お気に入り）である必要があります。

オーバーフローアクションには、DropdownMenuを使用したドロップダウンメニューが使用されます。アクションの数が3つを超える場合、追加のアクションはMoreVertアイコンとともにOverflowMenuに配置されます。クリックすると、非表示のアクションのリストが開きます。DropdownMenuはアイコンに対して自動的に配置されます。

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profile") },
        actions = {
            IconButton(onClick = { /* share */ }) {
                Icon(Icons.Filled.Share, contentDescription = "Share")
            }
            Box {
                IconButton(onClick = { menuExpanded = true }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "More")
                }
                DropdownMenu(
                    expanded = menuExpanded,
                    onDismissRequest = { menuExpanded = false }
                ) {
                    DropdownMenuItem(text = { Text("Settings") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("About") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

各アイコンにcontentDescriptionを設定することが重要です。これはアクセシビリティ要件です。説明がないと、TalkBackはボタンを読み上げません。純粋に装飾的な要素の場合は、contentDescription = nullを使用します。

Material3のTopAppBar：ダイナミックカラーと適応

Material3（M3）はMaterial Designの現在のバージョンであり、Googleが新しいプロジェクトに推奨しています。M3のTopAppBarは、TopAppBar、CenterAlignedTopAppBar、MediumTopAppBarを介して実装されます。Material2との主な違いは、ダイナミックカラー、アダプティブな高さ、スクロール動作の組み込みサポートです。

ダイナミックカラーは、デバイスの壁紙（Android 12+）に基づいてバーの色を自動的に選択します。M3のTopAppBarは背景にsurfaceColor、タイトルにprimaryを使用します。ダイナミックカラーが利用できない場合は、MaterialThemeのフォールバックパレットが適用されます。Google Material Design（2025年）によると、Android 12+ユーザーの63%がアプリケーションでダイナミックカラーを使用しています。

MediumTopAppBarは、大きなタイトル（32 sp）を持つ拡張バリアントで、スクロール時に20 spにスムーズに縮小し、SmallTopAppBarに変わります。この効果は、TopAppBarDefaults.mediumTopAppBarColors()とscrollBehaviorパラメータを介して実装されます。トランジションアニメーションは、タイトルの折りたたみを追跡するTopAppBarStateを介して制御されます。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MediumTopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = { Text("Library") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(contentPadding = padding) { /* content */ }
    }
}

Material3のTopAppBarを使用するには、@OptIn(ExperimentalMaterial3Api::class)を使用する必要があります。このアノテーションは、APIが将来のバージョンで変更される可能性があることを示します。2025年現在、M3のTopAppBarは実験的ですが、Googleは適切なテストを行った上で本番環境での使用を推奨しています。

ScrollBehavior：スクロール時のバー非表示

ScrollBehaviorは、コンテンツの垂直スクロール中のTopAppBarの表示状態を制御するメカニズムです。Jetpack Composeでは、scrollBehaviorを使用してスペースを解放するためにバーを非表示または縮小できます。これは、大きなコンテンツリストがある画面で特に便利です。

Material3は3つの戦略を提供します：enterAlways（上にスクロールするとバーが表示され、下にスクロールすると非表示）、exitUntilCollapsed（タイトルが完全に折りたたまれた後にのみバーが非表示）、およびTopAppBarScrollBehaviorインターフェースを実装したカスタム。最初のオプションはコンテンツフィードに適しており、2番目はMediumTopAppBarを使用する画面に適しています。

ScrollBehaviorは、rememberLazyListState()を介してLazyColumnまたはLazyRowとの連携が必要です。スクロール状態はscrollBehaviorパラメータを介してTopAppBarに渡されます。コンポーネントはスクロールイベントに自動的にサブスクライブし、バーの表示をアニメーション化します。Android Developers（2025年）によると、enterAlwaysScrollBehaviorが最も一般的な戦略であり、スクロール可能なTopAppBarを使用するアプリケーションの75%で使用されています。

カスタムScrollBehaviorの設定

カスタム動作を作成するには、TopAppBarScrollBehaviorを拡張し、onScrollメソッドとonDragメソッドをオーバーライドします。カスタム動作は、標準のシナリオが設計要件をカバーしない場合に便利です。たとえば、特定のスクロールしきい値を超えた場合にのみバーを非表示にする場合などです。

デフォルトでは、scrollBehaviorはコンテンツにパディングを追加しません。paddingTopは、ScaffoldのcontentPaddingを介して、またはLazyColumnのModifier.paddingを介して手動で設定する必要があります。MediumTopAppBarでは、マージンはTopAppBarState.collapsedFractionを介して自動的に計算されます。

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    topBar = {
        MediumTopAppBar(
            title = { Text("Content") },
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    LazyColumn(contentPadding = padding) { /* items */ }
}

ScrollBehaviorはMaterial3でのみ使用できます。Material2のTopAppBarにはスクロール時の非表示の組み込みサポートがなく、同様の動作にはNestedScrollConnectionを介した手動実装が必要です。