#iOS | #Android ファショ通

Jetpack Compose を使っていると、

いつ、どの composable が、 compose されているか、

パフォーマンスが重ければ重いほど気になります。

確認してみましょう。

 

Layout Inspector

すごく便利そうな AndroidStudio の機能です。

Compose のパフォーマンス  |  Jetpack Compose  |  Android Developers 

[Tools]

  ↓

[Layout Inspector]

 

利用条件

端末側で設定が必要です。

表示属性検査を有効にする

Compose のツール  |  Jetpack Compose  |  Android Developers 

R8 などは OFFにする。

debug {
  minifyEnabled false // for layout inspector
  proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}

あと、一番ネックになるのがこれ。

This is only available in Electric Eel at the moment:

"For even more cutting edge features, you can take a sneak peek at the Android Studio Electric Eel release in the Canary channel [...] These features will be promoted to more stable channels once we have your feedback and make improvements, so please try them out."

android - Jetpack Compose: The layout inspector is not showing the menu for recomposition counts - Stack Overflow 

Android Studio Electric Eel release in the Canary channel

今はまだ、非Statble な「Android Studio Electric Eel」でしか使えないようです。

JetBrains の「Toolbox」を使っていれば問題ありません。

使ってない人は、すぐインストールしておきましょう。

JetBrains Toolbox で Android Studio の Stable/Beta/Canary が同時に管理できる? 

 

結果

左下に Layout Inspector が開いたら以下。

[Component Tree]

  ↓

[View Option]

  ↓

[Show Recomposition counts]

ヘビーな LazyVerticalGrid でやってみました。

re-compose されると、その部分が赤く変色します。

しかしこれ、

重すぎやせんか、ツールとして。

しかも、よく落ちる。

今後、期待しています。

「Compose Compiler Reports」 recompose される条件とタイミングと範囲を知りたい 
【Jetpack Compose】LazyVerticalGrid - Profile GPU Rendering / Profile HWUI rendering - YouTube 

JetPack Compose を触りながら、

コードの編集をしてファイルを切り替えていると、

デフォルトで右側に「Preview」画面が表示されますね。

なんかうざい。

デフォルトは 「Split」 でなく 「Code」 でいいのに。

デフォルトを「Code」にしておきましょう。

[Preferences]

  ↓

[Editor]

  ↓

[Design Tools]

最近、この Preview画面、

ずっと Refreshing 状態のときがあったり、

デザインのためのビルドされるのも意図したときだけにしたかったので。