Interpack Jetpack Compose, Parte 2: Uso de escritura en vistas y diseños tradicionales para Android con ComposeView | según Dai | Octubre de 2020

Veamos un ejemplo rápido para demostrarlo:

Entonces aquí creamos uno nuevo ComposeView y adjuntarlo al contenedor principal, tal como lo haríamos con cualquier View. Entonces usaremos setContent para renderizar la interfaz de usuario de Compose, y en este caso una simple Text plegable. ¡Es tan simple! Incluso podemos usarlo ComposeView también en diseños XML. Así que tomemos el mismo ejemplo, hagámoslo.

Nuestro activity_main.xml ahora contiene y ComposeView anidado dentro de un LinearLayout. Lo usamos para lo que hicimos antes, pero en lugar de agregar ComposeView tomamos manualmente la referencia y llamamos setContent agregue nuestro Text.

Y eso es todo, tenemos nuestra interfaz de usuario de Compose considerada tradicional View. Pero eso es un poco complicado. Mezclar estas dos cosas no es genial, y qué pasa si queremos hacer algo un poco más habitual.

Y como antes, podemos usar esto directamente en el código o en nuestro archivo de diseño.

Entonces ahora tenemos un habito MyComposeView un componente que genera una interfaz de usuario componible bajo el capó, ¡lo cual es bastante sorprendente! beneficio La ventaja es que podrá escribir nuevas IU en Compose y agregarlas a sus pantallas antiguas con una simple portada View lo que le permite mantener la coherencia en la base del código, lo cual es especialmente útil cuando no puede refactorizar todas las características y vistas a la vez.

Vamos un poco más lejos

En un nuevo ejemplo MyComposeView ahora exhibe un title campos que podemos usar para actualizar un valor de texto cuando queramos. No entraré en detalles aquí, pero solo notaré mutableStateOf la función creaStateobjetar que cuando es value se utiliza dentro de Compose, la interfaz de usuario se actualiza automáticamente si cambia el valor. Esto es exactamente lo que hicimos en el ejemplo anterior. text = titleText.value. diferente a LiveData no tiene que observar y establecer explícitamente los valores. Compose puede hacerlo por ti.

Ahora podemos usar nuestra herramienta de subtítulos donde queramos actualizar el título.

Y ahora vamos, ahora podemos configurar el texto para nuestro hábito AbstractComposeView sin exponer nada de Jetpack Compose a nuestras vistas y diseños más antiguos.

Pero es realmente un poco aburrido. Creemos algo un poco más interesante.

TV en vivo / canales recientes

Primero definimos un ChannelCard plegable y Channel clase de datos.

Nuestro ChannelCard es simple Card con bordes redondeados que contienen uno CoilImage. CoilImage no forma parte del kit de herramientas estándar de Compose, y para cualquiera que no lo sepa, existe una biblioteca Coil para cargar imágenes para Android. Simplemente lo usamos para mostrar el logotipo de canal de cada canal en la lista. Si quieres usar CoilImage Puedes cargar imágenes en tus proyectos, puedes aprender más aquí.

los ChannelCardsolo mostrará un canal por separado. Así que creemos ChannelCardRow plegable, que los dibuja en una lista horizontal.

Del extracto anterior puede ver nuestro ChannelCardRow es una lista horizontal perezosa simple (fila) que crea ChannelCard para cada canal.

Ahora que hemos definido todos nuestros componentes Compose, creemos el nuestro. AbstractComposeView implementación que nos permite mostrar nuestra lista de canales horizontal como un Android tradicional View.

Como puede ver, al igual que usamos antes mutableStateOf para nuestra lista Channel datos. Nuestro Content el método de anulación luego muestra yChannelCardRow conectado a State así que cada vez que configuramos los canales actuales, los dibujamos en la interfaz de usuario.

Ahora, para lo último, usemos el nuestro. ChannelCardRow implementación AbstractComposeView en nuestra actividad y cargar algunos canales de nuestra ViewModel.

Todo está involucrado y …

ChannelCardRow Pantalla de Android que muestra los canales

Y eso es todo, tenemos un pequeño y agradable reutilizable View que utiliza los mismos componentes reutilizables de Compose UI debajo del capó para mostrar una lista horizontal de canales de TV. Y una vez que comience a recibir más funciones de composición en su aplicación, puede eliminar las capas de sobre tradicionales a medida que se vuelven obsoletas.

  1. Utilizar AndroidView dibujar tradicional Viewen su interfaz de usuario de mecanografía (parte 1).
  2. Utilizar ComposeView/AbstractComposeView para renderizar la interfaz de usuario de Compose en Android tradicional Viewcon diseño.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *