Google I/O 2022のセッションの中で、Jetpack Compose関連の内容を含むセッションをまとめていきます。視聴した分から随時更新中。
目次
Developer Keynote
Jetpack Compose for Ware OS
9:06頃。たくさんのAPIが追加されるよ、という簡単な紹介だけ。
Large screenの開発デモ
17:34頃。Electric Eel を使ったNow in AndroidアプリのLarge screenの開発デモ。Multi preview API、デバイスのスクリーンをAndroid Studioにミラーリングする機能、Compose 1.2 APIなどを紹介。
What’s new in Android
Compose 1.2 beta
2:10頃。1.2 betaがリリースされ、Live editやAnimation previewなどのツールとともに、Downloadable fonts, Nested scrolling interopなどのAPIが追加された。Composeに関連する他のセッションの紹介。
Accessibility
16:12頃。AccessibilityのセッションにもComposeの話題が出てくるとのこと。
What’s new Accesibility for developers
Layout Test Framework
1:14頃。Viewのレイアウトでは、アクセシビリティが悪いレイアウトに警告が出るようになっている。Composeは準備中とのこと。
onClickのミニマムサイズ
3:12頃。Material designコンポーネントはデフォルトでonClickのミニマムサイズが48x48dpに設定されている。ただし、コンポーネント同士が近すぎると働かないので、48dpの間隔は開けて配置する必要がある。
Content Description
5:53頃。ImageやIconなど、Content Descriptionを記述できる。
Semantics
6:31頃。Modifier.semantics()を使って、Layout TreeにSemanticsを設定する方法。
What’s new in Jetpack
3:43頃。NavigationがComposeに対応した件（ちょっとだけ）。
Compose概要
11:22頃。Composeの概要についておさらい。Top 1000 appのうち100以上がComposeを採用している。
Compose 1.2の新機能
12:40頃。What’s new in Androidでも紹介された新機能をちょっとだけ具体的に。Nested Scrolling Interop、Downloadable Fonts、Lazy Layoutsなど。
Android Basics with Compose
15:01頃。Get startedコースの紹介。
What’ new in Android development tools
Live Edit
20:58頃。従来の文字列や数値のリアルタイム変更の説明の後、よりダイナミックな変更も再コンパイルなしで反映できるLive Editについて。さらに、画面サイズが異なるエミュレータを切り替えながらLive Editでレイアウトを調整するデモ。
Compose Preview
25:07頃。Previewアノテーションを複数つけることで、いろいろな画面サイズや設定のプレビューを並べて表示できる。さらに、annotation classを使って、Previewアノテーションのセットをプロジェクト内で使いまわすこともできる。PreviewでもLive Editは使えるが、反映には少し時間がかかる。
ShaderやAnimation Previewのデモもあり。
Layout Inspector
29:40頃。Layout Inspectorでは、Recompositionの数とcompositionがスキップされた数を見ることができる。
Lazy layouts in Compose
LazyListState
3:10頃。LazyListStateを使ったスクロール位置の検出と制御の方法。トップへ戻るボタンを表示するかどうかの判定方法。不要な再婚ポジションを避けるため、derivedStateOfを推奨。
Lazy Grid
5:20頃。Compose 1.2でStableになった。Adaptive Sizingで画面サイズに応じて列数を設定する方法、等幅以外で列を分割する方法、行を占有するヘッダの作り方など。
LazyLayout
10:52頃。LazyLayout。Compose1.2で追加されたExperimental API。独自のLazyなレイアウトを作成できる。
Animation
11:44頃。リスト変更時のアニメーション。Compose1.1でLazyListのアイテムの移動のアニメーションに対応した。1.2ではLazyGridも対応。Modifier.animateItemPlacement()を使う。itemにはkeyを指定しておくこと。アイテム追加と削除のアニメーションは準備中。
Tips
13:14頃。サイズがゼロのアイテムを作るな。画像が読み込まれるまでサイズがゼロになっていたりしがちなので要注意。
同じ方向のLazyListをネストするな。
一つのitem { }には一つのエレメントにすべし。LazyListのコンポジションはitemごとに行われる。一つのitem { }にたくさんのエレメントを突っ込むと、その部分のコンポジション負荷が高くなる。
18:40頃。Custom Arrangementsのすすめ。画面を埋めるほどのアイテムが無い場合でもフッターを画面の下端に表示したい場合など。
Optimization
20:32頃。コンポジションの再利用の仕組みはRecyclerViewと同じ考え方。contentTypeを指定すると、同じcontentType同士で再利用する。
Prefetchingは、レンダリングが必要になるフレームの前のフレームでコンポジションを行うこと。GPUがレンダリングしている間のUIスレッドの空き時間を効率的に使える。
Performance best practices for Jetpack Compose
rememberを使おう
1:57頃。LazyListなどのComposable内で負荷が高い演算をすると、頻繁に再コンポジションされるたびに演算が発生する。rememberを使って、必要な時だけ演算するようにする。
keyを使おう
3:57頃。LazyListのアイテムが移動する場合は、keyを指定する。
derivedStateOfを使おう
4:45頃。監視対象の変数の値が頻繁に変化するが、変化のたびに再コンポジションする必要はなく、値がある条件を満たすときだけ再コンポジションしたい場合には、derivedStateOfが使える。
CompositionやLayoutのフェーズを飛ばそう
7:15頃。アニメーションで色だけを変えたい場合など、drawBehindを使うとCompositionとLayoutのフェーズを飛ばしてDrawフェーズだけの繰り返しで済む。
状態変更に注意
11:38頃。コンポジションが走った後で関連する状態を変更すると、それを検出して再度コンポジションが走る。ループの中で状態を変更すると無限ループに陥る。
Baseline profiles
15:27頃。Baseline profilesを使うとアプリ起動時のパフォーマンスが良くなる。
State in Jetpack Compose
CodeLabの内容に沿ってStateの使い方を説明。
7:06頃。MutableState登場。
8:49頃。remember登場。
11:34頃。if文を使ってStateの状態によってUIを切り替える例。
15:16頃。デバイスを回転させても値が維持されるように、rememberSaveableを使用。
16:40頃。State hoistingにより、StatefulなコンポーザブルをStatelessに変換してテストしやすくする。
27:41頃。rememberSaveableは、LazyListのアイテムごとの状態を覚えておくのにも使える。スクロールしてコンポーネントが再利用されても、rememberSaveableで記憶した状態はアイテムごとに保持される。
29:17頃。mutableStateListOf、またはtoMutableStateListを使って、Listの変化をコンポーズが監視できるようにする。これにより、Listのアイテムを削除することも簡単にできる。ちなみに、LazyListを動的に変更する場合、items()にkeyを指定すべき。
38:35頃。Listの状態をViewModelを使って保持する。ViewModelの外部からはImmutableに見えるようにするといい感じ。lifecycle-viewmodel-composeライブラリを使ってViewModelを取得するといい感じ。
Basic Layouts in Compose
サーチバー
3:23頃。TextFieldでサーチバーを作る。Heightを固定するのではなく、Minimum Heightを設定する。Leading Iconの設置。Material Designに含まれているアイコンは、Icons.Default.***で設置できる。Placeholderの設置。colorsの設定。TextFieldは状態によって色を変える必要があるが、TextFieldDefaults.textFieldColors()が使える。
画像とテキストを組み合わせる
11:43頃。丸い画像とセンタリングテキストを組み合わせた部品を作る。ColumnでImageとTextを縦に並べる。horizontalAlignmentで中央寄せにする。
ImageはCircleShapeでclipして画像を丸くする。contentScaleを設定して枠内いっぱいに画像が表示されるようにする。
Textにstyleを設定する。ベースライン位置はpaddingFromBaselineで設定する。
@DrawableResや@StringResアノテーションをつけると、引数をリソースで定義されたIntに限定できる。
画像とテキストの組み合わせ その2
21:25頃。背景をSurfaceで設定する。Surfaceの中にRowを作成し、ImageとTextを横に並べる。Surfaceのshape引数を使い、角を丸める。
たくさんのアイテムを横に並べる
31:00頃。LazyRowでアイテムを横に並べてスクロール可能にする。arrangementでアイテム間のスペースを調整する。先頭と末尾のアイテムのpaddingはcontentPaddingで設定する。普通のpaddingだとスクロールしてもパディングが残ってしまう。
37:36頃。LazyHorizontalGridを使う。GridCells.Fixed()で1列あたりのアイテム数を固定にする。
スクロール可能にする
52:30頃。LazyList以外をスクロール可能にするには、Modifier.verticalScrollを使う。ModifierのpaddingとcontentPaddingの違いはここでも同じ。