Jetpack Composeを使ってみる

10896 ワード
Android JetpackCompose Kotlin Android テキストリンク

今回は「Jetpack Composeの設定」と「簡単なテキストを表示する」ところまでやってみたいと思います。

Jetpack Composeの設定

developersの以下の記事を参考に設定を行いました。

Android Studio で Jetpack Compose を使用する

1. Composeに対応しているAndroid Studioをインストールする

以下のURLから「DOWNLOAD ARCTIC FOX CANARY 9」をインストールします。

Preview release

2. Android Studioで新規Projectを作成する

プロジェクトを作成するときに、APIレベル21以上（Android 5.0/Lollipop）を選択します。

3. Kotlinのバージョンを1.4.21に変更する

build.gradle
dependencies {
  classpath "com.android.tools.build:gradle:7.0.0-alpha09"
  classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.21"
}

4. Composeライブラリを依存関係に追加する

app/build.gradle
// バージョンを上げれるよ、とAndroid Studioが教えてくれますが、そのままでOKです。
dependencies {

    implementation 'androidx.compose.ui:ui:1.0.0-alpha10'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-alpha10'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha10'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-alpha10'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha10'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha10'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha10'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha10'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-alpha10'
}

簡単なテキストを表示する

setContentでText関数を呼び出す

レイアウトをXMLファイルで定義するのではなく、setContentブロックでActivityのレイアウトを定義します。

そして、setContentブロックの中で、コンポーズ可能な関数を呼び出します。

setContentView(R.layout.activity_main)は削除してOKです。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Text("Hello World")
        }
    }
}

すると、以下の画面が表示されます。

コンポーズ可能な関数を作成する

コンポーズ可能な関数は、他のコンポーズ可能な関数から呼び出すことが出来ます。
つまり、@Composableアノテーションが設定された関数のスコープ内からのみ呼び出しが可能です。

// Good
@Composable
fun method01(name: String) = Text(text = name)
// Bad（@Composableがない関数で、Text関数を呼び出している）
fun method02(name: String) = Text(text = name)

MainActivity.ktを以下のように変更します。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("World")
        }
    }
}

@Composable
fun Greeting(name: String) = Text(text = "Hello $name")

上記を実行すると、先ほどと同じ画面が表示されると思います。

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

Android Studioで関数をプレビューするには、作成した関数の@Composableアノテーションの前に、@Previewを設定します。

注意点として、プレビューする関数はパラメータを使用することが出来ません。

なので、Greeting関数は引数にname: Stringがあるので、他の関数を定義する必要があります。

引数がある関数に@Previewを設定すると「Composable function with non-default parameters are not supported in Preview unless they are annotated with @PreviewParameter」エラーが表示されます。

// 引数があるので、@Previewアノテーションを付けることが出来ない
@Preview
@Composable
fun Greeting(name: String) = Text(text = "Hello $name")

Greeting関数を呼び出す別の関数「PreviewGreeting関数」を作成し、@Previewアノテーションを設定します。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("World")
        }
    }
}

@Composable
fun Greeting(name: String) = Text(text = "Hello $name")

// 追加
@Preview
@Composable
fun PreviewGreeting() = Greeting(name = "Android")

PreviewGreeting関数を追加した後に再ビルドすると、Android Studioの右側にプレビューが表示されます。