JetpackComposeでAppBarを作る

Overview

https://developer.android.com/jetpack/compose/components/app-bars

Jetpack ComposeでAppBarを作るのをやってみたのですが、コードimportできないのにハマって、コードを修正してビルドできるようにしました。

公式の上の方の解説

アプリ バーは、主要な機能やナビゲーション項目へのユーザー アクセスを提供するコンテナです。 アプリ バーには、トップ アプリ バーとボトム アプリ バーの 2 種類があります。

これは、AppBarとBottomNavigationBarのことでしょうね。

summary

早速やってみましょう。AppBar.ktを作成して以下のコードを記述します。

package com.example.mylaoyout.component

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

// これをつけないとエラーになる？
@OptIn(ExperimentalMaterial3Api::class)
// AppBarを表示する@Composable関数
@Composable
fun SmallTopAppBarExample() {
    // Scaffoldは、AppBarとBottomBarを含む、基本的なマテリアルデザインのレイアウトを提供する
    Scaffold(
        // TopAppBarを表示する
        topBar = {
            TopAppBar(
                // TopAppBarの色を設定する
                colors = TopAppBarDefaults.largeTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.background,
                ),
                // TopAppBarのタイトルを設定する
                title = {
                    Text("Small Top App Bar")

                }
            )
        },
    ) { innerPadding ->
        // TopAppBarの下に表示するコンテンツを設定する
        Text(text = "Hello World!", modifier = Modifier.padding(innerPadding))
    }
}

// プレビュー画面を表示する関数
@Preview
@Composable
fun SmallTopAppBarExamplePreview() {
    SmallTopAppBarExample()
}

MainActivity.ktで AppBarを表示する@Composable関数をimportする。

package com.example.mylaoyout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.mylaoyout.component.SmallTopAppBarExample
import com.example.mylaoyout.component.SmallTopAppBarExamplePreview
import com.example.mylaoyout.ui.theme.MyLaoyoutTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyLaoyoutTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    SmallTopAppBarExample()
                    SmallTopAppBarExamplePreview()
                }
            }
        }
    }
}

ビルドするとこんな感じです

thoughts

今回は、AppBarを作成してみましたが、ネイティブでAppBarを表示させるときに、Android Studioのバージョンのせいなのか、コード書いたらエラーでハマることがあって、バージョンを固定しないとUI作るだけで難しいんだなと思いました😅