Quale vista deve essere utilizzata per il nuovo materiale Navigazione inferiore del design?

Question

Sono sicuro che avete sentito parlare dell'aggiunta di bottom navigation alle linee guida sulla progettazione dei materiali. Sto pensando di aggiungerlo alla mia app. Tuttavia, non sono sicuro di quale sia il modo migliore per affrontarlo. Che tipo di visione sarebbe meglio mostrare la barra in basso?

Answer 1

BottomNavigationView è un componente aggiunto in Google libreria di supporto 25. Fornisce una navigazione rapida tra le visualizzazioni di livello superiore all'interno di un'app. Dovrebbe essere usato quando l'applicazione ha da tre a cinque destinazioni di livello superiore. La mia implementazione include il passaggio da Fragment a Selezione delle voci di menu.

aggiungere al build.gradle del modulo progetto

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

Creare il BottomNavigationView in xml del layout e fornire una risorsa di menu ad esso:

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

Creare un file qui di navigazione. xml nella cartella delle risorse del menu. Questo file è usato per fornire i MenuItems in 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> 

Con tutto in linea questo molto codice mostra il BottomBar a correre l'applicazione. Ora consente di impostare il listener per gli eventi Click OnNavigationItemSelectedListener e OnNavigationItemReselectedListener su voci di menu -

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

Se il no delle voci di menu sono più di 3, allora l'elemento selezionato avrà più spazio nella BottomNavView e sembra un po 'strano a partire da ora, potrebbe essere intenzionalmente Google ha mantenuto così.

Questo comportamento è definito dalla proprietà di ShiftingMode BottomNavigationView, che non può essere disabilitato in modo semplice fin d'ora, come api non è pubblico. Ma c'è un modo attraverso la riflessione di farlo:

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

Dopo aver chiamato sopra risultato codice è:

Per ulteriori informazioni checkout mio progetto Github: https://github.com/pmahsky/BottomNavigationViewDemo

Answer 2

A LinearLayout con pesi uguali per le sue viste, orientamento orizzontale. Pulsanti in LinearLayout con drawableTop impostato sull'icona di scelta.

aggiungerlo alla parte inferiore:

In un FrameLayout o CoordinatorLayout è possibile aggiungere al fondo con layout_gravity="bottom" o in un RelativeLayout utilizzare android:layout_alignParentBottom="true"

dimensioni, font size, ecc:

Si prega di fare riferimento al material design bottom navigation specs su di esso per i margini e le dimensioni del carattere, ecc:

Altezza: 56dp

Icon: 24 x 24dp

Content allineamento:
testo e l'icona sono centrate orizzontalmente all'interno vista.

Imbottitura:

• 6DP sopra l'icona (vista attiva), 8DP sopra l'icona (vista inattiva)
• 10dp sotto il testo
• 12DP a sinistra ea destra del testo

etichetta di testo :

• Roboto Reg olare 14sp (vista attiva)

• Roboto 12sp regolare (vista inattiva)

Nascondi sul rotolo

Utilizzare un CoordinatorLayout dalla libreria di supporto di progettazione Android. Aggiungi questo LinearLayout come figlio nell'xml e imposta un Behavior da nascondere sullo scroll.

---

Aggiornamento

V'è ora una libreria open source disponibili, che è costruito per spec: https://github.com/roughike/BottomBar

Update 2

Ora è part of the support lib.

Answer 3

Poiché la libreria di supporto di Android 25 ha un BottomNavigationView nativo che è lo stesso menzionato nelle linee guida sulla progettazione dei materiali.
Per cominciare abbiamo bisogno di aggiornare la nostra dipendenza:

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

Poi abbiamo semplicemente bisogno di aggiungere il fondo di navigazione Vista widget per il nostro file di layout desiderato. Ricorda che questo deve essere allineato alla parte inferiore dello schermo con tutto il contenuto visualizzato sopra di esso. Possiamo aggiungere questo punto di vista in questo modo:

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

Per un articolo più dettagliato si prega di visitare questo:https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.bgoj4br93