Help us understand the problem. What is going on with this article?

BottomNavigationViewについてと要素を動的に減らしたり

  • この記事はAndroid 初心者向け Advent Calendar 2019 の6日目の内容です:snowman2:

はじめに

  • 意外とよく見る系画面の代表格、下に配置されるタブUIのBottomNavigationViewを取り上げて記事にしてみようと思います。

BottomNavigationViewって:thinking:

  • MaterialDesignComponents に含まれるUIコンポーネント
  • アプリの主要画面の切り替えを行えるようにするもの
    • 主要画面(メインとなるもの)でない画面を配置しては:x:
    • 何を配置すべきかという事を意識して使用するように:o:

  BottomNavigationについて

ね、このUIよくみませんか?:grinning:

BottomNavigationを使用したAndroidアプリをつくる

  • AndroidStudio に含まれる、ProjectTemplateを利用してサクッと:relaxed:
  • [File] -> [New] -> [New Project]を選択
  • ProjectTempleteでBottomNavigationActivityを選択

image01.png

生成されたプロジェクト一式をみると、大まかな実装が見えてくるのおすすめ:point_up:

MainActivity

  • メインという名の通り、元となるActivityクラス
  • この中でBottomNavigationViewを管理
    • 表示項目はmenu/bottom_nav_menuに記載
  • 画面遷移処理は、navigation/mobile_navigationで記載

HomeFragment / HomeViewModel

  • Homeタブ選択時に表示されるFragmentViewModel部分
  • タブに対応したFragmentという役割
  • Dashboard も Notification も同じ役割となる
  • menuのIDとnavigationのIDを同じものにすると連動してくれる:point_up:

device-2019-12-04-144954.png

要素を動的に減らしたり

  • アプリの状態で一部の主要機能を使用させたくないという場合の対応
  • :bangbang:注意:bangbang:
    • BottomNavigation は最小3個、最大5個の範囲内で使うのが推奨されています。
    • 今回の話では 3個 <-> 2個 に減らしているので、例としては良くなかったり:frowning2:

消し方&戻し方

  • BottomNavigationViewの表示項目はmenuが管理しているので、子要素を探す(findViewById())するのではなく、menuからfindItem()で取得したMenuitemに対して設定の変更を実施
MainActivity.kt
    private fun changeVisibleStatusTabId(id : Int , isVisible : Boolean){
        val navView: BottomNavigationView = findViewById(R.id.nav_view)
        navView.menu.findItem(id)?.also {
            it.isVisible = isVisible
        }
    }

さいごに

  • BottomNavigationViewはよくみかけるUIコンポーネントですが、推奨されたのは、Android OS 8(26.1)あたり
    • iOS ではTab Barsというコンポーネントで、初期からあった
    • 最近に使用できるようになったコンポーネントで、それまでは各アプリで実装していた代表格:sweat:
    • ただ、iOSのように画面の管理といった機能は無いので、そのあたりは自分で実装する必要がある:cry:
    • バッジの表示といった追加機能もあるがalphaバージョン or betaバージョンを使う必要があったり
    • ただ、自分で作るよりかははるかに楽だよねというコンポーネントでした:relaxed:

これからも楽しいアプリケーション開発を:dancers:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away