【Android】Jetpack Compose を使ってみた

Jetpack Composeを使って、簡単なテキストを表示するところまで実装してみたいと思います。

Jetpack Compose の設定

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

Android Studio で Jetpack Compose を使用する

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

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

Preview release

Android Studio で新規プロジェクトを作成する

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

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"
}

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を以下のように変更します。

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 の右側にプレビューが表示されます。