Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

gyamoto
October 27, 2022

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

gyamoto

October 27, 2022
Tweet

More Decks by gyamoto

Other Decks in Technology

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 だと手間 かかるブラーが1行で実装できる
    ● 内部で RenderEffect を使用しているため Android12 以降 み
    31
    Blur
    Modifier.blur(radius = 8.dp)

    View Slide

  32. Mobility Technologies Co., Ltd.
    Blur 好きなポイント
    ● 個人的に今まで用意が面倒だったブラーが1行で実装できる!!
    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