Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
430
GoogleI/O2023 LT報告会資料
shinsukefujita1126
0
800
KMMで始めるマルチプラットフォーム開発
shinsukefujita1126
0
230
AndroidDevSummit2022
shinsukefujita1126
0
1.2k
Other Decks in Programming
See All in Programming
Reckoner における Datadog Browser Test の活用事例 / Datadog Browser Test at Reckoner
nomadblacky
0
180
5分ぐらいで分かる、トリミング機能の作り方
tsutsuitakumi
0
170
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
8k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
270
新卒研修で作ったアプリのご紹介
mkryo
0
220
Vapor Revolution
kazupon
2
2.4k
as(型アサーション)を書く前にできること
marokanatani
10
3k
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
490
距離関数を極める! / SESSIONS 2024
gam0022
0
360
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1.1k
subpath importsで始めるモック生活
10tera
0
380
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Happy Clients
brianwarren
98
6.7k
Making Projects Easy
brettharned
115
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Facilitating Awesome Meetings
lara
50
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Side Projects
sachag
452
42k
Unsuck your backbone
ammeep
669
57k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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