Come creare il menu del mini-cassetto in Android?

Question

Sto cercando di creare un menu mini-cassetto come in google esempio:

Ho cercato di creare un layout che rimane sempre lì ParentLeft, e il menu di overflow quando si apre, ma non sembra naturale. Qualcuno sa come lo faccio?

---

Aggiornamento

ho cercato un altro modo. Per ascoltare il menu scorrevole, e per catturare quando è chiuso abbastanza, quindi posso impostare le dimensioni del menu, e mantenere le icone visibili, ma il testo deve essere sparito.

@Override 
     public void onDrawerSlide(float v, int i) { 
      Log.d("onDrawerSlide", "v=" + v + " i=" + i); 
      if (i<previewsI && decreasingCount > 3) { 
       // check if menu is closed enough 
       if (i <100 && i > 50) { 
        // change menu size, and force menu to keep opened 
        mDrawer.setMenuSize(Utils.dpToPx(70, getApplicationContext())); 
        mDrawer.openMenu(); 
        // TODO: hide menu items title, and let only icons to be visible 

       } 
      } 
      else if (i < previewsI) 
       // make sure the menu is closing 
        decreasingCount++; 

      previewsI = i; 
     } 

Funziona, ma non è agevole come vorrei. Ora dovrei pasticciare aprendolo senza problemi di nuovo. Ad ogni modo, non penso che questa sia una soluzione elegante. Sono sicuro che ci deve essere uno migliore là fuori.

Answer 1

So che questa è una domanda molto vecchia e non sono sicuro che tu voglia utilizzare una libreria. Ma la libreria MaterialDrawer offrirebbe un'implementazione MiniDrawer che include la trasformazione in un cassetto normale.

Come mostrato nella schermata del MiniDrawer supporta anche badge, e viene fornito con un AccountSwitcher. Anche con tutto il resto.

Il MiniDrawer utilizza la libreria Crossfader che consente l'effetto dissolvenza incrociata. La sample application del libreria crossfader mostra anche come implementare questo con l'MaterialDrawer

Ecco il codice che crea l'esempio mostrato (si possono anche trovare sopra al repository on GitHub):

DrawerBuilder builder = new DrawerBuilder() 
     .withActivity(this) 
     .withToolbar(toolbar) 
     .withInnerShadow(true) 
     .addDrawerItems(
       //.. add some items .. 
     ) // add the items we want to use with our Drawer 
     .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() { 
      @Override 
      public boolean onItemClick(View view, int position, IDrawerItem drawerItem) { 
       //some actions inside the listener 

       return miniResult.onItemClick(drawerItem); 
      } 
     }) 
     .withSavedInstance(savedInstanceState); 

// build the main drawer 
result = builder.buildView(); 
// build the miniDrawer 
miniResult = new MiniDrawer().withDrawer(result).withInnerShadow(true).withAccountHeader(headerResult); 

//define the width of the normal drawer, and the minidrawer 
int first = (int) UIUtils.convertDpToPixel(300, this); 
int second = (int) UIUtils.convertDpToPixel(72, this); 

//create the Crossfader used to hook the MiniDrawer and the normal drawer together. This also handles the crossfade effect. 
crossFader = new Crossfader() 
     .withContent(findViewById(R.id.crossfade_content)) 
     .withFirst(result.getSlider(), first) 
     .withSecond(miniResult.build(this), second) 
     .withSavedInstance(savedInstanceState) 
     .build(); 

// inform the MiniDrawer about the crossfader. 
miniResult.withCrossFader(new CrossfadeWrapper(crossFader)); 

Answer 2

Ho trovato un modo per implementare il mini navigatore utilizzando lo SlidingPaneLayout.

Creare un file di risorse di layout e impostare SlidingPaneLayout come vista padre. SlidingPaneLayout richiede due viste figlio: una vista principale e una vista di dettaglio. La vista principale conterrà un elenco di tutte le nostre opzioni di menu e la vista di dettaglio conterrà il contenuto.

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.SlidingPaneLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <!--Master fragment--> 
    <fragment 
     android:name="com.ng.anthony.mininavigationdrawer.MasterFragment" 
     android:layout_width="220dp" 
     android:layout_height="match_parent" 
     android:id="@+id/fragment_master"> 
    </fragment> 

    <!--Detail layout --> 
    <FrameLayout 
     android:layout_width="1000dp" 
     android:layout_height="match_parent" 
     android:layout_marginLeft="56dp"> 
    </FrameLayout> 
