Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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.7k
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
660
GoogleI/O2023 LT報告会資料
shinsukefujita1126
0
940
KMMで始めるマルチプラットフォーム開発
shinsukefujita1126
0
290
AndroidDevSummit2022
shinsukefujita1126
0
1.4k
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
PicoRuby on Rails
makicamel
2
140
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
The Language of Interfaces
destraynor
158
25k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Site-Speed That Sticks
csswizardry
10
700
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Docker and Python
trallard
45
3.5k
Facilitating Awesome Meetings
lara
54
6.5k
Become a Pro
speakerdeck
PRO
29
5.4k
BBQ
matthewcrist
89
9.7k
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