Explorando las adiciones de la biblioteca de soporte de diseño de Android v28

Recientemente se anunció la versión 28 de la biblioteca de soporte de Android: dentro de la versión alfa actual hay una colección de nuevos componentes interesantes a los que ahora tenemos acceso. En este artículo, quiero echar un vistazo a las adiciones que se han realizado en la biblioteca de soporte en forma de componentes de vista de material.

Botón de material

El botón Material es un widget que se puede usar para mostrar un botón de estilo de material dentro de la interfaz de usuario de sus aplicaciones. Esta clase se extiende desde la clase AppCompatButton que probablemente ya esté utilizando en sus proyectos, pero ¿qué hace que esto sea diferente? Fuera de la caja, este botón estará diseñado con el aspecto de una naturaleza material sin la necesidad de personalizarlo usted mismo usando la bandera de estilo. Podemos usar la clase MaterialButton tal como es y, desde nuestro punto de vista, ya tendrá el aspecto y la sensación material que buscamos, véalo como una clase conveniente.

Podemos agregar este botón a nuestro archivo de diseño de la siguiente manera:

Por defecto, esta clase utilizará el color de acento de su tema para el color de fondo lleno de botones junto con el blanco para el color de texto de los botones. Si el botón no está lleno, el color de acento de su tema se utilizará para el color del texto del botón, junto con un fondo transparente.

Si deseamos agregar más estilo a esto nosotros mismos, podemos hacerlo mediante el uso de una colección de atributos del estilo MaterialButton.

  • app: icon: se usa para definir un dibujo que se mostrará al comienzo del botón
  • app: iconTint: se usa para teñir el ícono en uso desde la aplicación: atributo icon
  • app: iconTintMode: define el modo que se utilizará para el ícono
  • app: iconPadding: relleno que se aplicará al icono en uso desde la aplicación: atributo icon
  • app: optionalPaddingLeftForIcon: define el relleno que se aplicará a la izquierda del icono en uso desde el atributo app: icon
  • app: optionalPaddingRightForIcon: define el relleno que se aplicará a la derecha del icono en uso desde el atributo app: icon
  • aplicación: rippleColor: el color que se usará para el efecto de ondulación del botón, este color se usará
  • app: backgroundTint: se usa para aplicar un tinte al fondo del botón. Si desea cambiar el color de fondo del botón, use este atributo en lugar del fondo para evitar romper el estilo del botón
  • app: backgroundTintMode: se usa para definir el modo que se utilizará para el tinte de fondo
  • aplicación: strokeColor: el color que se utilizará para el trazo del botón
  • app: strokeWidth: el ancho que se utilizará para el trazo del botón
  • aplicación: cornerRadius: se utiliza para definir el radio utilizado para las esquinas del botón

Chip

El componente de chip nos permite mostrar una vista de chip dentro de nuestro diseño. Esto es esencialmente un texto que tiene un fondo redondeado; el propósito de estos es mostrar al usuario alguna forma de recopilación de texto que puede o no ser seleccionable. Por ejemplo, estos podrían usarse para mostrar una lista de sugerencias seleccionables para el usuario en función del contexto actual dentro de su aplicación.

Podemos agregar un Chip a nuestro diseño de esta manera, utilizando el atributo app: chipText para configurar el texto que se mostrará en el chip:

También hay una colección de otros atributos que se pueden usar para diseñar aún más el chip:

  • app: checkable: se usa para declarar si el chip se puede alternar como seleccionado / no seleccionado. Si está deshabilitado, la verificación se comporta de la misma manera que un botón
  • aplicación: chipIcon: se usa para mostrar un icono dentro del chip
  • app: closeIcon: se usa para mostrar un icono de cierre dentro del chip

También podemos configurar algunos oyentes en nuestras instancias de chips, que pueden ser útiles para escuchar las interacciones de nuestros usuarios. Si nuestro chip es comprobable, es probable que deseemos escuchar cuándo se ha cambiado este estado de verificación. Podemos hacerlo utilizando el oyente setOnCheckedChangeListener:

some_chip.setOnCheckedChangeListener {botón, marcado ->}

Lo mismo se aplica cuando queremos escuchar la interacción con el ícono de cerrar cuando está en uso. Para esto, podemos utilizar la función setOnCloseIconClickListener para registrar eventos de interacción cercana:

some_chip.setOnCloseIconClickListener {}

Grupo de chips

