概要
「Android Studio 4.0 Canary 1」にてkotlinのコードでUIを構築できるJetpack Composeに対応しました。
実際に公式のチュートリアルやデモを試したのでそのまとめです。
Android Studio 4.0 ダウンロードページ
Jetpack Composeとは
Use Android Studio with Jetpack Compose
TUTORIAL Jetpack Compose Basics
Jetpack Compose Basics
使い方
1, ActivityのonCreate内にsetContentを呼ぶ
2, @Composableアノテーションをつけた関数を作成し、UIを記述していく
3, setContent内に2で作成した関数を呼ぶ
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// 1
setContent {
// 3
Greeting(name = "Android")
}
}
}
// 2
@Composable
fun Greeting(name: String) {
Text (text = "Hello $name!")
}
レウアウトやテキストにStyleを指定する
Composable関数の引数にスタイルを指定する
Text (text = "Hello $name!", style = Color.Red)
MaterialThemeを使用してスタイルを指定する
MaterialTheme {
Text (text = "Hello $name!", style = +themeTextStyle { h1 })
}
動的にデータを変更したい場合(ステート)
1, @Modelアノテーションをつけたデータクラスを作成
2, Composable関数に1のモデルクラスのインスタンスを渡す
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// 2
Counter(counterState)
}
}
}
val counterState = CounterState()
// 1
@Model
class CounterState (var count: Int = 0)
@Composable
fun Counter(state: CounterState) {
Button(
text = "${state.count} times",
onClick = { state.count++ }
)
}
よく使いそうな関数
| 関数名 | 動作 |
|---|---|
| Text | 文字列を表示する |
| DrawerImage | 画像を表示する |
| Container | レイアウト |
| Row | 要素を横並びにする |
| Column | 子要素を縦並びにする |
| Clip | 画像の角を丸くしたりすることができる |
| Surface | 子要素の背景色の指定や角を丸くしたりすることができる |
| HeightSpacer | 指定した分の高さのスペースを作る |
| WidthSpacer | 指定した分の幅のスペースを作る(Column内で使う) |
| Clickable | 子要素をクリック要素にする |
感想
React, Flutter, SwiftUIを触ったことがありますが、そのおかげかスラスラコードがかけました。
Jetpack ComposeだとステートをModelクラスで保持できるので、普段Android開発してる人はState周りはすんなり理解できると思います。
既存のAPIなどとも互換性があるそうなので、既存のプロジェクトに組み込むこともできます。
正式にリリースされる際はSwiftUIにあるViewをドラッグアンドドロップするとコードが追加される機能がついて欲しいです。
Fragment内のsetContentをviewGroupの拡張関数として呼べるので、Fragment内でもComposable関数が使用できそうだが、やり方がわかりません（わかり次第追記します。）