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

意外と簡単?Navigation rail導入のお話

Tomoya Miwa
November 16, 2021

意外と簡単?Navigation rail導入のお話

Tomoya Miwa

November 16, 2021
Tweet

More Decks by Tomoya Miwa

Other Decks in Technology

Transcript

  1. 6

  2. Usage The rail is a side navigation component that displays

    three to seven app destinations and, optionally, a Floating Action Button. Each destination is represented by an icon and a text label. The rail can function on its own at larger screen sizes, such as desktop and tablet. When users transition between screen sizes and devices, the rail can also complement other navigation components, such as bottom navigation. https://material.io/components/navigation-rail#usage 7
  3. When to use Navigation rails should be used for: Top-level

    destinations that need to be accessible anywhere in an app Three to seven main destinations in a product Tablet or desktop layouts Navigation rails shouldn’t be used for: Small screen sizes Single tasks, such as viewing a single email Secondary navigation destinations https://material.io/components/navigation-rail#usage 8
  4. 簡単に導入できる前提条件 (1/2) Material Components for Android の BottomNavigationView を導入済み BottomNavigationViewを表示しているActivityでは、configuration

    changeを自前でハ ンドリング していない AndroidMafinext.xml で、該当Activityに android:configChanges という 記 載が無い 13
  5. 1. 使用するMaterial Components for Androidのバージョンを1.4.0以 上にする NavigationRailView は 1.4.0 から使用できるため

    app moduleのbuild.gradleなどを更新 implementation "com.google.android.material:material:1.4.0" 17
  6. 3. Activity側ではNavigationBarViewとしてキャストして使用する before binding.navView.setOnItemSelectedListener { ... } after // binding

    上はView になってしまうので、キャストしている val navView = binding.navView as NavigationBarView navView.setOnItemSelectedListener { ... } 23
  7. なぜ、選択済みアイテムが引き継がれているのか? なぜ、画面回転しても選択済みアイテムの状態が復元されているのか? BottomNavigationView と NavigationRailView は個別に onSaveInstanceState/onRestoreInstanceState を実装 していない 共通の親である

    NavigationBarView で状態の保存と復元をおこなっている NavigationBarView#onSaveInstanceState NavigationBarView#onRestoreInstanceState なので、レイアウトファイル上で同じView IDだと自動で保存と復元ができる ただし、将来的に個別に保存と復元処理が実装されると、壊れる危険性あり 30
  8. U-NEXTアプリに追加で手を加えたところ Windowの高さが低い場合、 Compact rail without text labels を参考に表示を微調整 ロゴ無し ラベル文字無し

    NavigationRailView の横幅を小さくして、各アイテムの高さを削減 コメント によると、 NavigationRailView の横幅 = 各アイテムの最小限の高さ val metrics = WindowMetricsCalculator.getOrCreate() .computeCurrentWindowMetrics(this) val heightDp = metrics.bounds.height() / resources.displayMetrics.density if (heightDp < 400) { navRail.removeHeaderView() navRail.labelVisibilityMode = NavigationRailView.LABEL_VISIBILITY_UNLABELED navRail.layoutParams.width = (56 * resources.displayMetrics.density).toInt() } 32
  9. まとめと感想 Bottom navigation導入済みであれば、Navigation railの導入は意外と簡単 View IDを共通にすると実装が楽だけど、今後壊れる可能性はあるので注意 個人的にスマホ横画面でのNavigation railは縦方向の表示領域が広がって嬉しい ただし、スマホ横画面でNavigation railに切り替わるアプリを見たことが無い

    例えば、 google/iosched では、 横幅720dp以上 で切り替えている ただ、時系列に 600dp以上で切り替えましょう が最新ガイドライン? 自分の場合、タブレットやスマホ横画面では両手で端末の両サイドを保持する ナビゲーションのUIが端末の横側に表示されるのは、操作しやすい気がする 36