He visto en la nueva especificación Side Nav de diseño de material que puede mostrar el cajón sobre la barra de acción y detrás de la barra de estado. ¿Cómo puedo implementar esto?
android
navigation-drawer
android-appcompat
Chris Banes
fuente
fuente
Respuestas:
La nueva funcionalidad en el marco y las bibliotecas de soporte permiten exactamente esto. Hay tres 'piezas del rompecabezas':
fitsSystemWindows
para que se coloque detrás de las barras del sistema.Theme.Material
el color normal de la barra de estado para que DrawerLayout pueda dibujar allí.Asumiré que usará la nueva aplicacióncompat.
Primero, su diseño debería verse así:
Luego en tu Actividad / Fragmento:
Luego debe asegurarse de que DrawerLayout esté visible detrás de la barra de estado. Lo haces cambiando tu tema de valores-v21:
values-v21 / themes.xml
Nota: Si
<fragment android:name="fragments.NavigationDrawerFragment">
se usa a en lugar deel diseño real, el efecto deseado se logrará si llama
fitsSystemWindows(boolean)
a una vista que regresa delonCreateView
método.fuente
DrawerLayout
necesario que se coloque detrás de las barras del sistema. Luego debe configurarlo en la vista del cajón para queDrawerLayout
quede dentro de las ventanas.layout_marginTop
en la raíz del diseño del contenido de tu cajón. De lo contrario, el fondo del diseño del contenido de su cajón se dibujará en la parte superior de la barra de estado, y todo lo demás se desplazará hacia abajo. Sin embargo, esto parece una solución un poco asquerosa, por lo que sé, no hay? Attr / statusBarSize o algo así como el proporcionado por Android.EDITAR: La nueva Biblioteca de soporte de diseño lo admite y ya no se requiere el método anterior.
Esto ahora se puede lograr utilizando la nueva Biblioteca de soporte de diseño de Android .
Puede ver la aplicación de ejemplo Cheesesquare de Chris Banes que muestra todas las nuevas características.
Método anterior:
Como no hay una solución completa publicada, esta es la forma en que logré el resultado deseado.
Primero incluya un ScrimInsetsFrameLayout en su proyecto.
Luego cree un estilo para que
insetForeground
se pueda configurar.valores / attrs.xml
Actualice el archivo xml de su actividad y asegúrese de que
android:fitsSystemWindows
esté establecido en verdadero tanto en elDrawerLayout
como en elScrimInsetsFrameLayout
.layout / activity_main.xml
Dentro del método onCreate de su actividad, configure el color de fondo de la barra de estado en el diseño del cajón.
MainActivity.java
Finalmente actualice el tema de su aplicación para que
DrawerLayout
esté detrás de la barra de estado.values-v21 / styles.xml
Resultado:
fuente
Con el lanzamiento de la última biblioteca de soporte de Android (rev 22.2.0) tenemos una biblioteca de soporte de diseño y, como parte de esto, una nueva vista llamada NavigationView . Entonces, en lugar de hacer todo por nuestra cuenta con
ScrimInsetsFrameLayout
todo lo demás, simplemente usamos esta vista y todo se hace por nosotros.Ejemplo
Paso 1
Agregue el
Design Support Library
a subuild.gradle
archivoPaso 2
Agregue el
NavigationView
a suDrawerLayout
:Paso 3
Cree un nuevo recurso de menú
/res/menu
y agregue los elementos e íconos que desea mostrar:Paso 4
Inicie el NavigationView y maneje los eventos de clic:
Paso 5
Asegúrese de configurar
android:windowDrawsSystemBarBackgrounds
yandroid:statusBarColor
de lovalues-v21
contrario su cajón no se mostrará "debajo" de la barra de estadoPaso opcional
Agregue un encabezado a NavigationView. Para esto, simplemente cree un nuevo diseño y agréguelo
app:headerLayout="@layout/my_header_layout"
a NavigationView.Resultado
Notas
colorPrimary
atributotextColorPrimary
atributotextColorSecondary
atributoTambién puede consultar la aplicación de ejemplo de Chris Banes que resalta NavigationView junto con otras vistas nuevas que forman parte de la Biblioteca de soporte de diseño (como FloatingActionButton , TextInputLayout , Snackbar , TabLayout , etc.)
fuente
<item name="itemTextColor">@color/YOUR_COLOR</item>
<item name="itemIconTint">@color/YOUR_COLOR</item>
Toolbar
- no hay forma de hacer esto con unActionBar
mDrawerLayout.openDrawer(GravityCompat.START);
donde quiera. Si está utilizando un,ActionBarDrawerToggle
esto debe hacerse automáticamente tan pronto como haga clic en el icono de hamburguesa.Haz que funcione, en los valores-v21 estilos o tema xml necesita usar este atributo:
<item name="android:windowTranslucentStatus">true</item>
Eso hace la magia!
fuente
Los enfoques anteriores son correctos y pueden estar funcionando. He creado una demostración funcional siguiendo la guía anterior y probé en 2.xa 5.x
Puedes clonar desde Github
Lo importante para jugar es en Actividad principal
y la llamada de vuelta
Absolutamente el tema para V21 hace la magia
y el ScrimInsetsFrameLayout
Ahora esto es más fácil con la nueva biblioteca de soporte de diseño
clon de @Chris Banes https://github.com/chrisbanes/cheesesquare
fuente
Todas las respuestas mencionadas aquí son demasiado antiguas y extensas. La mejor y más corta solución que funciona con la última navegación es
esto va a cambiar el color de la barra de estado a transparente cuando abras el cajón
Ahora, cuando cierre el cajón, debe cambiar el color de la barra de estado nuevamente a oscuro, para que pueda hacerlo de esta manera.
y luego en el diseño principal agregue una sola línea, es decir
y el diseño de tu cajón se verá así
y su vista de navegación se verá así
Lo he probado y funciona completamente. Espero que ayude a alguien. Puede que este no sea el mejor enfoque, pero funciona sin problemas y es fácil de implementar. Marcarlo si ayuda. Codificación feliz :)
fuente
Estoy usando la biblioteca de soporte de diseño. Y con solo usar un tema personalizado, logré una barra de estado transparente cuando abrí el cajón de navegación.
Finalmente agregue el tema en el archivo de manifiesto
No olvides usar la propiedad,
android:fitsSystemWindows="true"
en "DrawerLayout"fuente
Este es el más simple, y funcionó para mí:
En los valores-21:
En los valores:
Y configúralo en tu barra de herramientas
fuente
24dp
para el margen superior.En lugar de usar el
ScrimInsetsFrameLayout
... ¿No es más fácil agregar una vista con una altura fija24dp
y un fondo deprimaryColor
?Entiendo que esto implica agregar una vista ficticia en la jerarquía, pero me parece más limpia.
Ya lo probé y está funcionando bien.
fuente
Prueba con esto:
estilo:
La actividad principal extiende ActionBarActivity
Ahora puedes
onCreateOptionsMenu
usar ActionBar con ToolBar como siempre.Este es mi diseño
¡Espero que lo entiendas! ¡Diviértete!
fuente