Si estamos mostrando una colección de chips a nuestros usuarios, queremos asegurarnos de que estén agrupados correctamente dentro de nuestra vista. Para esto podemos hacer uso del componente de vista ChipGroup:

Si deseamos usar ChipGroup, solo necesitamos ajustar nuestras vistas de Chip en un componente primario de ChipGroup:



    

    

    // más fichas ...

Por defecto, sus vistas de Chip pueden aparecer un poco apretadas. Si es así, puede agregar algo de espacio a las vistas secundarias utilizando los siguientes atributos en el grupo de chips en sí:

  • aplicación: chipSpacing: agrega espaciado tanto al eje horizontal como al vertical
  • aplicación: chipSpacingHorizontal - Agrega espacio al eje horizontal
  • aplicación: chipSpacingVertical - Agrega espacio al eje vertical

También podemos declarar que nuestras vistas de Chip secundarias se muestren dentro de una sola línea dentro de nuestro contenedor ChipGroup. Usando la aplicación: atributo singleLine:

Al hacerlo, deberá envolver el ChipGroup en una vista de desplazamiento como HorizontalScrollView para que sus usuarios puedan desplazarse por los chips que se muestran:



    

        

        // más fichas ...
    

Vista de tarjeta de material

Es probable que en nuestras aplicaciones hayamos utilizado el componente CardView en algún momento. La biblioteca de soporte ahora contiene un componente llamado Vista de tarjeta de material, que nos proporciona una implementación de vista de tarjeta con estilo de material lista para usar.

La vista de tarjeta se puede agregar a su diseño de la siguiente manera:

    ... vistas de niños ...

Puede diseñar aún más la vista de tarjeta utilizando dos de los atributos que vienen con ella:

  • app: strokeColor: el color que se utilizará para el trazo dado, debe configurarse para mostrar un trazo
  • app: strokeWidth: el ancho que se aplicará al trazo de la vista

Además de estos dos atributos, aún puede diseñar la vista de tarjeta utilizando los atributos originalmente disponibles, como la aplicación: cardBackgroundColor, etc.

Barra de aplicaciones inferior

La barra de aplicaciones inferior es un nuevo componente que nos permite mostrar un componente similar a una barra de herramientas en la parte inferior de nuestro diseño. Esto nos permite mostrar los componentes a nuestro usuario de una manera que los hace más fáciles de interactuar que una barra de herramientas estándar.

Puede agregar la BottomAppBar a su archivo de diseño de la siguiente manera:

Parece que la barra inferior de la aplicación debe tener un menú asignado para que se muestre en la pantalla. Esto se puede hacer programáticamente así:

bottom_app_bar.replaceMenu (R.menu.main)

Cuando se trata de diseñar la barra de aplicaciones inferior, hay varios atributos que puede utilizar para hacerlo.

  • app: fabAttached: indica si se ha adjuntado o no una FAB a la barra de aplicaciones inferior. Puede adjuntar un fab usando la aplicación: layout_anchor en el componente FAB que desea adjuntar, usando la ID de la barra de aplicaciones inferior. Si se adjunta una FAB, se insertará en la barra de aplicaciones inferior, de lo contrario, la FAB permanecerá por encima de la barra de aplicaciones inferior.
  • app: fabAlignmentMode: declara la posición de la FAB que se ha adjuntado a la barra de aplicaciones inferior. Esto puede ser cualquiera de los dos extremos:

o centro:

  • app: fabCradleVerticalOffset: declara el desplazamiento vertical que se utilizará para el fab adjunto. Por defecto esto es 0dp:

Sin embargo, establecer un valor dp permitirá que la FAB se desplace verticalmente hacia arriba:

  • app: backgroundTint: se usa para aplicar un tinte al fondo de la vista. Si desea establecer el color de fondo de la vista, debe usarlo sobre el atributo android: background. Hacerlo asegurará que la temática de la vista permanezca estable.

Conclusión

En mi opinión, estas son algunas de las buenas adiciones a la biblioteca de soporte: estoy ansioso por poder usar componentes con temas de material de inmediato. También me entusiasma encontrar un caso de uso para utilizar la barra de aplicaciones inferior, pero estoy seguro de que hay algún tiempo antes de que la versión de la biblioteca de soporte sea estable antes de hacerlo. Como de costumbre, ¡me encantaría escuchar tus opiniones o comentarios sobre estos nuevos componentes!