私の好きなModifier関数 / My Favorite Modifier

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Mobility Technologies Co., Ltd.
   Shape
   7
   01
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 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)
    )
    

    View Slide

12. 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
    )
    

    View Slide

13. 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() }
    

    View Slide

14. Mobility Technologies Co., Ltd.
    Insets
    14
    02
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. 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 // 背景色にあわせてアイコン色を設定
    )
    

    View Slide

20. 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())
    

    View Slide

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

    View Slide

22. Mobility Technologies Co., Ltd.
    Placeholder
    22
    03
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. Mobility Technologies Co., Ltd.
    Blur
    28
    04
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide