Jetpack Compose について調査する

Jetpack Compose の概要と書き方を調べる

https://qiita.com/kota_2402/items/7bbdd87be8024785e25b#jetpack-compose-1

宣言的に UI が書ける Google の Android 用フレームワーク。

宣言的ってなんだっけ？

https://qiita.com/Hiroyuki_OSAKI/items/f3f88ae535550e95389d#declarative%E3%81%AA%E8%A8%80%E8%AA%9E

コーヒーを淹れる例を、宣言的と命令的と対比すると

宣言的は

コーヒーを一杯くれ 

などと欲しいものを要求する書き方で

命令的は

お湯を沸かせ。コップに入れろ。コーヒーの粉を入れろ。混ぜろ。机の上にもってこい。 

などと作業の詳細を細かく記述するのが命令的だと解釈した。

宣言的らしい Jetpack のコードを記事で見てみる

https://qiita.com/kota_2402/items/7bbdd87be8024785e25b#jetpack-compose

この Qiita の kota_2402 さんのコードを見てみると

fun myApp() { MaterialTheme { Center { Text() } } } 

このように、構造的にわかりやすく書けることが確認できた。
React っぽい。ロジックをどこに書くかは謎。

これは普通に XML で書くより遥かにやりやすそうに見える。

Jetpack Compose でどうやって Android アプリが作成されるかを調べる

https://android.googlesource.com/platform/frameworks/support/+/androidx-master-dev/README.md

Android Google 公式によると

jar ファイルや aar ファイル (jar の Android 版と予想)
これが Maven で DL できて

androidx.* でインポートできるらしい。

https://www.youtube.com/watch?v=wTqfr2rO7SM&list=PLgAI_5b_7BdRaBPAD5RMrzjoSwefDXpkw&index=1

MokeLab さんの動画によると、
最初にプロジェクトを作成するときに、
Empty Compose Activity で作成すれば

最初から Jetpack Compose で UI が作成されるらしい。

実際に Jetpack Compose でプロジェクトを作ってみる

現在のプロジェクトを閉じて新しいプロジェクトを Jetpack Compose で作る

画面の左上の Menu -> File -> Close Project で

現在の XML で書かれているプロジェクトを閉じる

するとプロジェクト一覧の画面に戻れる。

ここから New Project で　Hello Jetpack というプロジェクトを作る。

もちろん Empty Compose Activity を選択

これで Jetpack Compose のプロジェクトが作成される。

setContent の中の書き方を覚える

作成した Jetpack Compose のプロジェクトの setContent の中身を見る

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { HelloJetpackTheme { // 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() { HelloJetpackTheme { Greeting("Android") } } 

setContent という main っぽい関数の中で
Surface という関数に
modifier としてサイズを渡し
color として色を渡し
Greeting という関数に Android という文字列を渡している。

ビルドして実行する

これをビルドして実行してみる。

Hello Android と右上つめで表示された。

背景色を変えてみる

Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.secondary ) { 

Surface に渡している color の値を backgroud から secondary に変えてみる。

すると、背景色がエメラルドグリーンになった。南国気分！

他の colors も見てみる

この colors は、alt クリックで辿ると
androidx / compose / material / Color.kt / lightColors
ここに

fun lightColors( primary: Color = Color(0xFF6200EE), primaryVariant: Color = Color(0xFF3700B3), secondary: Color = Color(0xFF03DAC6), secondaryVariant: Color = Color(0xFF018786), background: Color = Color.White, // ... 

こうやって定義されていた。
androidx の提供だけど、Java のライブラリと違って「あなたはライブラリのコード見ています」と注釈が出ないので、書き換えられそうに見える。

@Preview によるコンポーネントプレビューを確認する

@Preview って何？

HelloJetpackTheme/Greeting がなぜ二回よばれているのか気になった。

setContent で HelloJetpackTheme で Greeting が使われて
At Preview の At Composable の DefaultPreview 関数でも
HelloJetpackTheme で Greeting が使われている。

https://developer.android.com/jetpack/compose/preview?hl=ja

調べてみると、レイアウトプレビューといい

Split タブで、DefaultPreview の関数内部で呼び出したものだけ見ることができた。

@Preview を削ると？

At Preview の区画を削ると、プレビューができなくなったが
正常にビルドして実行することはできた。

変更してプレビューで見てみる

Greeting に渡している文字列を変更すると即座にプレビューに反映された。
すぐに動作確認できるのでこれは便利。

プレビューで呼び出すコンポーネントの関数名を変更してみる

DefaultPreview となっている関数名はカスタム可能だった。

Preview にのみ背景をつけてみる

setContent の内部と同じように色をつけてみる

@Preview(showBackground = true) @Composable fun DefaultPreviewWithCustomName() { HelloJetpackTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.error ) { Greeting("Preview with Color") } } } 

ちゃんとプレビュー内部でも背景色がついた。
毎回ビルドしなくても UI コンポーネント単体なら
これで見た目を確認できるようだ。　

https://developer.android.com/jetpack/compose/preview?hl=ja#basics

複数プレビューもできるらしい。
ビジネスサイドに見せやすそう。