Android Jetpack Compose

Jetpack Compose チュートリアルをMaterialTheme3で動かす

JetpackComposeのチュートリアルをMaterialTheme3で実施しました。
Jetpack Compose チュートリアル(公式)

環境

AndroidStudio：Flamingo | 2022.2.1 Patch 2
OS：macOS

app/build.gradle

dependencies {
    implementation 'androidx.core:core-ktx:1.8.0'
    implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0')
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.5.1'
    implementation platform('androidx.compose:compose-bom:2022.10.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
}

Lesson1. Composable functions

Step1.テキスト要素を追加する

[New Project] を選択して、[Phone and Tablet] カテゴリで [Empty Compose Activity] を選択します。

AndroidStudioの「2022.2.1 Patch 2」には、[Empty Compose Activity]がないため、最初のところでいきなりつまづきます。。。
AndroidStudioのリリースノートを見ると、「Empty Activity」を選べばOKとのことでした。

MainActivityの初期状態は、チュートリアルのonCreateとは大分異なりますが、きっと実行すると「Hello Android！」と表示される

無事実行できました。想定通りの表示ですね。
ちょこちょこ出てくる"modifire"は、"Text"とか、画面全体とかをどのように修飾表示するか？を定義するためのものですね。

Step2. コンポーズ可能な関数を定義する

関数をコンポーズ可能にするには、@Composable アノテーションを追加します。これを試すには、名前を受け取り、その名前を使用してテキスト要素を構成する MessageCard 関数を定義します。

初期状態で、すでに"Greeting"という関数が@Composable定義されていますね。

Step3. Android Studioで関数をプレビューする

@PreviewアノテーションをつけたComposableな関数を定義すると、AndroidStudio上でプレビューできるので便利ですね。

Lesson2. Layouts

Step1. 複数のテキストを追加する / Step2. 列を使用する

テキストを2つ縦に表示するのですね。
チュートリアルでは、dataクラスをactivityに記述していますが、気持ち悪いのでmodelパッケージを作成してそちらに作成しました。
こういうコード上でレイアウトを作成していくのは、Flutterと同じ感覚でできますね！

@Composable
fun Greeting(message: Message, modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
    ) {
        Text(
            text = message.author,
            modifier = modifier
        )
        Text(
            text = message.body,
            modifier = modifier
        )
    }
}

Step3. 画像要素を追加する

今度はRowで、画像とテキストを横並びに配置しましょう。

@Composable
fun Greeting(message: Message, modifier: Modifier = Modifier) {
    Row {
        Image(
            painter = painterResource(id = R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
        )
        Column(
            modifier = modifier
        ) {
            Text(
                text = message.author,
                modifier = modifier
            )
            Text(
                text = message.body,
                modifier = modifier
            )
        }
    }
}

Step4. レイアウトを構成する

flutterの書き方とほとんど同じですね。非常になじみ深い！

@Composable
fun Greeting(message: Message, modifier: Modifier = Modifier) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
        )
        Spacer(modifier = Modifier.width(8.dp))
        Column {
            Text(
                text = message.author,
                modifier = modifier
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = message.body,
                modifier = modifier
            )
        }
    }
}

いざ実行

デバイスで見てみます。いい感じです。code

Lesson3. Material Design

Step1. 色の指定

色の指定は、ui.themeパッケージのTheme.ktにて行います。

チュートリアルでは、"colors"からの参照となっていますが、これはMaterialTheme2のお話。
MaterialTheme3では、"colorScheme"を使用します。

• チュートリアルの記述

modifier = Modifier
  .size(40.dp)
  .clip(CircleShape)
  .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
           :
           :
Text(
  text = msg.author,
  color = MaterialTheme.colors.secondaryVariant
)

• MaterialTheme3での記述

modifier = Modifier
  .size(40.dp)
  .clip(CircleShape)
  .border(width = 1.5.dp, color = MaterialTheme.colorScheme.secondary, shape = CircleShape)
           :
           :
Text(
  text = message.author,
  color = MaterialTheme.colorScheme.secondary,
)

Step2. typography

テキストスタイルのことです。
スタイルの設定は、ui.themeパッケージのType.ktを編集しましょう。

チュートリアルでは、"subtitle2"や"body2"を参照していますが、これもMaterialTheme3ではなくなってます。
代わりに"titleMedium","bodyMedium"などを使用しましょう。

• チュートリアルの記述

Text(
  text = msg.author,
  color = MaterialTheme.colors.secondaryVariant,
  style = MaterialTheme.typography.subtitle2
)
           :
           :
Text(
 text = msg.body,
　　style = MaterialTheme.typography.body2
)

• MaterialTheme3の記述

Text(
  text = message.author,
  color = MaterialTheme.colorScheme.secondary,
  style = MaterialTheme.typography.titleMedium,
)
           :
           :
Text(
  text = message.body,
  style = MaterialTheme.typography.bodyMedium,
)

Step3. Shape

形状に関しては、Surfaceのプロパティが変更になっています。
MaterialTheme3では、"elevation"ではなく、"shadowElevation"となります。
（似たようなプロパティに、tonalElevationがありますが、こちらは塗りつぶし表示になり、数値が大きいほど色味が濃くなってきます。）

Step4. ダークテーマ

1. ui.themeパッケージのTheme.ktに"background"を追加します。

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
    background = Color(0xFF000401),
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    background = Color(0xFFFFFBFE),
)

2. GreetingPreview（）に@Previewを追加します。
また、GreetingPreview（）には、Surfaceがなかったので、追加しています。

@Preview(name = "Light Mode", showBackground = true)
@Preview(name = "Dark Mode", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun GreetingPreview() {
    ComposeTutorialTheme {
        Surface(color = MaterialTheme.colorScheme.background) {
            Greeting(Message("Android", "Jetpack Compose"))
        }
    }
}

いざ実行

実行すると以下のように表示されました。コード

Lesson4. Lists and animations

Step1． 一覧を追加

ここはチュートリアルのままでOKです。

Step2. アニメーションの追加

デフォルトでメッセージは1行分しか出さず、タップするとメッセージ全体が表示されるアニメーションを追加します。
これもチュートリアルのままでOKです。

###　いざ実行
デバイスで実行してみます。コード