Jetpack Compose:Layout Inspectorで再Composeを確認

投稿日:  更新日:

表示の変わらないUI要素(Composable関数)に対して行われる再Composeは無駄な処理です。

ですので、極力排除したいところですが、表示が変わらないため、画面上からの判断が難しくなっています。

このようなとき、Layout Inspectorを利用すると、無駄な再Composeを見つけ出すことが出来ます。

※環境:Android Studio Giraffe | 2022.3.1 Patch 1

スポンサーリンク

再Composeの確認方法

Android StudioのLayout Inspectorを使うと、再Compose(フェーズComposition)が実施された関数と回数をグラフィカルに確認できます。

この機能を使うためには、「Show Recomposition Counts」にチェックが必要です。

Layout InspectorのShow Recomposition Countsをチェック

Layout Inspectorの画面は図のような構成になっています。

Layout Inspector画面の構成

ライブアップデートはアプリの画面操作に連動して表示を更新するモードです。結果だけを見たければ、ライブアップデートを無効にして手動アップデートを用いてください。

スポンサーリンク

再Composeの確認例

サンプルは交通量調査で使うトラフィックカウンターです。通過した車・バス・トラックの台数を個別にカウントできます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val _car = remember { mutableStateOf(0) }
            val _bus = remember { mutableStateOf(0) }
            val _truck = remember { mutableStateOf(0) }
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(modifier = Modifier.padding(10.dp)) {
                        ObjectCounter(
                            obj = "Car", counter = _car.value,
                            plus1 = { _car.value++ }, clear = { _car.value = 0}
                        )
                        ObjectCounter(
                            obj = "Bus", counter = _bus.value,
                            plus1 = { _bus.value++ }, clear = { _bus.value = 0}
                        )
                        ObjectCounter(
                            obj = "Truck", counter = _truck.value,
                            plus1 = { _truck.value++ }, clear = { _truck.value = 0}
                        )
                        CombinedButton(
                            onClick = {
                                _car.value = 0
                                _bus.value = 0
                                _truck.value = 0 },
                            indication = null
                        ) { Text(text = "AC") }
                    }
                }
            }
        }
    }
}

@Composable
fun ObjectCounter(
    obj: String, counter:Int,
    plus1: ()->Unit, clear: ()->Unit
) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text(text = "${obj}", modifier = Modifier.width(70.dp))
        Text(text = "%05d".format(counter), modifier = Modifier.width(70.dp))
        CombinedButton(onClick = plus1, indication = null) { Text(text = "+") }
        CombinedButton(onClick = clear, indication = null) { Text(text = "C") }
    }
}

※CombinedButtonはリップルエフェクトを無効化したボタンです。詳細は「Compose Button:リップルエフェクト(Indication)の変更」を参照。

図のような操作を行った場合のLayout Inspectorの表示です。再Composeやスキップの様子が確認できます。

トラフィックカウンターの操作手順

スポンサーリンク

関連記事:

