Tools | #iOS | #Android Fashion News

【Jetpack Compose】パフォーマンス「HWUIレンダリングプロファイルの作成」は「クイック設定開発者用タイル」を使うと便利

Last updated : 2022-07-10 15:34

re-compose によるパフォーマンスが気になりますよね。

使いましょう、「HWUIレンダリングプロファイルの作成」。


[開発者向けオプション]

  ↓

[監視・HWUIレンダリングのプロファイル作成]

  ↓

[棒グラフとして画面に表示]

「クイック設定開発者用タイル」を使うと便利

設定画面へ移動してからの ON / OFF の操作が面倒です。

通知バーからON/OFFできる「クイック設定開発者用タイル」を使いましょう。


[開発者向けオプション]

  ↓

[クイック設定開発者用タイル]

  ↓

[HWUIレンダリングプロファイルの作成] をON

続いて、通知バーに配置して表示させます。


[通知バー]

  ↓

(左下鉛筆マークから編集)

  ↓

(ドラッグで上へ移動して表示させる)

便利です!!

👉 GPU レンダリングのプロファイル作成ツールによる分析 | Android デベロッパー | Android Developers
👉 GPU レンダリングの速度とオーバードローを検査する | Android デベロッパー | Android Developers

【Jetpack Compose】「Layout Inspector Recomposition counts」で re-compose 回数を確認する

Last updated : 2022-07-19 09:22

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

【AndroidStudio】DesignTools の Preview デフォルトを「Split」→「Code」にする

Last updated : 2022-07-06 06:11

JetPack Compose を触りながら、

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

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

なんかうざい。

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

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


[Preferences]

  ↓

[Editor]

  ↓

[Design Tools]

最近、この Preview画面、

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

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

ビルド時間を計測・比較したいときの gradle(w) オプション

Last updated : 2022-06-15 21:33

Terminal 開いてから。


./gradlew --profile --offline --rerun-tasks --max-workers=4 assembleDebug

👉 Compose におけるデベロッパーのエルゴノミクス | Jetpack Compose | Android Developers

結果がHTMLで出力されます。

各オプションの意味については以下。

--profile
Generates a high-level performance report in the $buildDir/reports/profile directory. --scan is preferred.

--offline
Specifies that the build should operate without accessing network resources.

--rerun-tasks
You can force Gradle to execute all tasks ignoring up-to-date checks

--max-workers
Sets maximum number of workers that Gradle may use. Default is number of processors.

👉 Command-Line Interface

実行前にクリーンするのがいいそうです。


// On Mac or Linux, run the Gradle wrapper using "./gradlew".
gradlew clean

gradlew --profile --offline --rerun-tasks assembleFlavorDebug

👉 ビルドのプロファイリングを行う | Android デベロッパー | Android Developers


./gradlew clean && ./gradlew --profile --offline --rerun-tasks --max-workers=4 assembleDebug

10回やってみてどうなるか。

ある平均的なぶれのないビルド時間になりますかね。

【Jetpack Compose】Icon() や Image() で ImageVector をより便利に使う

Last updated : 2022-06-19 14:21

コード記述のみでベクターのマテリアルアイコン使えます。

drawable の作成が不要なので便利、変更もしやすいです。


Icon(
  imageVector = Icons.Filled.Favorite,
  contentDescription = null
)


Image(
  imageVector = Icons.Filled.Favorite,
  contentDescription = null
)

悪い点としては、

絵柄が49個しかない

絵柄を見ながら選択できない

というところでしょうか。

対応策を考えてみましょう。

絵柄が49個しかない

compose 公式のアイコン群(2500個以上)を追加できます。


implementation "androidx.compose.material:material-icons-extended:x.y.z"

エディタのサジェスチョンも大量に増えます。

ただ、少し読み込みが遅い。

そこらへんは、公式に注意点があります。

警告: material-icons-extended は大規模なライブラリであり、APK のサイズに影響する可能性があります。そのため、製品版ビルドでは R8/Proguard を使用し、使用されていないリソースを取り除くことを検討してください。また、サイズが大きいために、開発中は、プロジェクトのビルド時間と Android Studio のプレビューの読み込み時間が増加する可能性があります。

👉 Compose のリソース | Jetpack Compose | Android Developers

サイズにも注意する必要があるようです。

絵柄を見ながら選択できない

これがすごく困ります。

別で、WEB画面を開くか、Android Studio の Vector Asset Tool を開くかして、絵柄を見て選択して、その名前から、サジェスチョンさせる、くらいしか方法がない。なんかいい方法あったら教えなさいよ。

👉 Material Symbols and Icons - Google Fonts

将来的には、ライブプレビュー(今現在はリテラルのみ)ですばやく見れるようになるのかもしれません。

Android Studio Electric Eel 以降では、ライブ編集を使用して Compose の開発を高速化できます。ライブ編集は、リテラルのライブ編集をより強力にしたものです。この機能では、プレビューを自動的に更新し、コードの変更をエミュレータまたはデバイスにデプロイすることで、コンポーザブルの更新の影響をリアルタイムで確認できます。

👉 Compose のツール | Jetpack Compose | Android Developers

まとめ

将来性を見越して、ImageVector を使って


@Composable
fun LikeButton() {
  Button(onClick = {}) {
    Icon(
      imageVector = Icons.Filled.ThumbUp,
      contentDescription = null
    )
    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
    Text("Like")
  }
}

と書きたいです!

ちなみに、これまでのようにベクター drawable を作成して、id で使う記述もできます。


Icon(
  painter = painterResource(id = R.drawable.ic_baseline_favorite_24),
  contentDescription = null
)

しかし、変更時に drawable 消し忘れでゴミが溜まりそう。

あと、

Icons.Default は Icons.Filled のエイリアス

だそうです。

👉 Android Jetpack Compose Icons doesn't contain some of the material icons - Stack Overflow

👉 【Jetpack Compose】Compose Settings で数分で設定画面を作る