Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@sokume2106

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

More than 1 year has passed since last update.
  • この記事は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:

2
Help us understand the problem. What is going on with this article?
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
sokume2106
名古屋で Android や iOS のアプリ開発しています。どっちも好きですがドロイド君の方が好きかも。
stmn-co
名古屋のITスタートアップベンチャーです。「一人でも多くの人に、感動を届け、幸せを広める。」の経営理念のもと、 エンゲージメント経営コンサルティング「TUNAG」、オンラインファンサロンアプリ「FANTS」などのサービスを展開しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?