Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GoogleI/O2022 LT報告会資料

GoogleI/O2022 LT報告会資料

Jetpack Composeのワークショップを実装してまとめました。

2bd3b8c3550384ab61d671b673c119bb?s=128

shinsuke-fujita

June 23, 2022
Tweet

Other Decks in Programming

Transcript

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

  2. はじめに・・・ • これはGoogleI/O 2022のセッションの1つである「Basic layouts in Compose」のワークショップ(参考リンク)を実際に実 装して内容をまとめたLTです • 自分はComposeを使ったり学習したことが無かったので非常

    に有益でしたが、すでにバリバリ使ってる人は当たり前レベル の内容かも知れません。その辺り優しい心で聞いていただけ ると嬉しいです
  3. 1.そもそもComposeとは • 以前から界隈では「Jetpack Compose」なるワードをよく見ていました(ち なみに発表はGoogleI/O2019のkeynote。だいぶ乗り遅れてる感。。。) • 前職の現場ではまだあまりJetpackライブラリの導入があまり進んでいな くて、業務上必要性があまり無かったので、ちゃんと調べていないのが今 年の3月までの自分でした •

    Composeとは・・・ネイティブ UI をビルドするための Android の最新 ツールキットです。Android の UI 開発を簡素化し、加速します。少ない コード、パワフルなツール、直感的な Kotlin API を使用してアプリをすぐ に動かすことができます。 とのことです。(公式から引用)
  4. 1.そもそもComposeとは 「なるほど!なんかUI作るのが今風のイケてるやり方になるのか!」 「ただ実際のところ、どのくらいイケてるのかなー?」 こんな感じで今までずっと触れてきませんでしたが、実際に今回ワークショップやってみ ると・・・

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

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

    今回このデザインの実装例として挙げられてる のは次のページのような大枠でした
  7. 2.ワークショップでやったこと Scaffold(bottomBar={ BottomNavigation() }) | HomeScreen(Column) | HomeSection(SearchBar部分) ー TextField

    HomeSection(Align Your Body部分) ー AlignYourBodyRow(LazyRow { AlignYourBodyElement }) HomeSection(Favorite Collections部分) ーFavoriteCollectionsGrid(LazyHorizontalGrid { FavoriteCollectionCard })
  8. 3.SearchBarセクションのデザイン • SearchBarはTextFieldというComposableを使 えば簡単に実装できました • プレースホルダー(placeholder)や左アイコン (leadingIcon)、右アイコン(trailingIcon)もパラ メータで指定するだけ(iOSの制約っぽいですね) • 今回は実装してませんが、onValueChangeで入

    力時の挙動も指定出来ます • maxLinesやshapeあたりも指定出来るので様々 なデザインにも簡単に対応できそう
  9. 4.AlignYourBodyセクションのデザイン • 横スクロール可能な全体を AlignYourBodyRow、1つ1つの要素を AlignYourBodyElementとして実装しまし た • 最初にElementを作ってからRowを作り ます AlignYourBodyRow

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

    を使うのがいいらしい FavoriteCollectionsGrid FavoriteCollectionCard
  13. 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
  14. 5.FavoriteCollectionsセクションのデザイン • LazyVerticalGrid/LazyHorizontalGrid でcolumns/rowsでGridの列数や行数を 指定してあげる • Grid内のコンポーネント間のpaddingは verticalArrangement/horizontalArran gementで指定する •

    items/itemでListデータや任意のコン ポーネントを配置するのは LazyRow/LazyColumnと同じ FavoriteCollectionsGrid
  15. 7.BottomNavigation • BottomNavigationを実装するには BottomNavigation内にBottomNavigationItem を必要な数だけ配置します • BottomNavigationItemでは onClick/icon/labelをそれぞれ指定出来る (iconやlabelはラムダでcomposableを指定出 来るので自由度高そう)

  16. 8.仕上げ(1) • ここまでに作成した3つのセクションの配置には Columnで縦に並べる • ただし、自動的にスクロールの動作を提供する LazyXXXをは常に必要とは限らない(リストの要素が 多い場合やデバイスサイズによる) • 全てのアイテムを送信するとアプリのパフォーマンス

    が低下する • リストの要素が限られている場合はRowやColumnを 用いてスクロール動作を手動で追加することも可能 • Modifier.verticalScroll/horizontalScrollで Row/Columnにスクロール動作を付与出来る
  17. 8.仕上げ(2) • BottomNavigationを含む画面全体を実装する のはScaffoldコンポーザブルを利用します • ScaffoldはMaterialデザインに必要なトップレベ ルの構成可能なComposableを指定できる • topBar/bottomBar/drawerContent/floating ActionButton/などなど

    • Scaffoldの • contentのComposableにメインとなるものを配 置し、bottomBarにBottomNavigationの Composableを配置すれば今回実装したいデザ インとなる
  18. 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
  19. 9.最後に • Viewレイアウトに慣れ親しんだ自分からすると、Composeレイアウトは 色々な驚きがありました(まさにUI開発を簡素化し加速するなぁと。) • 特に一覧表示でadapterが不要なことや、無駄にリソースファイルを増や さずデザイン組んだりshape/borderなどを指定出来たりするのが Good! • 今後も引き続きcodelabsなどで学習を続けて、さらに色々な事を吸収し

    ていきたいと強く思いました
  20. 参考リンク • 動画 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