$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GoogleI/O2022 LT報告会資料
Search
shinsuke-fujita
June 23, 2022
Programming
0
1.5k
GoogleI/O2022 LT報告会資料
Jetpack Composeのワークショップを実装してまとめました。
shinsuke-fujita
June 23, 2022
Tweet
Share
More Decks by shinsuke-fujita
See All by shinsuke-fujita
GoogleI/O2024 LT報告会資料
shinsukefujita1126
1
440
GoogleI/O2023 LT報告会資料
shinsukefujita1126
0
810
KMMで始めるマルチプラットフォーム開発
shinsukefujita1126
0
230
AndroidDevSummit2022
shinsukefujita1126
0
1.2k
Other Decks in Programming
See All in Programming
layerx_20241129.pdf
kyoheig3
2
250
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
230
Full stack testing :: basic to basic
up1
1
870
Gestaltung digitaler Lösungen – Produktions- oder Designprozess?
techstories
0
120
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
390
かんたんデザイン編集やってみた~「完全に理解した」までの道のり~
morit4ryo
1
110
Cursorでアプリケーションの追加開発や保守をどこまでできるか試したら得るものが多かった話
drumnistnakano
0
270
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
0
440
PipeCDの歩き方
kuro_kurorrr
4
140
CSC509 Lecture 13
javiergs
PRO
0
150
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
110
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
1
3.9k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Code Reviewing Like a Champion
maltzj
520
39k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Practical Orchestrator
shlominoach
186
10k
Typedesign – Prime Four
hannesfritz
40
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Transcript
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