新しいMaterial Design Bottom Navigationにはどのビューを使用する必要がありますか？

Question

材料設計のガイドラインにbottom navigationが追加されていると聞いたことがありますか？私はそれを私のアプリに追加するつもりです。しかし、私はそれに接近する最良の方法が何であるかはわかりません。ボトムバーを表示するにはどのようなビューが最適でしょうか？

Answer 1

BottomNavigationViewライブラリ25Googleサポートに添加される成分です。これは、アプリ内のトップレベルビュー間の迅速なナビゲーションを提供します。アプリケーションが3〜5つの最上位の宛先を持つ場合に使用する必要があります。私の実装では、メニュー項目の選択時のフラグメント間の切り替えが含まれています。

<android.support.design.widget.BottomNavigationView 
    android:id="@+id/navigation" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="0dp" 
    android:layout_marginStart="0dp" 
    android:background="?android:attr/windowBackground" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent"/> 

は、ここにファイルのナビゲーションを作成します。

は、レイアウトのXMLでBottomNavigationViewを作成し、メニューリソースを提供し、プロジェクトのモジュールのbuild.gradle

compile'com.android.support:design:25.3.1' 

に追加します。メニューリソースフォルダのxml。このファイルは、このくらいのコードは、アプリケーションを実行する上でBottomBarを示し行にすべてをBottomNavigationView

<?xml version="1.0" encoding="utf-8"?> 
<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" /> 

<item 
    android:id="@+id/navigation_settings" 
    android:icon="@drawable/ic_settings_black_24dp" 
    android:title="@string/title_settings" /> 

</menu> 

でのMenuItemを提供するために使用されます。メニュー項目のない3、選択した項目がBottomNavViewに多くのスペースを取るよりも、より多くのであり、それは少し奇妙に見える場合

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

    @Override 
    public boolean onNavigationItemSelected(@NonNull MenuItem item) { 

     switch (item.getItemId()) { 
      case R.id.navigation_home: 
       return true; 

      case R.id.navigation_dashboard: 
       return true; 

      case R.id.navigation_notifications: 
       return true; 

      case R.id.navigation_settings: 
       return true; 

     } 
     return true; 
    } 

}; 

private BottomNavigationView.OnNavigationItemReselectedListener mOnNavigationItemReselectedListener = new BottomNavigationView.OnNavigationItemReselectedListener() { 
    @Override 
    public void onNavigationItemReselected(@NonNull MenuItem item) { 

     switch (item.getItemId()) { 

      case R.id.navigation_home: 
       Log.d(TAG, "Navigation Reselected ==="); 
       break; 

      case R.id.navigation_dashboard: 
       Log.d(TAG, "Dashboard Reselected ==="); 
       break; 

      case R.id.navigation_notifications: 
       Log.d(TAG, "Notification Reselected ==="); 
       break; 

      case R.id.navigation_settings: 
       Log.d(TAG, "Settings Reselected ==="); 
       break; 
     } 

    } 
}; 

bottomNavigationView.setOnNavigationItemSelectedListener 
(mOnNavigationItemSelectedListener); 

bottomNavigationView.setOnNavigationItemReselectedListener 
(mOnNavigationItemReselectedListener); 

- 今、メニュー項目のOnNavigationItemSelectedListenerとOnNavigationItemReselectedListenerクリックイベントのリスナーを設定していないことができます今のところ、意図的にGoogleがこのように保っている可能性があります。

この動作は、そのAPIが公開されていないとして、今のように直接的な方法で無効にすることはできませんBottomNavigationView、のShiftingModeプロパティによって定義されます。

BottomNavigationMenuView menuView = (BottomNavigationMenuView) 
btmNavigationView.getChildAt(0); 

try { 

     Field shiftingMode = menuView.getClass() 
     .getDeclaredField("mShiftingMode"); 

     shiftingMode.setAccessible(true); 
     shiftingMode.setBoolean(menuView, false); 
     shiftingMode.setAccessible(false); 

     for (int i = 0; i < menuView.getChildCount(); i++) { 

     BottomNavigationItemView item = 
     (BottomNavigationItemView) menuView.getChildAt(i); 
     item.setShiftingMode(false); 
     //To update view, set the checked value again 
     item.setChecked(item.getItemData().isChecked()); 
     } 


    } catch (NoSuchFieldException e) { 
     e.printStackTrace(); 

    } catch (IllegalAccessException e) { 
     e.printStackTrace(); 

    } catch (SecurityException e) { 
     e.printStackTrace(); 
    } 

コード結果の上に呼び出した後である：より多くの情報のチェックアウトについては

私のGitHubのプロジェクト：しかし、それを行うための反射によって方法はあり https://github.com/pmahsky/BottomNavigationViewDemo

Answer 2

LinearLayoutビューの水平方向の重みは同じです。 DrawableTopを選択アイコンに設定した状態で、LinearLayoutのボタンをクリックします。

は一番下に追加します：

：あなたは layout_gravity="bottom"と下にそれを追加したり、RelativeLayoutに android:layout_alignParentBottom="true"

寸法、フォントサイズなどを使用することができますでframeLayoutまたはCoordinatorLayoutで

を

余白やフォントサイズなどについては、material design bottom navigation specsを参照してください。

高さ：56dp

アイコン：24 X 24dp

コンテンツアラインメント：
テキストおよびアイコンが水平 ビュー内に集中しています。

パディング：テキストの下のアイコン（アクティブビュー）上記

• 6DP、アイコンの上8DP（非アクティブビュー）
• 10dp
• 12dpは、テキストラベルを左とテキストの右側

：

• Roboto Regウラル14sp（アクティブビュー）

• Roboto正規12SP（非アクティブビュー）

スクロールに隠す

アンドロイド設計サポートライブラリからCoordinatorLayoutを使用してください。このLinearLayoutをxmlの子として追加し、Behaviorをスクロールしないように設定します。

---

更新

それは仕様に構築されている利用可能なオープンソースのライブラリが用意されました： https://github.com/roughike/BottomBar

アップデート2

今はpart of the support libです。

Answer 3

アンドロイドサポートライブラリ25にはネイティブのBottomNavigationViewがあります。これはマテリアルデザインのガイドラインで説明したものと同じです。
私達は私達の依存を更新する必要がまず第一に：

compile 'com.android.support:design:25.0.0' 

次は、我々は単に私たちの希望レイアウトファイルに下部のナビゲーションビューのウィジェットを追加する必要があります。これは、すべてのコンテンツが上に表示された状態で画面の下部に揃えられることを覚えておいてください。私たちは、そのように、このビューを追加することができます。より詳細な記事については

<?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"> 

    <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> 

はこれを参照してください：https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.bgoj4br93