kaede

Posted on Jan 2, 2023 • Edited on Jan 5, 2023

Android 基礎 -- Part 01 Jetpack Compose を使って Hello Android のアプリを生成して setContent と Preview の意味を学ぶ

#android #jetpackcompose

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

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

DEV Community