Android Jetpack Compose

# Jetpack Compose チュートリアルをMaterialTheme3で動かす
JetpackComposeのチュートリアルをMaterialTheme3で実施しました。
[Jetpack Compose チュートリアル(公式)](https://developer.android.com/jetpack/compose/tutorial?hl=ja)

## 環境
AndroidStudio：Flamingo | 2022.2.1 Patch 2
OS：macOS
```gradle: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の[リリースノート](https://developer.android.com/studio/releases?hl=ja#updates-to-npw-nmw)を見ると、「Empty Activity」を選べばOKとのことでした。

[MainActivityの初期状態](https://github.com/jozuko/ComposeTutorial/blob/first_commit/app/src/main/java/com/jozu/jetpack/compose/tutorial/MainActivity.kt)は、チュートリアルのonCreateとは大分異なりますが、きっと実行すると「Hello Android！」と表示される
![Screenshot_create_new_activity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/626c7637-b0cb-c862-53f4-e69b8d1a6257.png)
無事実行できました。想定通りの表示ですね。
ちょこちょこ出てくる"modifire"は、"Text"とか、画面全体とかをどのように修飾表示するか？を定義するためのものですね。

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

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

### Step3. Android Studioで関数をプレビューする
@PreviewアノテーションをつけたComposableな関数を定義すると、AndroidStudio上でプレビューできるので便利ですね。
![Screenshot_preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/13b89eaf-b71f-3e2c-54d1-7c0cbb131e9a.png)

## Lesson2. Layouts
### Step1. 複数のテキストを追加する / Step2. 列を使用する
テキストを2つ縦に表示するのですね。
チュートリアルでは、dataクラスをactivityに記述していますが、気持ち悪いのでmodelパッケージを作成してそちらに作成しました。
こういうコード上でレイアウトを作成していくのは、Flutterと同じ感覚でできますね！
```kotlin
@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で、画像とテキストを横並びに配置しましょう。
```kotlin
@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の書き方とほとんど同じですね。非常になじみ深い！
```kotlin
@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](https://github.com/jozuko/ComposeTutorial/tree/lesson2)
![Screenshot_lesson2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/aaec6da8-c085-da44-29be-513c2b7b7951.png)

## Lesson3. Material Design

### Step1. 色の指定

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

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

- チュートリアルの記述
```kotlin
modifier = Modifier
  .size(40.dp)
  .clip(CircleShape)
  .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
           :
           :
Text(
  text = msg.author,
  color = MaterialTheme.colors.secondaryVariant
)
```
- MaterialTheme3での記述
```kotlin
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"などを使用しましょう。

- チュートリアルの記述
```kotlin
Text(
  text = msg.author,
  color = MaterialTheme.colors.secondaryVariant,
  style = MaterialTheme.typography.subtitle2
)
           :
           :
Text(
 text = msg.body,
　　style = MaterialTheme.typography.body2
)
```
- MaterialTheme3の記述
```kotlin
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"を追加します。
```kotlin
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がなかったので、追加しています。
```kotlin
@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"))
        }
    }
}
```
![screenshot_darkmode_preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/0ec93ff4-def2-c7a0-fb9f-2c6eecbd425b.png)

### いざ実行
実行すると以下のように表示されました。[コード](https://github.com/jozuko/ComposeTutorial/tree/lesson3)
![Screenshot_Lesson3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/6dd9e5e3-9121-4415-e710-353258af9511.png)

## Lesson4. Lists and animations

### Step1． 一覧を追加
ここはチュートリアルのままでOKです。

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

###　いざ実行
デバイスで実行してみます。[コード](https://github.com/jozuko/ComposeTutorial/tree/lesson4_final)
![final_lesson_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/14246a9a-6eb1-0ce3-0272-76df5f94d306.gif)