LoginSignup
51
47

More than 5 years have passed since last update.

BottomNavigationViewを使ってみる

Last updated at Posted at 2016-10-20

BottomNavigationViewとは?

これではないです
https://github.com/armcha/LuseenBottomNavigation

Support Library 25.0.0で追加された、android.support.design.widget.BottomNavigationViewです。
https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html

Material Designにも追加された、Bottom navigationを簡単に実装できるようになっています。
https://material.google.com/components/bottom-navigation.html

導入

build.gradleにデザインのサポートライブラリを入れます。

build.gradle
dependencies {
    // ...
    compile 'com.android.support:design:25.0.0'
}

前述の通り、25.0.0以降が必要なので、もろもろ25に上げる必要があります。

実装

ドキュメントにあるやつが、どういう場所に置くことを想定しているのかイマイチ分からなかったので、以下のような感じにしました。

追記:ドキュメントが間違っているようで、以下のように、
xmlns:app="http://schemas.android.com/apk/res-auto"app:menu="@menu/my_navigation_items"を設定する必要があります)
(STAR_ZEROさんありがとうございます! :bow:
http://qiita.com/STAR_ZERO/items/e99cd2fa423d54447220

activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...>

    ...

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/my_navigation_items" />

    ...

</FrameLayout>

BottomNavigationViewもmenuを使うようなので、以下のようなファイルも用意しました。

my_navigation_items.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/add"
        android:icon="@android:drawable/ic_menu_add"
        android:title="add" />
    <item
        android:id="@+id/delete"
        android:icon="@android:drawable/ic_menu_delete"
        android:title="delete" />
    <item
        android:id="@+id/call"
        android:icon="@android:drawable/ic_menu_call"
        android:title="call" />
</menu>

ところがこれだけだとなぜか表示されない :sob:

何がいけないのか良く分からなかったので、javaの方で改めてinflateしたら表示されました。 
追記:上に書いたようにすれば、javaの方では何もしなくても正しく表示されます)

リスナーも以下のような感じで実装できるので、一通りできそうです。

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        // ...
        return true;
    }
});

結果

3つの場合

3.gif

4つの場合

4.gif

カレント以外の文字が表示されないっぽいです。横方向の動きが激しい。

5つの場合

5.gif

こちらもカレント以外の文字が表示されないっぽいです。横方向の動きは抑えめ。

注意

Material Designによれば、アイコンの個数は3から5個が良いとのことですが、1個や2個しかなくても動きます。
ただ、6個以上にすると、以下のメッセージとともにクラッシュしました。

java.lang.IllegalArgumentException:
    Maximum number of items supported by BottomNavigationView is 5.
    Limit can be checked with BottomNavigationView#getMaxItemCount()

おわりに

Material Designのガイドラインや、すでにGoogle+やフォトで実装されているものと、見た目が何か違う気もしますが、とりあえず動作はしました。
まだ情報が少ないので、間違っていたらすみません :bow:
情報をいただけると嬉しいです :raised_hands:

51
47
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
51
47