android - fragments - navigation drawer material design

¿Cómo habilitar o falsificar una mini variante de la guía de diseño de materiales para android.support.v4.widget.DrawerLayout?

Question

¿Cómo habilitar la "mini variante" de la guía de Diseño de materiales para que solo los iconos del Cajón se muestren en su estado cerrado?

Como un proyecto de prueba simple para mi pregunta, tomé el conocido Ejemplo de cajón de navegación de Google , y luego agregué el segundo Cajón en el lado derecho y los iconos para las entradas de ListView en ambos lados:

Aconseje cómo activar (o quizás falsificar) el "cajón mini variante", de modo que solo los símbolos de música sean visibles en el lado derecho de la captura de pantalla anterior.

Aquí está mi archivo de diseño 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>

Y el MainActivity.java usándolo:

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

Aquí hay un video que muestra Gmail para tabletas en este modo.

Answer 1

Echa un vistazo a esta otra pregunta de la variante Mini nav: Implementar la tableta de Gmail como el Cajón de navegación .

Parece que tiene una solución de trabajo para la variante Mini nav drawer tal como se encuentra en la aplicación de Gmail para tabletas, como se menciona en @Amol Gupta. La respuesta aceptada en la otra pregunta contiene un enlace a una publicación de blog con una explicación más detallada sobre cómo implementar la mini variante. Su solución utiliza un diseño de panel deslizante que se difumina entre un diseño "parcial" y un diseño "completo".

Aquí hay un enlace a la fuente de ejemplo de la publicación del blog también:

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

Answer 2

El NavigationDrawer oficial sí menciona "mini-variante" en su especificación de diseño , pero no hay documentación de cómo usarlo. Tal vez vendrá más tarde como parte de la biblioteca de soporte. Actualizará la respuesta si / cuando habrá una solución oficial.

Hasta que, eche un vistazo a la biblioteca ActionsContentView , hace exactamente lo que quiere. La última vez que se actualizaron fue hace 2 años, pero funciona, lo he usado hace un tiempo. También puedes obtenerlo en Google Play y probarlo.

Answer 3

Por favor visite el siguiente enlace:

https://github.com/mikepenz/MaterialDrawer

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

MaterialDrawer es una implementación para crear un cajón de materiales. Su última versión, 4.0, aunque aún no se ha publicado, proporciona un " cajón integrado " para alcanzar lo que desea. No es perfecto hasta ahora porque he descargado su demo, probé esta nueva función y descubrí que el cajón no podía abrirse deslizando, pero el autor está trabajando duro para terminarlo.

Como resultado, puede esperar la próxima publicación y verificar su uso en ese momento.

Answer 4

Recomendaré cambiar el layout_width de @id/left_drawer de 240dp a un número más pequeño, como 80dp .