Android【Jetpack Composeお試し編】 #Android

概要

「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関数が使用できそうだが、やり方がわかりません（わかり次第追記します。）