Mobility Technologies Co., Ltd. Androidへ ｢愛｣を語る会 私 好きなModifier関数 2022.10.27 開発本部 ソフトウェア開発部 ユーザーシステムグループ / Kohei Yamamoto 株式会社 Mobility Technologies

Mobility Technologies Co., Ltd. 2 自己紹介 株式会社Mobility Technologies（MoT） ユーザーシステムグループ / 山本 晃平 新卒でAndroidエンジニアとして幾つかサービスをリリース。 継続的なサービス 成長に携わりたいと思い、2021年8月に Mobility Technologies に入社。 タクシーアプリ『GO』 Androidアプリを開発。 @farundorl @gyamoto

Mobility Technologies Co., Ltd. 「未来へ行くなら、アンドロイドを持て」と聞いて、 じめて スマホを持つ 3 Android 思い出

Mobility Technologies Co., Ltd. 仕事としてアプリ開発を じめて、求められる UI/UX 難しさを知る。 「UI 統一感を出すために角丸で揃えたい」 「アプリを全画面に表示したい」 「いい感じにローディングを表示したい」 「iPhoneみたいなブラー」 4 Android 思い出

Mobility Technologies Co., Ltd. 5 Agenda 01｜Shape 02｜Insets 03｜Placeholder 04｜Blur

Mobility Technologies Co., Ltd. ● Kotlin : 1.7.20 ● Jetpack Compose : 1.2.1 ● Accompanist : 0.25.1 ○ Insets ○ System UI Controller ○ Placeholder 6 動作環境

Mobility Technologies Co., Ltd. Shape 7 01

Mobility Technologies Co., Ltd. 「UI 統一感を出すために角丸で揃えたい」 ブランドとして 統一感を表現するために、何種類か View 形を揃える。 8 Shape

Mobility Technologies Co., Ltd. タクシーアプリ『GO』 場合 9 Shape FloatingActionButton ControlPanel TextField Button

Mobility Technologies Co., Ltd. Android View 実装方法 ● Material Design 2, 3 Theme に定義した Shape を設定 ● 角丸半径を設定できる CardView 使用 ● 角丸半径、背景色、枠線色をもつ ShapeDrawable を定義して背景に設定 ○ 例え 状態によって背景色が変わる場合、バリエーションごとに ShapeDrawable 定義が必要になる 10 Shape

Mobility Technologies Co., Ltd. Jetpack Compose 実装方法 ● Material Design 2, 3 Theme に定義した Shape を設定 ● 角丸半径を設定できる RoundedCornerShape を定義して Modifier に設定 11 Shape // 半径8dpの角丸かつ白背景にする Modifier.background( color = Color.White, shape = RoundedCornerShape(8.dp) )

