El año pasado, Google introdujo Material Design y quedó claro que el movimiento y la animación serían dos de las características más llamativas en las aplicaciones modernas de Android. Pero Google no proporcionó a los desarrolladores una solución fácil para integrarlos en las aplicaciones. Como resultado, muchas bibliotecas fueron desarrolladas para resolver el problema de integración.
Sin embargo, durante la I / O de Google de este año, Google presentó la Biblioteca de soporte de diseño de Android para facilitar la adopción de Material Design. Esto permite a los desarrolladores centrarse en las características que hacen que sus aplicaciones sean únicas..
1. Regiones
En este tutorial, te mostraré cómo implementar las técnicas de desplazamiento que se muestran en la especificación de Diseño de materiales de Google. Antes de comenzar, debe familiarizarse con las regiones de desplazamiento disponibles en una aplicación de Android. En la siguiente imagen, puedes ver que hay cuatro regiones.
Barra de estado
Aquí es donde aparecen las notificaciones y se muestra el estado de las diferentes funciones del dispositivo..
Barra de herramientas
La barra de herramientas se conocía anteriormente como la barra de acción. Ahora es una vista más personalizable con las mismas funcionalidades..
Pestaña / barra de búsqueda
Esta región opcional se usa para mostrar las pestañas que categorizan el contenido de su aplicación. Puede leer más sobre el uso de las pestañas y las diferentes formas de mostrarlas en la especificación de Diseño de materiales de Google. Cuando sea conveniente, también puedes usarlo en la navegación lateral de Google..
Espacio flexible
Aquí es donde puedes mostrar imágenes o barras de aplicaciones extendidas.
En lo que respecta a las técnicas de desplazamiento, la barra de herramientas y la barra de pestañas / búsqueda responden cuando el contenido de su aplicación se desplaza..
2. Configuración del proyecto
Para seguir adelante, deberías usar la última versión de Android Studio. Puedes obtenerlo desde el sitio web de Android Developer. Para probar estas técnicas de desplazamiento, recomiendo crear un nuevo proyecto (con un nivel de API mínimo de 15), ya que el diseño de su aplicación cambiará significativamente.
He proporcionado un proyecto de inicio, que puede descargar desde GitHub. Puede usar el proyecto de inicio como punto de partida y usar las técnicas de desplazamiento en sus propias aplicaciones. Primero agreguemos las siguientes dependencias a tus proyectos construir.gradle archivo dentro de la carpeta de la aplicación:
Con la primera dependencia, obtiene la Biblioteca de soporte de diseño de Android, que incluye las nuevas clases que necesitamos para este tutorial.
Con la segunda dependencia, obtienes la última versión de RecyclerView. La versión que aparece en el artículo oficial sobre la creación de listas no será útil esta vez..
A continuación, necesitará algunos datos ficticios para probar estas técnicas y completar el RecyclerView. Puede implementarlas usted mismo o copiar la implementación desde el Actividad inicial clase en el proyecto inicial.
3. Técnica de desplazamiento 1
Esta técnica oculta la región de la barra de herramientas cuando se desplaza el contenido de la aplicación. Puedes ver la técnica en acción en el siguiente video..
Para este diseño de diseño, puedes pensar en algo como esto:
El problema con este diseño es que tienes que gestionar los eventos por ti mismo, pero será fácil si te aprovechas de las nuevas clases. Vamos a modificarlo de la siguiente manera:
En este nuevo diseño, puedes ver que:
la Disposición relativa se sustituye por una CoordinatorLayout
la Barra de herramientas está envuelto en un AppBarLayout
la Barra de herramientas y RecyclerView recibió algunos atributos adicionales
¿Cuáles son estas nuevas clases??
CoordinatorLayout
Este diseño es un nuevo contenedor y un sobrealimentado. FrameLayout que proporciona un nivel adicional de control sobre eventos táctiles entre vistas de niños.
AppBarLayout
Este diseño es otro contenedor nuevo, diseñado específicamente para implementar muchas de las características del concepto de barra de aplicaciones de Material Design. Tenga en cuenta que si lo usa dentro de otro Grupo de vista, la mayor parte de su funcionalidad no funcionará.
La clave de esta técnica de desplazamiento, y la mayoría de las otras técnicas de desplazamiento que discutiremos, es la CoordinatorLayout clase. Esta clase especial puede recibir eventos y entregar eventos a sus vistas secundarias para que puedan responder adecuadamente. Está diseñado para ser utilizado como la vista de contenedor raíz.
Para habilitar esta técnica, la aplicación: layout_behavior atributo indica qué vista activará los eventos en el Barra de herramientas. En este caso, esa es la RecyclerView.
los aplicación: layout_scrollFlags atributo de la Barra de herramientas Indica a la vista como responder..
app: layout_scrollFlags = "scroll | enterAlways"
los aplicación: layout_scrollFlags el atributo puede tener cuatro valores posibles, que se pueden combinar para crear el efecto deseado:
voluta
Esta bandera debe establecerse para todas las vistas que necesitan desplazarse fuera de la pantalla. Las vistas que no usan esta bandera permanecen ancladas en la parte superior de la pantalla.
enterSiempre
Esta bandera garantiza que cualquier desplazamiento hacia abajo hará que esta vista se vuelva visible, permitiendo que regreso rapido modelo.
enterSiempreCollapsed
Cuando una vista ha declarado un minHeight y utiliza esta bandera, la vista solo entrará en su altura mínima (colapsada), solo se expandirá a su altura máxima cuando la vista de desplazamiento haya alcanzado su parte superior.
exitUntilCollapsed
Este indicador hace que la vista se desplace fuera de la pantalla hasta que se contraiga (su minHeight se alcanza) antes de salir.
Ahora puede ejecutar el proyecto, o presione Control + R, Y ver esta técnica en acción..
4. Técnica de desplazamiento 2
Esta técnica desplaza la barra de herramientas fuera de la pantalla, mientras que la región de la barra de pestañas permanece anclada en la parte superior. Puedes ver esta técnica en acción en el siguiente video..
Para esta técnica, voy a reutilizar el diseño de la técnica anterior y agregaré un TabLayout ver al lado de la Barra de herramientas, dentro de AppBarLayout.
los TabLayout La vista proporciona un diseño horizontal para mostrar pestañas. Puedes agregar cualquier número de pestañas usando la nueva pestaña Método y establecer su modo de comportamiento utilizando el setTabMode. Comencemos por rellenar las pestañas.
Al cambiar el valor de la aplicación: layout_scrollFlags atributo, y añadiendo y eliminando de la Barra de herramientas y TabLayout, Puedes obtener animaciones como las que se usan en:
Google Play Store donde se oculta la barra de herramientas y la barra de pestañas permanece visible.
Firme donde la barra de pestañas se desplaza fuera de la pantalla mientras la barra de herramientas permanece en la parte superior.
Reproducir música donde tanto la barra de herramientas como la barra de pestañas se desplazan fuera de la pantalla.
Eche un vistazo a los siguientes videos para ver ejemplos de esta técnica de desplazamiento..
Puedes ejecutar tu proyecto y ver esta técnica de desplazamiento en acción..
5. Técnica de desplazamiento 3
Para esta técnica de desplazamiento, voy a hacer uso de la región de espacio flexible que mencioné al principio de este tutorial. Hago esto para reducir la altura inicial de la AppBarLayout como el contenido se desplaza hacia arriba. La altura de la AppBarLayout aumenta a su altura original a medida que el contenido se desplaza hacia abajo. Puedes ver esta técnica en acción en el siguiente video..
Para esta técnica de desplazamiento, voy a utilizar el siguiente diseño:
Ciertamente parece un montón de código, así que vamos a desglosarlo. En este diseño, hice los siguientes cambios:
los Barra de herramientas está envuelto en un ColapsarToolBarLayout y ambos elementos se ponen en el AppBarLayout.
los aplicación: layout_scrollFlags atributo se mueve desde el Barra de herramientas al ColapsarToolBarLayout, Porque este contenedor ahora está a cargo de responder a eventos de desplazamiento..
Un nuevo atributo, aplicación: layout_collapseMode, fue agregado a la Barra de herramientas. Este atributo asegura que la Barra de herramientas permanece clavado en la parte superior de la pantalla.
los AppBarLayout tiene una altura inicial fija de 192dp.
UNA Botón de acción flotante Se agregó al diseño, debajo de la RecyclerView.
¿Para qué son estas nuevas clases??
ColapsarToolBarLayout
Esta es una nueva vista, diseñada específicamente para envolver el Barra de herramientas e implementar una barra de aplicaciones colapsada. Al usar el ColapsarToolBarLayout Clase, debes prestar especial atención a los siguientes atributos:
aplicación: contentScrim
Este atributo especifica el color que se muestra cuando está totalmente contraído.
Estos atributos especifican los márgenes del título expandido. Son útiles si planeas usar el setDisplayHomeAsUpEnabled Método en tu actividad y rellena los nuevos espacios creados alrededor del título..
Botón de acción flotante
El botón de acción flotante es un componente importante de las aplicaciones de Diseño de materiales. Ahora puede incluir botones de acción flotantes en su diseño con solo unas pocas líneas de código. Puedes usar el aplicación: fabSize atributo para elegir entre dos tamaños diferentes, estándar (56dp) y mini (40dp). Estándar es el tamaño predeterminado.
El efecto de desaparición se logra automáticamente anclando el botón de acción flotante a la AppBarLayout utilizando la aplicación: layout_anchor atributo. También puede especificar la posición relativa a este anclaje utilizando el aplicación: layout_anchorGravity atributo.
Antes de ejecutar el proyecto, debemos especificar en la actividad que el ColapsarToolBarLayout va a mostrar el título en lugar de la Barra de herramientas. Eche un vistazo al siguiente fragmento de código para aclararlo..
Ejecuta el proyecto para ver la tercera técnica de desplazamiento en acción..
6. Técnica de desplazamiento 4
Esta técnica de desplazamiento utiliza la extensión AppBarLayout, Se muestra en la técnica anterior, para visualizar una imagen. Puedes ver esta técnica en el siguiente video..
Para esta técnica, voy a reutilizar el diseño anterior y modificarlo ligeramente:
En este diseño, hice las siguientes modificaciones:
los android: fondo atributo fue eliminado de la AppBarLayout. Porque el ImageView va a llenar este espacio, no hay necesidad de tener un color de fondo.
los aplicación: expandidoTitleMarginStart y aplicación: expandidoTitleMarginEnd Los atributos fueron eliminados, porque no estamos usando el setDisplayHomeAsUpEnabled metodo en la actividad.
Un ImageView fue añadido antes de la Barra de herramientas. Esto es importante para evitar que el AppBarLayout muestra una parte de la imagen en lugar del color primario cuando se contrae.
Es posible que también hayas notado que ImageView tiene el aplicación: layout_collapseMode atributo. El valor del atributo se establece en paralaje Para implementar el desplazamiento de paralaje. Además, también podría añadir el aplicación: layout_collapseParallaxMultiplier atributo para establecer un multiplicador.
Estos son todos los cambios que debe hacer para que esta técnica de desplazamiento funcione sin problemas en su aplicación. Ejecuta el proyecto para ver esta técnica de desplazamiento en acción..
7. Técnica de desplazamiento 5
Para esta técnica de desplazamiento, el espacio de la aplicación se superpone con el contenido de la aplicación y se desplaza fuera de la pantalla cuando se desplaza el contenido. Puedes ver esta técnica en acción en el siguiente video..
Para esta técnica, puede reutilizar el diseño de la técnica anterior, con algunas pequeñas modificaciones.
Para este diseño:
los ImageView y el Botón de acción flotante dentro de ColapsarToolbarLayout fueron eliminados. Esta técnica no requiere una imagen..
En el ColapsarToolbarLayout, la aplicación: contentScrim atributo fue reemplazado con el android: fondo atributo. Hacemos esto, porque el color de fondo debe coincidir con el Barra de herramientas color de fondo muy bien al desaparecer.
los android: fondo atributo fue añadido a la Barra de herramientas.
los aplicación: behavior_overlapTop atributo fue añadido a la RecyclerView. Este es el atributo más importante para esta técnica de desplazamiento, ya que este atributo especifica la cantidad de superposición que la vista debe tener con el AppBarLayout. Para que este atributo tenga efecto, debe agregarse a la misma vista que tiene el aplicación: layout_behavior atributo.
Si intenta utilizar esta técnica de desplazamiento con estas modificaciones, el diseño resultante no tendrá un título en la Barra de herramientas. Para resolver esto, podrías crear un Vista de texto y agregarlo a la Barra de herramientas programáticamente.
TextView text = new TextView (esto); text.setText (R.string.title_activity_technique5); text.setTextAppearance (this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse); toolbar.addView (texto);
Conclusión
Tenga en cuenta que no necesita implementar cada una de estas técnicas en su aplicación. Algunos serán más útiles para su diseño que otros. Ahora que sabes cómo implementar cada uno, puedes elegir y experimentar con ellos..
Espero que hayas encontrado este tutorial útil. No olvides compartirlo si te ha gustado. Puedes dejar tus comentarios y preguntas abajo..
Share
Accentsconagua
