24

Come abilitare la "mini variante" da Material Design guide - in modo che solo le icone del cassetto siano visualizzate nel suo stato chiuso?Come abilitare o simulare la mini variante dalla guida alla progettazione dei materiali per android.support.v4.widget.DrawerLayout?

mini variant

Per quanto a simple test project per la mia domanda mi hanno preso il ben noto Navigation Drawer Example by Google - e poi ha aggiunto il secondo cassetto sul lato destro e le icone per le voci ListView su entrambi i lati:

screenshot

screenshot

Si prega di avvisare come attivare (o forse falso?) Il "mini Variante cassetto" - in modo che solo il mu i simboli sic sono visibili sul lato destro dello screenshot qui sopra.

Ecco il mio file di layout activity_main.xml:

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

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.v7.widget.Toolbar 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

     <ImageView 
      android:src="@drawable/ic_music_note_black_24dp" 
      android:onClick="openActions" 
      android:layout_gravity="right" 
      android:padding="16dp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     </android.support.v7.widget.Toolbar> 

     <FrameLayout 
      android:id="@+id/content_frame" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 

    </LinearLayout> 

    <ListView 
     android:id="@+id/left_drawer" 
     android:layout_width="240dp" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     android:choiceMode="singleChoice" /> 

    <ListView 
     android:id="@+id/right_drawer" 
     android:layout_width="160dp" 
     android:layout_height="match_parent" 
     android:layout_gravity="end" 
     android:choiceMode="singleChoice" /> 

</android.support.v4.widget.DrawerLayout> 

E la MainActivity.java usarlo:

public class MainActivity extends AppCompatActivity { 
    private Toolbar mToolbar; 
    private DrawerLayout mDrawerLayout; 
    private ListView mDrawerList; 
    private ListView mActionList; 
    private ActionBarDrawerToggle mDrawerToggle; 

    private String[] mPlanetTitles; 
    private String[] mActions; 
    private int[] mIcons; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     mPlanetTitles = getResources().getStringArray(R.array.planets_array); 
     mActions = getResources().getStringArray(R.array.music_actions); 

     TypedArray ta = getResources().obtainTypedArray(R.array.music_icons); 
     mIcons = new int[ta.length()]; 
     for (int i = 0; i < mIcons.length; i++) 
      mIcons[i] = ta.getResourceId(i, R.drawable.ic_menu_black_24dp); 
     ta.recycle(); 

     mToolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(mToolbar); 

     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 
     mDrawerList = (ListView) findViewById(R.id.left_drawer); 
     mActionList = (ListView) findViewById(R.id.right_drawer); 

     mDrawerList.setAdapter(new ArrayAdapter<String>(this, 
      R.layout.drawer_list_item, mPlanetTitles) { 
      @Override 
      public View getView(int position, View convertView, ViewGroup parent) { 
       TextView view = (TextView) super.getView(position, convertView, parent); 
       view.setCompoundDrawablePadding(24); 
       view.setCompoundDrawablesWithIntrinsicBounds(
        R.drawable.ic_stars_white_24dp, 0, 0, 0); 
       return view; 
      } 
     }); 

     mActionList.setAdapter(new ArrayAdapter<String>(this, 
      android.R.layout.simple_list_item_1, mActions) { 
      @Override 
      public View getView(int position, View convertView, ViewGroup parent) { 
       TextView view = (TextView) super.getView(position, convertView, parent); 
       view.setCompoundDrawablePadding(24); 
       view.setCompoundDrawablesWithIntrinsicBounds(mIcons[position], 0, 0, 0); 
       return view; 
      } 
     }); 

     mDrawerToggle = new ActionBarDrawerToggle(
       this,     /* host Activity */ 
       mDrawerLayout,   /* DrawerLayout object */ 
       mToolbar, 
       R.string.drawer_open, /* "open drawer" description for accessibility */ 
       R.string.drawer_close /* "close drawer" description for accessibility */ 
       ) { 
      public void onDrawerClosed(View view) { 
       mToolbar.setTitle(mTitle); 
       invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() 
      } 

      public void onDrawerOpened(View drawerView) { 
       mToolbar.setTitle(mDrawerTitle); 
       invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() 
      } 
     }; 
     mDrawerLayout.setDrawerListener(mDrawerToggle); 

     if (savedInstanceState == null) { 
      selectItem(0); 
     } 
    } 

Ecco a video showing Gmail for tablets in questa modalità.

+0

Potrebbe descrivere il comportamento desiderato in modo più esplicito? (Il mini cassetto è sempre visibile? Quale transizione deve essere utilizzata quando si fa scorrere il cassetto? ...) – Lamorak

+0

Sì, sempre visibile: solo icone (cassetto chiuso) o le stesse icone e testo (quando il cassetto è aperto). La transizione non ha importanza se non si attiva semplicemente la visibilità di 2 cassetti diversi. –

+2

questo può essere visto nell'app Gmail su Tablet. Spero che sarà parte di NavigationView con la libreria di supporto alla progettazione. vedi http://www.google.co.in/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior –

risposta

7

Il file ufficiale NavigationDrawer indica effettivamente "mini-variante" nel loro design specification, ma non c'è alcuna documentazione su come utilizzarlo. Forse arriverà più tardi come parte della libreria di supporto. Aggiornerà la risposta se/quando ci sarà una soluzione ufficiale.

Fino a che, dare un'occhiata a ActionsContentView library, fa esattamente quello che vuoi. L'ultima volta che sono stati gli aggiornamenti è stato 2 anni fa, ma funziona, l'ho usato qualche tempo fa. Puoi anche scaricarlo su Google Play e testarlo.

Closed state Opened state

4

visitare il sito seguente link:

https://github.com/mikepenz/MaterialDrawer

https://github.com/mikepenz/MaterialDrawer/issues/487

MaterialDrawer è un'implementazione di creare cassetto materiale. La sua ultima versione, 4.0, sebbene non ancora rilasciata, fornisce un "cassetto incorporato" per raggiungere ciò che si desidera. Non perfetto fino ad ora perché ho scaricato la sua demo, provato questa nuova funzione e ho scoperto che il cassetto non poteva aprire facendo scorrere, ma l'autore sta lavorando duramente per finirlo.

Di conseguenza, è possibile attendere il rilascio a breve e verificarne l'utilizzo in quel momento.

2

Dai un'occhiata a questa altra variante della variante nav: Implementing Gmail Tablet like Navigation Drawer.

Sembra che abbia una soluzione funzionante per la variante di cassetto Mini nav proprio come si trova nell'app Gmail per tablet come @Amol Gupta menzionata. La risposta accettata nell'altra domanda contiene un collegamento a un blog post con una spiegazione più dettagliata su come implementare la mini variante. La loro soluzione utilizza un layout del riquadro scorrevole che si dissolve in dissolvenza tra un layout "parziale" e un layout "pieno".

Ecco un link alla fonte esempio del post così:

https://github.com/chiuki/sliding-pane-layout

0

ti consiglio di cambiare il layout_width di @id/left_drawer da 240dp a un numero più piccolo, come 80dp.