Mobility Technologies Co., Ltd. Shape 好きなポイント ● よく長い XML になってしまう ShapeDrawable 定義が不要になる ● 状態によって背景色などが変わる場合も Shape み設定 ● Shape をもとに Compose 切り抜き、背景表示、影表示ができる 12 Shape Modifier.background( // 状態によって背景色のみ変わる color = statusColor, shape = RoundedCornerShape(8.dp) ) Modifier // Composeを丸形に切り抜き .clip(shape = CircleShape) // 丸側にあわせた影を表示 .shadow( elevation = 4.dp, shape = CircleShape )

Mobility Technologies Co., Ltd. タクシーアプリ『GO』 場合 13 Shape Box( modifier .graphicsLayer( // 吹き出し用のカスタムShapeを定義 shape = BalloonShape( cornerRadius = cornerRadius, triangle = BalloonShape.Triangle( size = triangleSize ), ), // 吹き出しの形にあわせて影をつける shadowElevation = elevation, clip = true ) .background(backgroundColor) ) { content() }

Mobility Technologies Co., Ltd. Insets 14 02

Mobility Technologies Co., Ltd. 「アプリを全画面に表示したい」 アプリを画面全体（Edge-to-edge）に表示する。 具体的に 、最上部に通知を表示する Status Bar と 最下部に操作UIを表示する Navigation Bar にアプリ コンテンツを描画する。 15 Insets Status Bar Navigation Bar

Mobility Technologies Co., Ltd. Android View 実装方法 1. Status Bar と Navigation Bar を表示領域とするために全画面表示フラグと透過を設定 2. 余白（fitsSystemWindows, padding, layout_margin）それぞれを適切に使用する 16 Insets

Mobility Technologies Co., Ltd. Jetpack Compose 実装方法 1. Status Bar と Navigation Bar を表示領域とするために全画面表示フラグと透過を設定 2. 余白（contentPadding, padding）それぞれを適切に使用する 17 Insets

Mobility Technologies Co., Ltd. Jetpack Compose 実装方法 1. Status Bar と Navigation Bar を表示領域とするために全画面表示フラグと透過を設定 ○ System UI Controller ライブラリで設定 ■ 試用ライブラリ群である Accompanist に含まれている 2. 余白（contentPadding, padding）それぞれを適切に使用する ○ Insets ライブラリで設定 ■ Accompanist から Jetpack Compose に移行 18 Insets

Mobility Technologies Co., Ltd. Jetpack Compose 実装方法 / 全画面表示と透明化 ● Modifier 使わずに、Activity と Composable でそれぞれ設定 19 Insets // Activityで全画面表示フラグを設定 WindowCompat.setDecorFitsSystemWindows(window, false) // @ComposableでStatusBar, NavigatonBarの透明化 val systemUiController = rememberSystemUiController() systemUiController.setSystemBarsColor( color = Color.Transparent, darkIcons = true // 背景色にあわせてアイコン色を設定 )

Mobility Technologies Co., Ltd. Jetpack Compose 実装方法 / 余白それぞれを適切に使用する ● Modifier として Status Bar, Navigation Bar 高さを設定 ● もしく Modifier を使わずに contentPadding を設定 20 Insets LazyColumn( contentPadding = WindowInsets.statusBars .add(WindowInsets.navigationBars) .asPaddingValues(), ) { ... } Box(modifier = Modifier.statusBarsPadding()) Box(modifier = Modifier.navigationBarsPadding())

Mobility Technologies Co., Ltd. Insets 好きなポイント ● とても複雑だった余白計算がシンプルになる ● Activity フラグ設定を除くと全画面表示 実装が Jetpack Compose で完結する 21 Insets

Mobility Technologies Co., Ltd. Placeholder 22 03

Mobility Technologies Co., Ltd. 「いい感じにローディングを表示したい」 プレースホルダーやスケルトンと呼 れる、表示コンテンツを予想させる 読込中アニメーションを表示する。 23 Placeholder

Mobility Technologies Co., Ltd. タクシーアプリ『GO』 場合 24 Placeholder タクシー会社や 待ち時間が表示される 運賃目安が表示される 支払方法が表示される

Mobility Technologies Co., Ltd. Android View 実装方法 1. アニメーション ライブラリを選定 2. アニメーション用レイアウト 用意 25 Placeholder

Mobility Technologies Co., Ltd. Jetpack Compose 実装方法 1. アニメーション ライブラリを選定 ○ Placeholderライブラリを使用 ■ Accompanistに含まれている 2. アニメーション用レイアウト 用意 ○ Modifier 設定でアニメーション表示 ○ 読込後 レイアウトを流用できる場合もある 26 Placeholder Modifier.placeholder( visible = true, color = Color.LightGray )

Mobility Technologies Co., Ltd. Placeholder 好きなポイント ● ライブラリ 選定に迷わず済みそう ● Modifier 設定で表示できる で、読込後 レイアウトを流用しやすい 27 Placeholder

Mobility Technologies Co., Ltd. Blur 28 04

Mobility Technologies Co., Ltd. 「iPhoneみたいなブラー」 背景等に表示するために、ぼかした画像を表示する。 29 Blur

Mobility Technologies Co., Ltd. Android View 実現方法 ● RenderScript を使用して Blur 画像を生成する ● RenderEffect を使用する ○ Android12 以降から使用可能 30 Blur

Mobility Technologies Co., Ltd. Jetpack Compose 実現方法 ● Android だと手間 かかるブラーが１行で実装できる ● 内部で RenderEffect を使用しているため Android12 以降 み 31 Blur Modifier.blur(radius = 8.dp)

Mobility Technologies Co., Ltd. Blur 好きなポイント ● 個人的に今まで用意が面倒だったブラーが１行で実装できる！！ 32 Blur

Mobility Technologies Co., Ltd. 時間が余ったとき 会社紹介 37 Appendix

Mobility Technologies Co., Ltd. 事業展開 38

Mobility Technologies Co., Ltd. 40 タクシーアプリ『GO』 開発を一緒にしませんか https://hrmos.co/pages/mo- t/jobs/2100002

Mobility Technologies Co., Ltd. メンバー・職種を深く知る機会 41

Mobility Technologies Co., Ltd. オフィス紹介 42