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'
Hay dos categorías principales de herramientas en la Biblioteca de soporte de diseño:
Comenzaremos echando un vistazo a los nuevos componentes visuales disponibles para agregar brillo a sus aplicaciones.
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.
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..
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.
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();
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..
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.
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.
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..