Który widok powinien być użyty w nowej Material Design Bottom Navigation?

Question

Jestem pewna, że ​​słyszeliście o dodaniu bottom navigation do wytycznych dotyczących projektowania materiałów. Planuję dodać go do mojej aplikacji. Jednak nie jestem pewien, jaki jest najlepszy sposób, aby do tego podejść. Jaki widok najlepiej byłoby pokazać dolny pasek?

Answer 1

BottomNavigationView to składnik dodawany w Google Wsparcie Biblioteka 25. Zapewnia szybką nawigację między widokami najwyższego poziomu w aplikacji. Powinno być używane, gdy aplikacja ma od trzech do pięciu miejsc docelowych najwyższego poziomu. Moja implementacja obejmuje przełączanie fragmentów po wybraniu pozycji menu.

Dodaj do build.gradle swojego modułu projektu

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

Tworzenie BottomNavigationView w XML z układu i zapewnienie zasobów Menu do niego:

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

Utwórz plik tutaj nawigacji. xml w folderze zasobów menu. Ten plik jest używany do dostarczania elementów menu w 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> 

ze wszystkim w tym wiele linii kodu pokazuje się na BottomBar na uruchomienie aplikacji. Teraz pozwala ustawić słuchacza do kliknięcia Zdarzenia OnNavigationItemSelectedListener i OnNavigationItemReselectedListener w menu pozycje -

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

Jeżeli żaden z elementów menu jest więcej niż 3 następnie wybrana pozycja zajmie więcej miejsca w BottomNavView i wygląda to trochę dziwne od tej pory może być celowo Google utrzymał to w ten sposób.

Takie zachowanie jest określona przez właściwości ShiftingMode z BottomNavigationView, których nie można wyłączyć w prosty sposób, jak na razie, jak jego api nie jest publiczna. Ale istnieje sposób, poprzez odbicie to zrobić:

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(); 
    } 

Po wywołaniu powyżej wyniku kodu jest:

Aby uzyskać więcej informacji kasie moja Github Projekt: https://github.com/pmahsky/BottomNavigationViewDemo

Answer 2

A LinearLayout z równymi wagami dla widoków, orientacja pozioma. Przyciski w LinearLayout z drawableTop ustawione na wybraną ikonę.

Dodaj go do dołu:

W FrameLayout lub CoordinatorLayout można dodać go do dołu z layout_gravity="bottom" lub w RelativeLayout używać android:layout_alignParentBottom="true"

wymiary, rozmiar czcionki itp:

Informacje na temat marginesów i rozmiarów czcionek itp. Można znaleźć w części: material design bottom navigation specs:

Wzrost: 56dp

Ikona: 24 x 24dp

wyrównanie Treść:
Tekst i ikona skupiają poziomo wewnątrz widzenia.

padding:

• 6dp nad ikoną (Widok aktywny), 8dp nad ikoną (nieaktywny widzenia)
• 10dp pod tekstem
• 12dp lewo i na prawo od tekstu

etykietę tekstową :

• Roboto Reg ular 14sp (Widok aktywny)

• Roboto Regularne 12sp (nieaktywny view)

Ukryj na zwoju

Użyj CoordinatorLayout z Android biblioteki wsparcia projektowania. Dodaj ten LinearLayout jako dziecko w pliku xml i ustaw Behavior, aby ukryć się podczas przewijania.

---

Aktualizacja

Istnieje obecnie dostępne biblioteki open source, który jest wbudowany do specyfikacji: https://github.com/roughike/BottomBar

Aktualizacja 2

Jest teraz part of the support lib.

Answer 3

Od biblioteki wsparcia Android 25 masz natywny widok BottomNavigationView, który jest taki sam, jak podano w wytycznych dotyczących projektowania materiałów.
Na początek musimy zaktualizować naszą dependancy:

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

Następnie wystarczy dodać dole Nawigacja Zobacz widżet do naszego żądanego pliku układu. Pamiętaj, że powinno to być wyrównane z dolną częścią ekranu, a cała zawartość jest wyświetlana nad nim. Możemy dodać ten pogląd tak:

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

Bardziej szczegółowy artykuł o tym:https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.bgoj4br93