Google I/O 2022 Basic layouts in Compose 藤田 真輔(Compose初心者 ) 

はじめに・・・ • これはGoogleI/O 2022のセッションの1つである「Basic layouts in Compose」のワークショップ(参考リンク)を実際に実 装して内容をまとめたLTです • 自分はComposeを使ったり学習したことが無かったので非常 に有益でしたが、すでにバリバリ使ってる人は当たり前レベル の内容かも知れません。その辺り優しい心で聞いていただけ ると嬉しいです 

1.そもそもComposeとは • 以前から界隈では「Jetpack Compose」なるワードをよく見ていました(ち なみに発表はGoogleI/O2019のkeynote。だいぶ乗り遅れてる感。。。) • 前職の現場ではまだあまりJetpackライブラリの導入があまり進んでいな くて、業務上必要性があまり無かったので、ちゃんと調べていないのが今 年の3月までの自分でした • Composeとは・・・ネイティブ UI をビルドするための Android の最新 ツールキットです。Android の UI 開発を簡素化し、加速します。少ない コード、パワフルなツール、直感的な Kotlin API を使用してアプリをすぐ に動かすことができます。 とのことです。（公式から引用） 

1.そもそもComposeとは 「なるほど！なんかUI作るのが今風のイケてるやり方になるのか！」 「ただ実際のところ、どのくらいイケてるのかなー？」 こんな感じで今までずっと触れてきませんでしたが、実際に今回ワークショップやってみ ると・・・ 

1.そもそもComposeとは めっちゃイケてるやん！ (レイアウトxmlいらないの？) (一覧表示する際のAdapter書かなくていいの？) (shapeとかもわざわざxml用意しなくていいの？) 

2.ワークショップでやったこと • 左図のようなデザインの実装を実際に進めて基 本的なComposableを学習していく形でした。 • もちろん作り方はいろいろあると思いますが、ま ずは提示されてるコードでやってみて、これはど う実現するのか？と思ったことは、追加で調べ たりして進めました • 今回このデザインの実装例として挙げられてる のは次のページのような大枠でした 

2.ワークショップでやったこと Scaffold(bottomBar={ BottomNavigation() }) | HomeScreen(Column) | HomeSection(SearchBar部分) ー TextField HomeSection(Align Your Body部分) ー AlignYourBodyRow(LazyRow { AlignYourBodyElement }) HomeSection(Favorite Collections部分) ーFavoriteCollectionsGrid(LazyHorizontalGrid { FavoriteCollectionCard }) 

3.SearchBarセクションのデザイン • SearchBarはTextFieldというComposableを使 えば簡単に実装できました • プレースホルダー(placeholder)や左アイコン (leadingIcon)、右アイコン(trailingIcon)もパラ メータで指定するだけ(iOSの制約っぽいですね) • 今回は実装してませんが、onValueChangeで入 力時の挙動も指定出来ます • maxLinesやshapeあたりも指定出来るので様々 なデザインにも簡単に対応できそう 

4.AlignYourBodyセクションのデザイン • 横スクロール可能な全体を AlignYourBodyRow、1つ1つの要素を AlignYourBodyElementとして実装しまし た • 最初にElementを作ってからRowを作り ます AlignYourBodyRow AlignYourBodyElement 

4.AlignYourBodyセクションのデザイン • 画像と文字列を表示するComposableはImageとText • Composable同士を縦や横に並べるComposableとし てRow/Columnがある（LinearLayoutみたいなもの？） • 今回は縦に並べたいのでColumnでImageとTextを順 に実装した+horizontalAlignmentで子要素を整列 • Imageを円形にするのは、modifierにodifier.clipを指 定する • shapeは定義済みのもあれば、cornerやsizeを細かく カスタマイズも出来る • ImageのscaleはcontentScaleを指定する (Crop/Fit/FillHeight/FillWidth/FillBoundsなど) AlignYourBodyElement 

4.AlignYourBodyセクションのデザイン • スクロール可能なComposableとしてLazyRow/LazyColumnがある • ViewUI時代のRecyclerViewで必須だったadapterを書く必要は無し！ • LazyRow/LazyColumn内にてitems/itemでListデータや任意のコン ポーネントを配置できる • Arrangementで子要素の配置を指定する （SpaceBetween/Center/EqualWeightなど。今回は Arrangement.spacedBy(dp)で子要素間のスペース指定のみ） • ちなみにページングを実現するにはPagingライブラリを使用するのがい いらしい。なおComposeのサポートはPaging3.0以降 （何だかんだ調べつつ1時間くらいで実装できました） AlignYourBodyRow 