</android.support.v4.widget.SlidingPaneLayout> 

Creare una classe di frammento master. All'interno del tuo frammento principale dovresti avere una visualizzazione elenco con tutte le opzioni di menu.

public class MasterFragment extends ListFragment { 

    public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     View view = inflater.inflate(R.layout.fragment_master, container); 

     setListAdapter(new MenuListAdapter(R.layout.row_menu_action_item, getActivity(), MenuActionItem.values())); 
     return view; 
    } 
} 

Aggiungere il layout frammento maestro nella cartella risorse di layout

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ListView 
     android:id="@android:id/list" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@android:color/darker_gray" 
     android:divider="@null"> 
    </ListView> 

</LinearLayout> 

Il frammento principale contiene una vista elenco e utilizza un'enumerazione di opzioni di menu per compilare l'elenco.

public enum MenuActionItem { 
    ITEM1, 
    ITEM2, 
    ITEM3, 
    ITEM4, 
    ITEM5 
} 

Il frammento principale contiene anche un adattatore di array personalizzato che visualizza l'elenco delle opzioni di menu. L'adattatore di array personalizzato gonfia un layout di riga per ogni opzione di menu.

import android.app.Activity; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ArrayAdapter; 
import android.widget.ImageView; 
import android.widget.TextView; 

import java.util.ArrayList; 

/** 
* Created by Anthony on 16-01-25. 
*/ 
public class MenuListAdapter extends ArrayAdapter<MenuActionItem> { 

    int resource; 
    Activity activity; 

    public MenuListAdapter(int resource, Activity activity, MenuActionItem[] items) { 
     super(activity, resource, items); 

     this.resource = resource; 
     this.activity = activity; 
    } 

    public View getView (int position, View convertView, ViewGroup parent) { 
     View rowView = convertView; 

     if(rowView == null) { 
      rowView = activity.getLayoutInflater().inflate(resource, null); 

      MenuItemViewHolder viewHolder = new MenuItemViewHolder(); 

      viewHolder.menuItemImageView = (ImageView)rowView.findViewById(R.id.menu_item_image_view); 
      viewHolder.menuItemTextView = (TextView)rowView.findViewById(R.id.menu_item_text_view); 

      rowView.setTag(viewHolder); 
     } 

     MenuItemViewHolder holder = (MenuItemViewHolder)rowView.getTag(); 

     if(position == MenuActionItem.ITEM1.ordinal()) { 
      holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_payment_white_24dp)); 
      holder.menuItemTextView.setText(activity.getResources().getString(R.string.item1)); 
     } 
     else if(position == MenuActionItem.ITEM2.ordinal()) { 
      holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_pets_white_24dp)); 
      holder.menuItemTextView.setText(activity.getResources().getString(R.string.item2)); 
     } 
     else if(position == MenuActionItem.ITEM3.ordinal()) { 
      holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_receipt_white_24dp)); 
      holder.menuItemTextView.setText(activity.getResources().getString(R.string.item3)); 
     } 
     else if(position == MenuActionItem.ITEM4.ordinal()) { 
      holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_shopping_cart_white_24dp)); 
      holder.menuItemTextView.setText(activity.getResources().getString(R.string.item4)); 
     } 
     else if(position == MenuActionItem.ITEM5.ordinal()) { 
      holder.menuItemImageView.setImageDrawable(activity.getDrawable(R.drawable.ic_work_white_24dp)); 
      holder.menuItemTextView.setText(activity.getResources().getString(R.string.item5)); 
     } 

     return rowView; 
    } 

    private static class MenuItemViewHolder { 
     public ImageView menuItemImageView; 
     public TextView menuItemTextView; 
    } 
} 

Aggiungere il layout di fila

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:padding="16dp" 
    android:gravity="center_vertical"> 

    <ImageView 
     android:id="@+id/menu_item_image_view" 
     android:layout_width="24dp" 
     android:layout_height="24dp" 
     android:layout_marginRight="16dp"/> 

    <TextView 
     android:id="@+id/menu_item_text_view" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textSize="16sp" 
     android:textColor="@android:color/white"/> 

</LinearLayout> 

Alla fine si dovrebbe vedere qualcosa di simile

È possibile scaricare il progetto di esempio qui: https://github.com/nganthony/MiniNavigationDrawer