2016-01-13 16 views
10

Stiamo creando un'app per Android e c'è qualcosa che vogliamo aggiungere. Qual è l'effetto dell'applicazione Gmail.Cassetto di navigazione Android Studio come l'app Gmail

È possibile scegliere quale account si desidera visualizzare (e il resto dell'app si comporterà di conseguenza).

Example

EDIT:

ora già un (di lavoro) barra di navigazione, ma le cose che voglio sono le icone rotonde nell'intestazione. Voglio che qualcuno sia in grado di scegliere l'utente che stanno visualizzando.

+0

Controllare l'ultima modifica e non dimenticare di contrassegnarlo come accettato se è stato utile. ;) – Mauker

+0

Ehi, mi dispiace disturbare, ma come hai aggiunto il "1" a destra? – Omer

+0

@Omer È uno screenshot dall'app Gmail. – Tvde1

risposta

24

L'effetto desiderato può essere ottenuto utilizzando NavigationView dal lib di supporto com.android.support:design.

È possibile trovare un'esercitazione completa su quello here. E puoi scaricare il codice sorgente completo da quel tutorial here.

E here's another nice tutorial da seguire.

Ma per farla breve, quella vista è divisa tra due parti principali, un'intestazione e una parte di menu e ognuna di quelle che dovrai definire su XML.

A partire da tale tutorial:

Header Visualizza

Questo View è fondamentalmente la parte superiore del cassetto navigazione , che detiene l'immagine del profilo, il nome ed e-mail, ecc È necessario per definire questo in un file di layout separato, esamineremo quello in solo un momento.

Menu

Questo è il menu che si desidera visualizzare sotto l'intestazione, definiamo menù in una cartella menu, proprio come si definisce menu per il menu di overflow . Quindi, in pratica NavigationView è un contenitore per l'Header View e Menu che si intende utilizzare nel cassetto scorrevole. Quindi ora che hai capito NavigationView possiamo iniziare a costruire il nostro Cassetto di navigazione .

Con questo in mente, costruisci l'intestazione come faresti con qualsiasi altro layout. E il Menu è definito in qualche modo come il menu Barra degli strumenti/Barra delle azioni. es .:

navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?> 
<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
    <group 
     android:checkableBehavior="single"> 

     <item 
      android:id="@+id/drawer_home" 
      android:checked="true" 
      android:icon="@drawable/icon_home" 
      android:title="@string/title_home"/> 

     <item 
      android:id="@+id/drawer_content" 
      android:icon="@drawable/icon_content" 
      android:title="@string/title_content"/> 

     <item 
      android:id="@+id/drawer_about" 
      android:icon="@drawable/icon_about" 
      android:title="@string/title_about"/> 

     <item 
      android:id="@+id/drawer_exit" 
      android:icon="@drawable/icon_exit" 
      android:title="@string/title_exit"/> 

     </group> 
</menu> 

Poi, sul Activity dovrete solo fare un layout simile a quello trovato nel tutorial, utilizzando il DrawerLayout con NavigationView.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/drawer" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context=".MainActivity"> 

    <LinearLayout 
     android:layout_height="match_parent" 
     android:layout_width="match_parent" 
     android:orientation="vertical" 
     > 
     <include 
      android:id="@+id/toolbar" 
      layout="@layout/tool_bar"/> 
     <FrameLayout 
      android:id="@+id/frame" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

     </FrameLayout> 

    </LinearLayout> 

    <android.support.design.widget.NavigationView 
     android:id="@+id/navigation_view" 
     android:layout_height="match_parent" 
     android:layout_width="wrap_content" 
     android:layout_gravity="start" 
     app:headerLayout="@layout/header" 
     app:menu="@menu/navigation_menu"/> 
</android.support.v4.widget.DrawerLayout> 

Dovrete anche a creare qualche Fragments per ogni schermata che si desidera visualizzare con questo NavigationView. Dopo aver fatto questo, sul vostro Activity è possibile gestire gli eventi di selezione mediante l'attuazione di NavigationView.OnNavigationItemSelectedListener, in questo modo:

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { 
    // Your Activity 
     @Override 
    public boolean onNavigationItemSelected(MenuItem menuItem) { 
     Fragment fragment = null; 

     switch(menuItem.getItemId()) { 
      case R.id.drawer_home: 
       fragment = new YourFragment(); 
       break; 
      case R.id.drawer_content: 
       fragment = new AnotherFragment(); 
       break; 
      case R.id.drawer_about: 
       fragment = new AboutFragment(); 
       break; 
      case R.id.drawer_exit: 
       // TODO - Prompt to exit. 
       finish(); 
       break; 
     } 

     if (fragment == null) { 
      fragment = new YourFragment(); 
     } 

     drawerLayout.closeDrawers(); 

     FragmentManager fragmentManager = getSupportFragmentManager(); 
      fragmentManager.beginTransaction() 
        .replace(R.id.container, fragment) 
        .commit(); 

     return true; 
    } 
} 

Per quanto riguarda la modifica, le icone potrebbero essere rappresentati da un ImageView. E per navigare tra più profili, dipende da come hai implementato quella logica sulla tua app, ma come risposta "generica", puoi cambiare quei profili usando qualcosa come Spinner.

Quei tutorial vi aiuterà attraverso quel passo:

Una volta impostato che fino sul vostro intestazione , maneggiare t egli seleziona l'oggetto e modifica il profilo utente di conseguenza. (Quest'ultima parte dipende COMPLETAMENTE da come hai implementato i profili utente sulla tua app). Ma proprio come prima cosa, è possibile controllare lo android training site, in particolare, this part.

+0

Risposta più perfetta. Andare avanti #Mauker –

+0

@IntelliJAmiya cosa? Puoi spiegare cosa intendi? – WarrenFaith

+0

Ho visto un post sul blog una volta che ha sezionato il modello NavigationView da Android Studio 1.4: http://androidessence.com/creating-a-material-design-navigation-drawer/ – AdamMc331

3

Si dovrebbe usare NavigationView

Esso fornisce il quadro di riferimento per la navigazione facile da implementare materiale cassetto con l'aiuto di elementi di navigazione Gonfiare attraverso menu delle risorse . Befor Navigation View, abbiamo un modo difficile di rendere il cassetto di navigazione del materiale utilizzando listview o linearlayout con adattatore personalizzato, ma ora abbiamo solo bisogno di aggiungere Navigation View in DrawerLayout, tutto il resto sarà gestito da Navigation View.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <!-- Your contents --> 

    <android.support.design.widget.NavigationView 
     android:id="@+id/navigation" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     app:menu="@menu/my_navigation_items" /> 
</android.support.v4.widget.DrawerLayout> 

Per questo requisito È possibile controllare campione

  1. MaterialDrawer

  2. How To Make Material Design Navigation Drawer

  3. Playing with NavigationView

Spero che questo aiuti.

0

Penso che questo MaterialDrawer sia quello che stai cercando. Questa libreria ha molti esempi. Puoi utilizzare direttamente questa libreria o leggere il codice sorgente e implementare il tuo cassetto personale.

Problemi correlati