BottomNavigationを使ってみる

BottomNavigationとは

MaterialDesignのサイトによるとBottomNavigationは以下のような時に使用するように書かれています。

Bottom navigation should be used for:

・Three to five top-level destinations of similar importance (alternative: a persistent navigation drawer accessible from anywhere in the app) ・Destinations requiring direct access from anywhere in the app (alternative: tabs for only one or two destinations)

最近のアップデートでYouTubeアプリがNavigationDrawer＋tabからBottomNavigationに変更されています。
では、具体的な実装についてみていきましょう。

BottomNavigationを使ったActivityを追加する

導入

BottomNavigationを使ったActivityを追加するのは非常に簡単です。AndroidStudioのActivityのテンプレートにあるため、そのまま使用します。

Navigationを設定する

BottomNavigationのアイテムの設定はxmlによって行います。 xmlで定義されたMenuをレイアウトに設定します。

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home"/>

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard"/>

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications"/>

</menu>

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

Navigation選択イベントのハンドリング

BottomNavigationViewにて選択イベントをハンドリングするには、OnNavigationItemSelectedListenerをセットする必要があります。OnNavigationItemSelectedListener#onNavigationItemSelected()にて、trueを返すと、Navigationが選択状態になります。

注意点としては、すでに選択状態のItemを選択したときonNavigationItemSelectedが呼ばれます。
再選択かどうかを知りたい場合は、setOnNavigationItemReselectedListener()にてOnNavigationItemReselectedListenerをセットしましょう。

これにより、onNavigationItemSelectedは最初の選択時にのみ呼ばれます。

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    mTextMessage.setText(R.string.title_home);
                    return true;
                case R.id.navigation_dashboard:
                    mTextMessage.setText(R.string.title_dashboard);
                    return true;
                case R.id.navigation_notifications:
                    mTextMessage.setText(R.string.title_notifications);
                    return true;
            }
            return false;
        }

    };
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextMessage = (TextView) findViewById(R.id.message);
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }

Activity再生成時の状態について

画面の回転などにより、Activityが再生成された場合BottomNavigationView選択状態は保持されていますがonCreateが呼ばれたタイミングでは、先頭のアイテムが選択された状態であると返してきます。onRestoreInstanceState以降に選択アイテムを取得すれば本当に選択されているItemのIDを返してくれます。

参考

https://material.io/guidelines/components/bottom-navigation.html https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html