Jetpack Composeに触れる

Jetpack Composeの各コンポーネントについて紹介をしていきます。
今回は準備とプロジェクト生成時のMainActivityの中身について触れていきます。

Jetpack Composeとは

Jetpack Composeは、ネイティブUIをビルドするためのAndroidの最新ツールキットです。
既存のAndroid開発ではレイアウトにXMLを使用していました。
Jetpack ComposeではXMLを使用せずにUIの構築を行うことがことができます。

環境

• Android Studio Android Studio Bumblebee | 2021.1.1 Patch 3

準備

Jetpack Composeのプロジェクトを作成するには
Android StudioのFile -> New -> New Project -> Empty Compose Activity
で作成します。

MainActivity

プロジェクトを作成すると以下のようなコードが生成されます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SampleJetpackComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    SampleJetpackComposeTheme {
        Greeting("Android")
    }
}

onCreateメソッドのsetContentの中に表示するUIの部品（コンポーネント）を配置することができます。

Composable

Jetpack Composeでは各UI部品をコンポーネントという部品単位にわけることで構築を行います。
その際Composableアノテーションをつけます。
上記のコードではGreetingというコンポーネントが生成されています。
Greetingの中にあるTextもコンポーネントです。
Textに文字列を渡すことで、渡したテキストが画面に表示されます。

Jetpack Composeのコンポーネントの
名前はアッパーキャメルケースで記述します。

PreView

Previewアノテーションを付けることで、シミュレータや実機を起動しなくても、
プレビュー画面からコンポーネント単位でUIの確認を行うことができます。

参考

Compose を導入する理由