[解決済み] アンドロイドの新しいボトムナビゲーションバー、BottomNavigationView

質問

新ガイドラインが出たのを見て google photos で使用しています。 新しいボトム ナビゲーション バーをどのように使用するのかがわからない。 新しいサポートライブラリに目を通しましたが、手がかりが見つかりませんでした。

公式のサンプルは見つかりません。

新しいボトムバーの使い方を教えてください。カスタマイズはしたくありません。

どのように解決するのですか？

これを探しているのではないでしょうか？

ここに始めるための簡単なスニペットがあります。

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Notice how you don't use the setContentView method here! Just
        // pass your layout to bottom bar, it will be taken care of.
        // Everything will be just like you're used to.
        mBottomBar = BottomBar.bind(this, R.layout.activity_main,
                savedInstanceState);

        mBottomBar.setItems(
                new BottomBarTab(R.drawable.ic_recents, "Recents"),
                new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
                new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
                new BottomBarTab(R.drawable.ic_friends, "Friends")
        );

        mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onItemSelected(final int position) {
                // the user selected a new tab
            }
        });
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mBottomBar.onSaveInstanceState(outState);
    }
}

参考リンクはこちらです。

https://github.com/roughike/BottomBar

EDITの新着情報です。

ボトム ナビゲーション ビューは、しばらくの間、マテリアル デザイン ガイドラインにありましたが、私たちのアプリに実装するのは簡単ではありませんでした。いくつかのアプリケーションは独自のソリューションを構築し、他のアプリケーションはサード パーティのオープン ソース ライブラリに依存してきました。デザイン サポート ライブラリにこの下部ナビゲーション バーが追加されたので、それをどのように使用できるかを見てみましょう。

どのように使用するのですか？

まず始めに、依存関係を更新する必要があります!

compile ‘com.android.support:design:25.0.0’

xmlをデザインする。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Content Container -->

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

<ブロッククオート

お客様のご要望に応じたメニューを作成します。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

<ブロッククオート

有効／無効の状態を扱う。セレクタファイルを作成する。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:state_checked="true"
      android:color="@color/colorPrimary" />
  <item
      android:state_checked="false"
      android:color="@color/grey" />
 </selector>

<ブロッククオート

クリックイベントを処理します。

BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);
        
bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:
                        
                        break;
                    case R.id.action_schedules:
                    
                        break;
                    case R.id.action_music:
                    
                        break;
                }
                return false;
            }
});

編集する Androidxを使用する場合、以下の依存関係を追加する必要があります。

implementation 'com.google.android.material:material:1.2.0-alpha01'

レイアウト

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto" 
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_gravity="bottom"
            app:menu="@menu/bottom_navigation_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</FrameLayout>

このメソッドとその動作についてもっと知りたい場合は をお読みください。

きっとあなたのお役に立ちます。