Hola chicos, bienvenidos de nuevo a la parte 2 del tutorial del cajón de navegación. En la parte 1 hicimos algunos preparativos. Y en este video queremos crear el cajón de navegación. En la parte 3, manejaremos los eventos de clic y abriremos nuestros fragmentos. Y comenzaremos con el encabezado
de nuestro cajón de navegación Para esto, tenemos que crear un nuevo diseño Entramos en nuestra carpeta "aplicación" aquí en "Res-> Diseño" Hacemos clic derecho en "diseño" y creamos un nuevo "Archivo de recursos de diseño" Tenemos para darle un nombre y
lo llamaré "nav_header" Y cambiaré el diseño raíz a "LinearLayout" Haga clic en "OK" Y aquí nuevamente cambiamos a
la pestaña "Text" Y este diseño contendrá el encabezado de nuestro cajón de navegación que se colocará en la parte superior Nuestro LinearLayout ya está configurado
en "orientación = vertical" Y agregamos algunos atributos más Primero, cambiamos la altura de
nuestro encabezado a un "176dp" fijo Esta es la misma altura que obtienes cuando creas una nueva
actividad de cajón de navegación en Android Studio Pero también he visto ejemplos con las otras
alturas, por lo que puedes cambiar eso si quieres A continuación, configuramos el "fondo" en "colorAccent" Aquí, por supuesto, puedes elegir cualquier
color que quieras o también puedes establecer una imagen para
el fondo.
Ponemos la "gravedad" con "android:gravity"
en "bottom" porque queremos que el texto y todo
se coloque en la parte inferior de este encabezado. A continuación le damos un "relleno" para que haya un poco de espacio alrededor de los
bordes del encabezado de 16 dp Y, por último, estableceremos un "tema"
con "android: tema" Y aquí buscamos @style/ThemeOverlay.AppCompat.Dark Y esto será haga que el texto de
este encabezado sea blanco tal como lo tenemos en una barra de acción oscura Y en este LinearLayout
colocaremos un ImageView y 2 TextViews Pero, por supuesto, puede colocar cualquier
Vista que desee allí <ImageView configuramos el ancho de "wrap_content" y altura Y para "android:src" tomamos nuestro ícono "mipmap/ic_laucher_round" como una imagen de marcador de posición Ahora, por alguna razón, esto se muestra
en la vista previa como un cuadrado, pero en realidad no importa Debajo de este ImageView colocamos nuestro
primer TextView " wrap_content" ancho y alto
aquí también.
Le damos un "paddingTop = 8dp". Entonces, hay un poco de espacio para
ImageView. Le damos un "texto". Voy a configurar esto en "Codificación en
flujo" como marcador de posición. Y configuramos "textAppearance" y buscamos "@style/" TextAppearance.AppCompat.Body1 Y esto establecerá el tamaño del texto a este
tamaño de texto predefinido "Body1" aquí Pero también puede usar el atributo "textSize"
en su lugar Y debajo aquí también ponemos otro ancho y alto "wrap_content" de TextView
Aquí no vamos a establecer el
atributo "textAppearance" sino un "texto" por supuesto Y aquí voy a escribir otro
texto ficticio info@codinginflow.com Ahora otra vez Voy a presionar [Ctrl + Alt + L]
para reorganizar los atributos Y eso es todo para este diseño Ahora queremos crear el
diseño de la actividad principal Así que cambiamos a nuestro
archivo "actividad_principal.xml" Eliminamos este "TextView" aquí Y para usar nuestro cajón de navegación
tenemos que cambiar el diseño raíz a un "DrawerLayout" este aquí "v4.widget.DrawerLayout" Mantenemos el ancho y alto como
"match_parent" Y tenemos que darle una "id" porque necesita hacer referencia a
él más adelante en el código Java "@+id/drawer_layout" A continuación, configuramos "android:fitsSystemWindows" y establecemos esto en "true" Esto hará que el cajón de navegación se
dibuje debajo de la barra de estado en la parte superior de nuestra pantalla Y en este "DrawerLayout"
tenemos que poner primero nuestro diseño de contenido principal que queremos mostrar en la pantalla, que son la barra de herramientas y nuestro
contenedor de fragmentos debajo.
Y debajo de este diseño principal, colocamos un widget "NavigationView" que contendrá el cajón de navegación.
primero ponemos un "LinearLayout"
aquí Lo configuramos en "match_parent" ancho
y alto porque debería llenar toda la pantalla Y configuramos la "orientación = vertical"
aquí también En este LinearLayout ponemos
nuestro contenido principal Así que aquí coloque nuestra "Barra de herramientas",
como ya mencioné v7.widget.toolbar Establecemos "width=match_parent" y "height=?attr/actionBarSize" en camel case, así Y esto establecerá la altura al
tamaño de la barra de acción Cambiamos esta etiqueta de cierre
aquí a una etiqueta de cierre automático colocando una barra delante de
ella de esta manera y agregamos algunos atributos más. Establecemos el color de fondo con
"android:background" y establecemos esto en nuestro "colorPrimary" A continuación, asigne a esta barra de herramientas una "id"
con "android:id=@+id/" como de costumbre y la llamaremos "barra de herramientas" porque también necesitamos hacer referencia a ella
en el código Java El siguiente atributo es "android:theme" Y aquí tenemos busque @style/ThemeOverlay.AppCompat.Dark.ActionBar este aquí Esto hará que el texto de nuestra barra de herramientas sea blanco,
tal como lo tenemos para la barra de acción predeterminada Si desea tener texto negro en su lugar
porque la barra de acción tiene un color claro, entonces puede esto a "AppCompat.ActionBar" pero mantenemos ".Dark.ActionBar" Y luego configuramos "app:popupTheme" Y aquí buscamos
"@style/ThemeOverlay.AppCompat.Light" y esto se encargará de colorear
el el menú aparecerá correctamente si desea implementar un menú más adelante Y, por último, configuramos "android: elevación" y configuramos esto en "4dp" Esto dibujará una sombra debajo de nuestra
barra de acción Sin embargo, esto solo funciona en el
nivel API 21 o superior y lo hará solo debe ignorarse en los
niveles inferiores de API Debajo de esta "Barra de herramientas", pero dentro de
este "LinearLayout" ponemos "<FrameLayout" y establecemos esto en
ancho y alto "match_parent" también Lo cambiamos a una etiqueta de cierre automático y le damos un "id" que llamaremos fragment_container Y el nombre ya implica que luego colocaremos nuestros fragmentos
en este "FrameLayout" Y esto llenará toda la pantalla
debajo de nuestra barra de herramientas Y eso es todo para nuestro contenido principal Ahora debajo de este "LinearLayout" pero
dentro de nuestro "DrawerLayout" ponemos un "NavigationView" este aquí
"android.support.design.widget.NavigationView" Y este es el cajón de navegación en sí.
Establecemos el ancho en "wrap_content" y el alto en "match_parent" porque debería llenar toda la
pantalla en la altura También lo cambiamos a una etiqueta de cierre automático
Y aquí configuramos "android:" layout_gravity="start" Esto colocará el
cajón de navegación en el lado izquierdo de la pantalla También puede ponerlo hasta el "final",
que estará en el lado derecho de la pantalla, sin embargo, esto no está destinado a
la navegación, sino más bien a las acciones en el contenido en sí. Por lo general, desea un cajón de navegación izquierdo. es "nav_view" Y ahora agregamos nuestro encabezado con "aplicación:" Preste atención, esta vez no es
"android:" es "aplicación:" " headerLayout" y aquí buscamos
nuestro diseño "nav_header" que creamos Y esto automáticamente coloque
el encabezado en nuestro cajón de navegación Y ahora también configuramos "app:menu" Y como ya puede imaginar,
pasamos nuestro "drawer_menu" y esto llenará este cajón de navegación Ahora no podemos ver nuestro cajón en esta
"Vista previa" ventana aquí porque está ubicada a la izquierda de nuestro
contenido principal, pero lo que podemos hacer es volver
a nuestro "DrawerLayout" y agregar otro atributo "herramientas: openDrawer" y aquí
pasamos "start" Y ahora podemos ver nuestro cajón en
"Vista previa" aquí Y es hermoso, si me preguntas De nuevo, voy a presionar
[Ctrl + Alt + L] para poner todo en su lugar y nuestro diseño está terminado Ahora solo tenemos que ir a nuestra
"Actividad principal".
java" y haga algunos cambios leves allí y nuestro cajón funcionará Y primero tenemos que decirle a nuestra aplicación
que queremos usar nuestra barra de herramientas como la barra de acciones porque eliminamos la
barra de acciones predeterminada. Entonces, necesitamos una referencia a nuestra barra de herramientas. Escribimos " Toolbar", pero aquí tenemos
que elegir el "v7" uno preste atención a eso Lo llamamos "toolbar = findViewById(R.id."
y el ID de nuestra barra de herramientas en XML era "toolbar" punto y coma Y ahora simplemente llamamos " setSupportActionBar" y pase nuestra "barra de herramientas" Y esto configurará nuestra barra de herramientas
como la barra de acciones Bastante sencillo Y esto, por ejemplo, colocará
el título de nuestra actividad en la barra de herramientas o colocará el menú de opciones allí
si creamos uno Ahora probemos nuestra aplicación y vea
cómo se ve Esto es nuestra actividad, nuestra barra de herramientas
está en su lugar y podemos abrir nuestro
cajón de navegación y ahí está Pero aún no hemos terminado Como puede ver, nuestro cajón está debajo de
nuestra barra de estado pero queremos la barra de estado transparente
y mostrar nuestro cajón debajo de él tampoco podemos hacer clic en nada todavía y no tenemos este botón aquí
en la esquina superior izquierda que abre el cajón Y en este video nos ocuparemos
de la barra de estado y el botón y lo haremos maneje los eventos de clic
en el siguiente video Así que regrese a nuestra MainActivity En la parte superior aquí creamos una
variable miembro para nuestro diseño de cajón en sí mismo DrawerLayout privado y simplemente lo llamamos "cajón" En nuestro método "onCreate ()" asignamos
este cajón variable = findViewById(R.id.drawer_layout); Y ahora, para obtener este botón de menú
en la esquina superior izquierda de nuestra actividad, podríamos crear este
ícono de hamburguesa como un archivo dibujable, colocarlo allí como el botón "Inicio" y
luego manejar los eventos de clic nosotros mismos y abrir el cajón allí, pero de esta manera no tendríamos esta animación giratoria que obtenemos
cuando abrimos este cajón Y hay una clase práctica que se
encarga de todo esto y se llama ActionBarDrawerToggle Pero antes de crear una instancia
de este "ActionBarDrawerToggle" tenemos que crear rápidamente 2 string
resources Así que vamos a nuestra carpeta "values" aquí y abrimos "strings.xml" Debajo de nuestro "app_name" aquí escribimos
"<string" le damos un nombre navigation_drawer_open cerramos esto Y aquí escribimos (sin comillas) "Abrir cajón de navegación" Ahora copiamos esto, lo colocamos debajo y lo cambiamos a "navigation_drawer_close" y "Cerrar cajón de navegación" Ahora este texto no aparecerá
en nuestra aplicación Esto es básicamente solo para accesibilidad
para personas discapacitadas, por ejemplo, para ciegos personas que
necesitan un lector de pantalla para saber lo que está sucediendo en la pantalla Sin embargo, la clase "ActionBarToggle" necesita
estos valores de 2 cadenas como entrada Así que los creamos, volvamos a nuestra MainActivity Aquí continuamos Llamamos a nuestro ActionBarDrawerToggle "toggle" = new ActionBarDrawerToggle() Aquí primero tenemos que pasar un Contexto Luego tenemos que pasar nuestra coma variable "cajón"
y nuestra variable "barra de herramientas" Porque estas son las 2 vistas que
estarán conectadas y sincronizadas coma, y voy a continuar en
la siguiente línea Y ahora tenemos que pasar estos
recursos de 2 cadenas que acabamos de crear.
Así que escribimos "R.string". y primero "navigation_drawer_open" y "R.string.navigation_drawer_close);" Y ahora a continuación, tomamos nuestra llamada variable "cajón
" ".addDrawerListener()" y pasamos esta variable "toggle" Y, por último, llamamos a toggle.syncState() Y esto se encargará de rotar
el ícono de la hamburguesa junto con el cajón mismo Pero tú Verá esto en acción
en un momento. Ahora, antes de hacer que nuestra barra de estado sea
transparente, salimos de nuestro método "onCreate ()" y anulamos "onBackPressed ()".
Porque cuando presionamos el botón "Atrás"
mientras nuestro cajón de navegación está abierto no queremos dejar la actividad
de inmediato, sino que queremos cerrar nuestro cajón de navegación Entonces, arriba de la parte "super" aquí escribimos "if (drawer.isDrawerOpen())" y aquí pasamos "GravityCompat"
con G mayúscula " .start" Llaves si este es el caso, queremos
cerrarlo Entonces tomamos nuestro "cajón" nuevamente .closeDrawer() Y aquí nuevamente pasamos
"GravityCompat.START" Si desea cerrar un cajón que
está a la derecha lado de la pantalla, entonces tienes que pasar "GravityCompat.END" "else", lo que significa que el cajón
no está abierto, entonces queremos llamar a nuestro
"super.onBackPressed()" que, en nuestro caso, cerrará
la actividad como de costumbre De acuerdo y ahora hagamos que nuestra
barra de estado sea transparente.
Para esto, usaremos el atributo "statusBarColor"
que solo funciona en el nivel de API 21
o superior en los niveles inferiores de API, nuestra
barra de estado será opaca. Si el nivel de API en su ejemplo
ya es 21 o superior, entonces simplemente puede poner este atributo
en el archivo "styles.xml". En mi ejemplo, el nivel mínimo de API es 19, por lo que no puedo ponerlo directamente
aquí. En cambio, tengo que crear un
archivo "styles.xml" separado que será solo se aplicó para el
nivel de API 21 o superior. Entonces, para esto, hago clic derecho
en "valores" y creo un nuevo "archivo de recursos de valores". También debemos llamarlo "styles.xml"
y, desde esta lista, haga clic
en "Versión". y luego haga clic en este ícono ">>" aquí Y aquí para "Nivel API de plataforma"
pasamos "21" Esto creará un archivo "styles.xml" solo para el nivel API 21 y superior Entonces hacemos clic en "Aceptar" Y ahora como puede ver aquí,
tenemos 2 archivos "styles.xml" Y ahora vayamos rápidamente a
nuestro archivo "styles.xml" normal sin "(v.21)" y copie nuestro tema "NoActionBar" aquí Copie esto y luego regrese a nuestro
archivo "(v21)" styles.xml y entre estas etiquetas "<resources>"
aquí simplemente pasamos el estilo que acabamos
de copiar pero agregamos otro atributo <item y aquí buscamos android:statusBarColor ">" y aquí
pasamos @android:color/ y aquí buscamos "transparente" Y como su nombre lo indica, esto hará que
la barra de estado sea transparente pero solo en el nivel API 21 o superior Pero como se mencionó, si ve
este video en el futuro y su nivel mínimo de API ya es
21 o superior, entonces no tiene que ponerlo aquí En su lugar, puede agregarlo al
archivo normal "styles.xml" Y ahora nuestro cajón está terminado.
Vamos a probarlo Entonces, como puede ver, ahora tenemos
nuestro ícono de hamburguesa aquí y cuando abro este cajón,
puede ver que está girando.
Es posible que haya visto esto antes
en otras aplicaciones. También podemos hacer clic en este ícono que también se abrirá. nuestro cajón de navegación Y, como puede ver, tenemos nuestra
barra de estado transparente En este momento no manejamos eventos de clic,
nos encargaremos de esto en el próximo video Así que asegúrese de suscribirse al
canal para no perderse eso Y si este video fue útil,
por favor deja un me gusta Cuídate..