Descripción general de la biblioteca de soporte de diseño de Android

Introducción

Durante Google I / O 2015, Google presentó la Biblioteca de soporte de diseño para desarrolladores de Android. Esta biblioteca facilita a los desarrolladores la implementación de más conceptos de Diseño de materiales en sus aplicaciones, ya que muchos elementos clave no estaban disponibles inicialmente de forma inmediata. Además de ser fácil de usar, la biblioteca de soporte de diseño es compatible con API 7. La biblioteca de soporte de diseño se puede incluir en sus proyectos de Android importando la dependencia de Gradle.

compilar 'com.android.support:design:22.2.0'

1. Componentes visuales

Hay dos categorías principales de herramientas en la Biblioteca de soporte de diseño:

  • componentes visuales
  • componentes de movimiento

Comenzaremos echando un vistazo a los nuevos componentes visuales disponibles para agregar brillo a sus aplicaciones.

Entrada de texto de material

Editar texto Las vistas han estado en Android desde el principio, y aunque son fáciles de usar, en realidad no han cambiado mucho. Con la biblioteca de soporte de diseño, Google ha introducido una nueva vista de contenedor llamada TextInputLayout. Esta nueva vista agrega funcionalidad al estándar Editar texto, como el soporte para mensajes de error y sugerencias animadas para ayudar a que su interfaz de usuario se abra..

Como se muestra en el fragmento de abajo, TextInputLayout Puede incluirse en su archivo de diseño como una envoltura para un estándar Editar texto.

  

Gianluca Segato echará un vistazo más de cerca al TextInputLayout componente en un próximo tutorial.

Botones de acción flotante

Uno de los componentes de interfaz de usuario más predominantes en las aplicaciones de Diseño de materiales es el botón de acción flotante. Desde su introducción, los desarrolladores han tenido que crear estos botones desde cero o elegir una de las muchas bibliotecas de terceros diseñadas específicamente alrededor de estos botones..

Con la biblioteca de soporte de diseño, los botones de acción flotantes pueden incluirse en un diseño y anclarse a una parte de la pantalla con unas pocas líneas simples de XML. Cada botón es fácilmente personalizable con iconos y colores. Dos tamaños están disponibles, estándar (56dp) y mini (40dp). Una de las mayores ventajas es que Google ahora admitirá estos botones a medida que evolucione su diseño..

Componentes de navegación

Mientras ViewPager y DrawerLayout componentes han estado disponibles por un tiempo a través de la biblioteca de soporte v4, Google los ha ampliado al proporcionar dos nuevos widgets relacionados. La primera es una versión oficial de la biblioteca ViewPagerIndicator comúnmente utilizada por Jake Wharton llamada TabLayout. El segundo es el NavigationView, que proporciona soporte para vistas de encabezado de cajón.

TabLayout

TabLayout Los componentes pueden tener contenido agregado manualmente en el código mediante el uso de uno de los addTab metodos Echa un vistazo al siguiente ejemplo..

tabLayout.addTab (tabLayout.newTab (). setText ("Tab 1")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 2")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 3"));

Alternativamente, puedes asociar TabLayout componentes con un ViewPager. Esto se logra llamando setupWithViewPager (), pasando en el ViewPager como el primer y único argumento. Esta es otra forma de cambiar secciones en el ViewPager. se debe notar que getPageTitle () necesita ser anulado al usar TabLayout con un ViewPager para dar a cada pestaña un nombre propio.

NavigationView

NavigationView Es un nuevo widget que amplía la funcionalidad del DrawerLayout. Los desarrolladores ahora pueden agregar diseños de encabezado al cajón y marcar las secciones seleccionadas con este componente fácil de usar.

Además de esto, ahora es muy sencillo crear secciones y subsecciones en el cajón a través de los archivos de recursos del menú. Para empezar, un NavigationView simplemente necesita estar asociado con una DrawerLayout en XML.

   

Tostadas mejoradas

Mientras que la tostada Este mensaje ha sido un elemento básico de Android durante años, un nuevo widget de interfaz de usuario llamado Snackbar está disponible para proporcionar una funcionalidad similar con un aspecto mejorado. No solo el Snackbar Presente la información al usuario durante un breve período de tiempo, también es compatible con una sola acción para agregar funcionalidad basada en el contexto a sus aplicaciones y se puede descartar con un gesto de deslizamiento.

Snackbar se implementa de manera similar a tostada, aunque se debe tener en cuenta que crear uno requiere una vista que se pueda usar para encontrar la parte inferior de la pantalla de la aplicación.

Snackbar.make (ver, "Acción", Snackbar.LENGTH_LONG) .setAction ("¡Acción!", Nuevo View.OnClickListener () @Override public void onClick (View v) Log.e ("App", "Action! ");   ) .show();

2. Componentes de movimiento

Cómo se comporta y anima una interfaz de usuario es muy importante en Material Design. Para facilitar esto, Google ha lanzado múltiples componentes en la Biblioteca de Soporte de Diseño que ayudan con casos de uso comunes. Kerry Perez-Huanca analizará este aspecto de la Biblioteca de soporte de diseño en un próximo tutorial..

Vistas reactivas

Es posible que haya notado en el ejemplo anterior que Botón de acción flotante subió cuando el Snackbar vista apareció Esto se hace usando un nuevo widget llamado CoordinatorLayout, que envuelve las vistas que deben cambiarse para dejar espacio para otras vistas.

Vuelta rápida y barras de herramientas mejoradas

Muchos desarrolladores han solicitado una forma más fácil de mostrar una imagen de paralaje que funciona con un patrón de diseño de retorno rápido, que desaparece o reaparece a medida que el usuario se desplaza. Puedes ver este comportamiento en Play Store para ver las listas de aplicaciones. Para que los desarrolladores implementen esto sin pasar mucho tiempo escribiendo código redundante, Google ha lanzado ColapsarToolBarLayout y AppBarLayout puntos de vista. Usando varias opciones dentro de estos widgets, los desarrolladores pueden fijar vistas en la parte superior de la pantalla o especificar cuándo esas vistas deberían ser visibles a medida que el usuario se desplaza.

Conclusión

La biblioteca de soporte de diseño ha traído muchas herramientas esperadas a Android. Cuando se combina con la biblioteca de AppCompat, es mucho más fácil agregar Material Design a las aplicaciones mientras se mantiene la compatibilidad con versiones anteriores.

Se pueden encontrar muchos ejemplos de cómo trabajar con estos nuevos componentes en la aplicación de referencia oficial de Google, CheeseSquare, y Tuts + continuará proporcionando tutoriales detallados sobre cómo implementar estas nuevas funciones..