Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Diseño del material: Nav Ancho del cajón

Según las especificaciones de Material Design, la anchura del Nav Drawer en dispositivos móviles debe ser

Side nav width = anchura de la pantalla – altura de la barra de aplicaciones

¿Cómo implementamos esto en android?

Tengo dos soluciones parciales. La primera es la forma hacky: en la actividad que contiene poner este código:

 If (Build.VERSION.SDK_INT> Build.VERSION_CODES.HONEYCOMB_MR1) {
     Final Display display = getWindowManager (). GetDefaultDisplay ();
     Final Tamaño del punto = nuevo Punto ();
     Display.getSize (tamaño);

     Final ViewGroup.LayoutParams params = mDrawerFragment.getView (). GetLayoutParams ();
     Params.width = size.x - getResources (). GetDimensionPixelSize (
         R.dimen.abc_action_bar_default_height_material
     );
     MFragmentUserList.getView (). SetLayoutParams (params);
 } 

Esto, sin embargo, causa un segundo ciclo de disposición y no funciona en pan de jengibre: no es óptimo.

La segunda solución consiste en añadir un Espacio entre el fragmento y el dibujo. Sin embargo, desplaza la sombra y el lugar donde el usuario puede presionar para volver a la aplicación principal. También se bloquea cuando se presiona el icono "hamburguer". No es óptimo tampoco.

