Jetpack composeの備忘録

Jetpack compose

Jetpack composeのライブラリ関連の情報
参照するバージョン情報はここから辿れる（↑のBOMってとこから飛べる）

Jetpack composeのライブラリのhow2useが色々書かれてる
理想は端から端まで読んで理解しておきたいが、結構量があるので時間がかかる
一応つまみ食いでも書けはする。

参考：Jetpack composeの研修的なやつ

エンジニアに履修させてレベル合わせないと話にならないので、こんなのが用意されてた。
Jetpack composeのメリット・デメリット・難しさを一々するのは非常に時間の無駄なので、見た前提で会話できることが望ましい。
LLMにでもサマってもらってどうぞ。
https://developer.android.com/courses/pathways/compose?hl=ja

KotlinとJetpack composeの互換性

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.15"
    }

    kotlinOptions {
        jvmTarget = "19"
    }
}

Jetpack compose のUIデバッグ

Codelab

取っ掛かりはここからやってみた。苦労なく理解できた。

UI

sampleとして実装してみたUIのG様のUI仕様書

Figmaからkotlinのコードに落としてくれる？
個人のフリーアカウントだったので試してない（出来なさそうなことが書いてあった <link>）
エンタープライズで試してみたい

Tips

後に増やすハズなので大雑把にカテゴライズしておく

全般

Compose UIのライフサイクル

ViewでComposableを使う

SystemUIとかはこのパターンになりそう。
Viewだったら何でも良いと言いつつライフサイクルどうするんだろうね、と部外者が言ってみる

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>

val composeView = view.findViewById<ComposeView>(R.id.compose_view)
composeView.apply {
    // Dispose of the Composition when the view's LifecycleOwner
    // is destroyed
    setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
    setContent {
        // In Compose world
        MaterialTheme {
            Text("Hello Compose!")
        }
    }
}

参考：SystemUIの実装方法

ComposableでAndroidViewを使う（個人的に非推奨）

方法はあるが、許容したくはない（非常手段）。
技術的なサポート出来ないのでComposeで書き直すことを検討ください（乗り換え強要）。

各種細かいライブラリの利用方法

リソース参照

https://tech.mokelab.com/android/compose/composable/text/display-ja.html
https://qiita.com/FalconFlat/items/6b15f7219e7459ce99b2

// リソースから文字列を読み込む
Text(text = stringResource(R.string.label_text))

// リソースから文字サイズを読み込む
// テーマで指定するほうが適切
Text(
    text = "something",
    // previewしたときにviewのサイズがおかしいな・・・という場合にこれを疑う
    // fontSize = R.dimen.text_size_large ← これは間違い！
    fontSize = dimensionResource(R.dimen.text_size_large).value.sp
)

Modifier

Modifierで制御できるもののリスト

文字関係

phrase指定

最近言われがちなやつ

previewで確認しないとphrase指定が効いているのか非常にわかりにくい

文字溢れ

...にするのが良いかどうかはさておき、指定方法はある

定義済みの文字サイズの参照方法とか

AutoSizeableText

UI parts関係

定義済みのwidgetとか

お試しで作ろうとしたUIにボタンがあったので、ボタン系へのリンクをペタリ

RoundEdgeのカスタマイズ

アライメント関係

（UI初心者だからすごく参考になった）

Composableを並べるだけなら、Containerを作って中身の配置はシステムに任せたほうが良いかも？

border clip関係

LazyColumnのcontentPaddingでそれっぽいことができる

完全に1:1対応という訳ではないらしい

初期フォーカス

パフォーマンス

ベースライン プロファイル
ベースライン プロファイルは、一般的なユーザー ジャーニーを高速化する優れた方法です。アプリにベースライン プロファイルを含めると、含まれるコードパスに対して解釈とジャストインタイム（JIT）コンパイルの手順を行う必要がなくなるため、初回起動からのコード実行速度が約 30% 向上します。
Jetpack Compose ライブラリには独自のベースライン プロファイルが含まれており、アプリで Compose を使用すると、これらの最適化が自動的に適用されます。ただし、これらの最適化は Compose ライブラリ内のコードパスにのみ影響するため、Compose 以外のコードパスをカバーするために、アプリにベースライン プロファイルを追加することをおすすめします。

ライブラリはpre-conpileされてるけど、アプリがそれを使って書いた部分は最適化されていないので、
APK/AAB化するときにBaseline profileを設定してビルドしたほうがパフォーマンスは良い、と解釈した。

Compose のベンチマーク
Jetpack Compose 1.0 では、debug モードと release モードでアプリのパフォーマンスに顕著な違いがあります。アプリをプロファイリングする際は、代表的な時間指標については debug ビルドではなく必ず release ビルドを使用してください。

パフォーマンス評価する際は必ずreleaseビルドされたAPKを用いること。
debugログを出したい等のパフォーマンス測定という目的に沿わない要求は全てrejectし、debugで評価はしないこと。
（あえて書かなくても製品版はreleaseビルドなので問題ないかもしれないが）

Compose プロファイルのインストール
Jetpack Compose はバンドルされていないライブラリであるため、ビューシステムの UI ツールキットのクラスおよびドローアブルをプリロードする Zygote のメリットは得られません。Jetpack Compose 1.0 は、リリースビルドでプロファイル インストールを利用します。プロファイル インストーラを使用すると、インストール時に事前（AOT）コンパイルする重要なコードを指定できます。Compose には、Compose アプリの起動時間を短縮してジャンクを減らすためのプロファイル インストール ルールが付属しています。

これはFramework buildで試してみないと効果分からない。要実験。

試しで書いてみたコードの置き場

2025/05/xx いくつかTodoが残ってるのでGW中に消化してしまいたい
2025/06/06 初期のものをv1、改良版をv2としてアップデート