5.FavoriteCollectionsセクションのデザイン • AlignYourBodyと似ているが、こちらは2 行でスクロール可能とする LazyRow/LazyColumn内にColumnを使 い、複数のFavoriteCollectionCardを配 置すれば実現は可能 • ただ、より適切な実装としては LazyVerticalGrid/LazyHorizontalGrid を使うのがいいらしい FavoriteCollectionsGrid FavoriteCollectionCard 

5.FavoriteCollectionsセクションのデザイン • Rowを使ってImageとTextを配置するのは以前と同じ • このデザインは色指定がないため、色はアプリテーマによって定義される とみなす • そういうニーズの場合はSurfaceというComposableを利用する • SurfaceにはcontentColorを決める役割がある(TextやIconの defaultColorとして使用される) • 他のSurfaceの役割としては以下があるようです(公式より引用) Clipping・・・shapeを指定して形状指定(borderも同時に指定可能) Evelation・・・深さを表す影を指定 Background・・・shapeなどの背景を塗り潰す Blocking touch propagation behind the surface(裏側のタッチの伝搬を ブロック) FavoriteCollectionCard 

5.FavoriteCollectionsセクションのデザイン • LazyVerticalGrid/LazyHorizontalGrid でcolumns/rowsでGridの列数や行数を 指定してあげる • Grid内のコンポーネント間のpaddingは verticalArrangement/horizontalArran gementで指定する • items/itemでListデータや任意のコン ポーネントを配置するのは LazyRow/LazyColumnと同じ FavoriteCollectionsGrid 

7.BottomNavigation • BottomNavigationを実装するには BottomNavigation内にBottomNavigationItem を必要な数だけ配置します • BottomNavigationItemでは onClick/icon/labelをそれぞれ指定出来る （iconやlabelはラムダでcomposableを指定出 来るので自由度高そう） 

8.仕上げ(1) • ここまでに作成した3つのセクションの配置には Columnで縦に並べる • ただし、自動的にスクロールの動作を提供する LazyXXXをは常に必要とは限らない（リストの要素が 多い場合やデバイスサイズによる） • 全てのアイテムを送信するとアプリのパフォーマンス が低下する • リストの要素が限られている場合はRowやColumnを 用いてスクロール動作を手動で追加することも可能 • Modifier.verticalScroll/horizontalScrollで Row/Columnにスクロール動作を付与出来る 

8.仕上げ(2) • BottomNavigationを含む画面全体を実装する のはScaffoldコンポーザブルを利用します • ScaffoldはMaterialデザインに必要なトップレベ ルの構成可能なComposableを指定できる • topBar/bottomBar/drawerContent/floating ActionButton/などなど • Scaffoldの • contentのComposableにメインとなるものを配 置し、bottomBarにBottomNavigationの Composableを配置すれば今回実装したいデザ インとなる 

8.仕上げ(3) • 各セクションには「タイトル」「コンテンツ」がある ので、スロットベースレイアウトという考え方でUI 部品の組み合わせ方を共通化してみる slot slot HomeSection HomeSection @Composable fun HomeSection( modifier: Modifier = Modifier, @StringRes strId: Int, content: @Composable () -> Unit ) { ・・・ } Column(modifier = modifier.verticalScroll(state = rememberScrollState())) { Spacer(modifier = Modifier.padding(16.dp)) HomeSection(strId = R.string.search_bar_title) { SearchBar() } HomeSection(strId = R.string.align_your_body) { AlignYourBodyRow() } HomeSection(strId = R.string.favorite_collections) { FavoriteCollectionsGrid() } Spacer(modifier = Modifier.padding(16.dp)) } slot 

9.最後に • Viewレイアウトに慣れ親しんだ自分からすると、Composeレイアウトは 色々な驚きがありました(まさにUI開発を簡素化し加速するなぁと。) • 特に一覧表示でadapterが不要なことや、無駄にリソースファイルを増や さずデザイン組んだりshape/borderなどを指定出来たりするのが Good！ • 今後も引き続きcodelabsなどで学習を続けて、さらに色々な事を吸収し ていきたいと強く思いました 

参考リンク • 動画 https://io.google/2022/program/05c2523e-be40-4c63-8308-5379b9717a7c/intl/ja/ • Codelabs https://developer.android.com/codelabs/jetpack-compose-layouts#0 • Compose https://developer.android.com/jetpack/compose?hl=ja • Surface https://developer.android.com/reference/kotlin/androidx/compose/material/package- summary#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose. ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundat • Slot based layout https://developer.android.com/jetpack/compose/layouts/basics#slot-based-layouts • Pagingライブラリについて https://developer.android.com/topic/libraries/architecture/paging/v3- overview?hl=ja