アプリ開発の中で作成したクラスや関数などを資産としてライブラリ化し、次のアプリ開発で再利用するといったスタイルは、開発効率を上げる常套手段です。 私のように個人でアプリを開発している場合、この恩恵は薄いのですが、ソフトハウス(死語?)で年間に多くのアプリを開発している現場では濃いと思います。 「誰かが欲しいと思う機能」は「誰もが欲しいと思う機能」です。同じような仕様のアプリ開発を受注することはありませんか?機能の骨幹はライブラリからの流用に任せて、外観は顧客の要望に合わせるだけで済んだら、楽です。 今回は、Android Studio(アプリ開発)で参照するライブラリの種類について、まとめます。 ...
Module Libraryの構築と参照方法について、まとめます。 ※環境:Android Studio Bumblebee | 2021.1.1 ...
Android StudioはVCS(Version Control System:バージョン管理システム)を使って、プロジェクトの変更履歴の管理が可能です。 Android Studioで利用可能なVCSはいくつかありますが、Gitを取り上げて、ローカルリポジトリの構築とコミット(履歴の登録)の方法を紹介します。 ※環境:Android Studio Electric Eel | 2022.1.1 ※Git自体の説明は行いません。 ...
Android StudioはVCS(Version Control System:バージョン管理システム)を使って、プロジェクトの変更履歴の管理が可能です。 Android Studioで利用可能なVCSはいくつかありますが、Gitを取り上げて、リモートリポジトリの構築とアプリパスワードを使ったプッシュ(履歴の登録)の方法を紹介します。 ※環境:Android Studio Electric Eel | 2022.1.1 ※前提:ローカルリポジトリの構築済み ...
Android StudioはVCS(Version Control System:バージョン管理システム)を使って、プロジェクトの変更履歴の管理が可能です。 Android Studioで利用可能なVCSはいくつかありますが、Gitを取り上げて、SSHを使ったリポジトリのクローン(コピー)とプル(履歴の取得)の方法を紹介します。 ※環境:Android Studio Electric Eel | 2022.1.1 ※前提:リモートリポジトリの構築済み ...
Android StudioはVCS(Version Control System:バージョン管理システム)を使って、プロジェクトの変更履歴の管理が可能です。 Android Studioで利用可能なVCSはいくつかありますが、Gitを取り上げて、アプリパスワードを使ったリモートリポジトリのクローン(コピー)とプル(履歴の取得)の方法を紹介します。 ※環境:Android Studio Electric Eel | 2022.1.1 ※前提:リモートリポジトリの構築済み ...
プロジェクトのビルドで「Something went wrong while checking for version compatibility between the Compose Compiler and the Kotlin Compiler.」とメッセージを吐き、エラーになる場合があります。 既存のプロジェクトを新しくリリースされたAndroid Studioでビルドした場合に頻発します。 先日、「Giraffe|2022.3.1」がリリース(2023.07)されて、早速、ビルドをしたら発生しました。 その対処方法を説明します。 ※環境:Android Studio Giraffe | 2022.3.1 ...
Android Studio Giraffe(2023.07)になって、ビルドスクリプトの推奨がKotlin DSLになりました。 この機会に、ビルドスクリプトと記述言語についてまとめます。 ※環境:Android Studio Giraffe | 2022.3.1    :Android Gradle Plugin 8.1.0    :Gradle 8.0 ...
Module Libraryの構築と参照方法について、まとめます。 この記事は「Module Libraryの構築と参照(2022.04発行)」をAndroid Studio Giraffe(2023.07)向けに書き直したものです。 GiraffeよりGradleでKotlin DSLが推奨になりました。それに従い、ビルドスクリプトをKotlinで記述したコードに置き換えています。 ※環境:Android Studio Giraffe | 2022.3.1    :Android Gradle Plugin 8.1.0    :Gradle 8.0 ...
Jetpack ComposeはAndroidシステムの新たなUIフレームワークです。従来のViewシステムと、アプリ画面の描画の仕組みが異なります。 このJetpack Composeによるアプリ画面の描画について、仕組みの大枠をまとめます。 ※環境:Android Studio Giraffe | 2022.3.1 Patch 1     Kotlin 1.8.10     Compose Compiler 1.4.3 ...
Jetpack Composeは描画処理の軽量化(消費リソース量の削減)をするために、表示の変更されたUI要素のみを再Composeし、表示の変わらないUI要素をスキップします。これにより、高い表示パフォーマンスを維持しています。 しかし、スキップが正常に行われないとしても、アプリの画面に現れて来ません。なぜなら、同じ表示を無駄に繰り返すことになるからです。 アプリは動くけれど動作が鈍いならば、真っ先に疑うポイントです。不要な再Composeが行われている可能性が考えられます。 これは気付かないうちに蓄積し易い不具合です。ですので、再Composeとスキップについて理解し、予防に努めることをお勧めします。 今回は「再Composeとスキップ」について、まとめます。 ※環境:Android Studio Giraffe | 2022.3.1 Patch 1     Kotlin 1.8.10     Compose Compiler 1.4.3 ...
サンプルアプリを作成して、描画処理(再Compose)の周期を観測してみました。 その結果を紹介します。 ※環境:Android Studio Giraffe | 2022.3.1 Patch 1     Kotlin 1.8.10     Compose Compiler 1.4.3 ...
スポンサーリンク