¿Hay una mejor solución, preferiblemente uno que implica estilos y xml?

  • ¿Cómo diseñar el NavigationView de la biblioteca de soporte de diseño?
  • Android Tab Layout inside Fragmento no carga el contenido de la pestaña
  • Desactivar la hamburguesa para animar la flecha hacia atrás en la barra de herramientas
  • ¿Cuál es la unidad predeterminada de estilo en React Native?
  • Cuando se utiliza el CoordinatorLayout mi ScrollView tiene un tamaño incorrecto
  • Cómo agregar un degradado a un ImageView anidado en un CollapsingToolbar
  • Cómo hacer que AppBarLayout desaparezca por completo con windowTranslucentStatus establecido en true
  • Lollipop Barra de progreso Tinción
  • 6 Solutions collect form web for “Diseño del material: Nav Ancho del cajón”

    Con la Biblioteca de soporte de diseño de Android , ahora es realmente sencillo implementar un cajón de navegación que incluya el tamaño correcto. Utilice el NavigationView y utilice su capacidad para hacer el cajón fuera del recurso de menú (ejemplo aquí ) o simplemente puede envolverlo alrededor de la vista que utiliza actualmente para mostrar su lista de cajones (por ejemplo, ListView, RecyclerView). NavigationView entonces se ocupará del tamaño del cajón para usted.

    He aquí un ejemplo de cómo uso el NavigationView envuelto alrededor de ListView:

    <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/navdrawer_layout" android:fitsSystemWindows="true"> <!-- Layout where content is shown --> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/toolbar" layout="@layout/toolbar" /> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbar" /> <!-- Toolbar shadow for pre-lollipop --> <View style="@style/ToolbarDropshadow" android:layout_width="match_parent" android:layout_height="3dp" android:layout_below="@id/toolbar" /> </RelativeLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start"> <ListView android:id="@+id/navdrawer_list" android:layout_width="match_parent" android:layout_height="match_parent" android:choiceMode="singleChoice" android:dividerHeight="0dp" android:divider="@null"/> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout> 

    De esta manera puede utilizar el tamaño de NavigationViews y seguir usando su propia lista de cajones. Aunque es mucho más fácil hacer la lista de cajones fuera del recurso de menú (ejemplo aquí ) no puede utilizar vistas personalizadas para los elementos de la lista.

    Me las arreglé para hacer una solución utilizando declaraciones de estilo XML, pero es un poco hacky también. Mi enfoque era utilizar márgenes en lugar de aplicar un ancho de conjunto para evitar escribir cualquier código para calcular el diseño manualmente. He creado una regla de estilo básico para resaltar cómo obtener este trabajo.

    Por desgracia, DrawerLayout actualmente aplica un margen mínimo de 64dp. Para que este enfoque funcione, necesitamos compensar ese valor con márgenes negativos para que podamos obtener el ancho deseado para el cajón de navegación. Esperemos que esto se pueda resolver en el futuro ( Alguien ha presentado un problema con respecto a ello ) por lo que sólo podemos hacer referencia a la referencia de dimensión abc_action_bar_default_height_material para el margen.

    Sigue estos pasos:

    1. Agregue las siguientes definiciones de dimensión y estilo:

      Valores / dimens.xml

       <!-- Match 56dp default ActionBar height on portrait orientation --> <dimen name="nav_drawer_margin_offset">-8dp</dimen> 

      Valores-tierra / dimens.xml

       <!-- Match 48dp default ActionBar height on landscape orientation --> <dimen name="nav_drawer_margin_offset">-16dp</dimen> 

      Values ​​/ styles.xml

       <!-- Nav drawer style to set width specified by Material Design specification --> <style name="NavDrawer"> <item name="android:layout_width">match_parent</item> <item name="android:layout_marginRight">@dimen/nav_drawer_margin_offset</item> </style> 

      Values-sw600dp / styles.xml

       <!-- Margin already matches ActionBar height on tablets, just modify width --> <style name="NavDrawer"> <item name="android:layout_width">320dp</item> <item name="android:layout_marginRight">0dp</item> </style> 
    2. Una vez que haya agregado las reglas anteriores en su proyecto, puede hacer referencia al estilo NavDrawer en la vista del cajón de navegación:

      Layout / navigation_drawer.xml (u otra vista apropiada que se esté utilizando para su cajón de la navegación)

       <?xml version="1.0" encoding="utf-8"?> <ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/navigation_drawer" style="@style/NavDrawer" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#FFF" /> 

    Después de buscar una solución más sencilla, encontré un artículo muy claro: Material de navegación de cajón de tamaño .

    Aquí:

    La pantalla de Nexus 5 es un agradable 640 x 360 dp (xxhdpi), y una barra de aplicaciones en él es de 56 dp de altura. Así que el cajón de nav debe ser:

    [Anchura en dp] = 360dp – 56dp = 304dp

    Un Nexus 4 tiene una pantalla de 640 x 384 dp (xhdpi) en su lugar. La misma altura de la barra de aplicaciones de 56dp. Su cajón nav?

    [Width en dp] = 384dp – 56dp = 328dp

    Entonces, ¿cómo los diseñadores de Google llegar a 288dp y 304dp anchos, respectivamente? No tengo idea.

    Las aplicaciones de Google, por otro lado, parecen estar de acuerdo con mis matemáticas. Oh, ¿y sabes qué es lo más gracioso en todo esto? El iPhone (que tiene diferentes alturas de pantalla, pero una anchura constante de 320 dp) está marcado correctamente como tener un cajón de 264dp nav.

    Básicamente, muestra que algunas pautas sobre el cajón de navegación se contradicen y que puede utilizar la siguiente regla para evitar cálculos:

    Básicamente, siempre puede utilizar 304dp en -sw360dp y 320dp en -sw384dp para su cajón de navegación, y lo hará bien.

    Ya han actualizado las especificaciones, ahora el ancho del cajón de navegación es:

     Math.min(screenWidth — actionBarSize, 6 * actionBarSize); 

    Bueno, me pareció muy difícil de entender e implementar. Desafortunadamente, la solución de Matthew hizo que mi cajón de nav fuera demasiado amplio para el paisaje, y parecía contrario a las prácticas de Google, es decir, el ancho de navegación está determinado por el menor ancho del dispositivo. En cualquier caso, no funcionaría en mi caso, ya que deshabilité la configuración en mi manifiesto. Así que decidí cambiar el ancho nav de forma dinámica con el código siguiente.

    Debe ser observado que mi app es apenas para los teléfonos y me establecí en 320dp que era la anchura máxima. Esta es también la razón por la que he establecido la altura de la barra de herramientas de 56dp para ambas orientaciones.

    Espero que ayude a alguien, y que puedan evitar el estrés innecesario que me causó.

     navDrawLayout.post(new Runnable() { @Override public void run() { Resources r = getResources(); DisplayMetrics metrics = new DisplayMetrics(); if(r.getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){ getWindowManager().getDefaultDisplay().getMetrics(metrics); int height = metrics.heightPixels; float screenWidth = height / r.getDisplayMetrics().density; float navWidth = (screenWidth - 56); navWidth = Math.min(navWidth, 320); int newWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, navWidth, r.getDisplayMetrics()); DrawerLayout.LayoutParams params = (DrawerLayout.LayoutParams) navDrawLayout.getLayoutParams(); params.width = newWidth; navDrawLayout.setLayoutParams(params); } if(r.getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) { getWindowManager().getDefaultDisplay().getMetrics(metrics); int width = metrics.widthPixels; float screenWidth = width / r.getDisplayMetrics().density; float navWidth = screenWidth - 56; navWidth = Math.min(navWidth, 320); int newWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, navWidth, r.getDisplayMetrics()); DrawerLayout.LayoutParams params = (DrawerLayout.LayoutParams) navDrawLayout.getLayoutParams(); params.width = newWidth; navDrawLayout.setLayoutParams(params); } } } ); 

    El ancho del cajón de navegación depende del ancho, la orientación y la versión de Android del dispositivo.

    Echa un vistazo a este artículo sobre el dimensionamiento del cajón de navegación.

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.