モケラ

Tech Sheets

mokelab

Jetpack ComposeのScaffoldにトップバーを追加する

最終更新日:2021-09-26

Jetpack Composeの Scaffolod にトップバーを追加するには、 topBar パラメータを追加します。トップバーとはアクションバー(ActionBar)やツールバー(Toolbar)などと呼んでいた部分のことです。マテリアルデザインでは App bars と呼ぶようです。

@Composable
fun MyApp() {
    ComposeAppTheme {
        Scaffold(
            // topBarを指定する
            // ネストが深くなったので別Composableにしました
            topBar = { MyTopAppBar() }
        ) {
            MainScreen()
        }
    }
}

@Composable
fun MyTopAppBar() {
    TopAppBar(
        title = {
            Text(text = stringResource(id = R.string.app_name))
        },
    )
}

TopBar のカスタマイズは別ページで紹介します。 実行してみると次のようにトップバーが表示されます。

一覧に戻る