Jetpack Compose Interop, parte 1: uso de vistas y diseños tradicionales al escribir con AndroidView | según Dai | Octubre de 2020

EntoEste nombre no está mal formateado, en realidad es una clase muy conveniente en la biblioteca Jetpack Compose que nos permite usar fácilmente vistas tradicionales, ViewGroups, etc. Componentes de la interfaz de usuario. Así que veamos un ejemplo:

En el extracto anterior, puede ver que usamos el archivo de composición ʻAndroidView`, que nos permite dibujar y dentro de nuestro . los bere un parámetro lambda, donde puede devolver cualquier . Para que ya pueda ver cómo podemos mostrar fácilmente el tradicional dentro de la interfaz de usuario de Compose creando en nuestro . También lo conseguimos cómodamente en nuestro bloque para que podamos usarlo fácilmente para formar nuestras opiniones.

Ahora, cualquiera que haya jugado con Jetpack Compose probablemente piense: «¿Por qué le gustaría utilizar TextView en Compose?». Y tendrían derecho a preguntar, porque Redactar ya tiene uno el texto se puede renderizar.

Así que tomemos un ejemplo menos imaginario. es útil.

Probablemente pueda adivinar por el titular hacia dónde va. Todos usamos bibliotecas y SDK en nuestras aplicaciones, y estas bibliotecas apenas pueden sobrescribir todo en Compose. Al menos no en un futuro próximo. Los ejemplos comunes incluyen cosas como un SDK de mapas o reproductores multimedia como ExoPlayer.

Con esto en mente, tomemos un ejemplo de un mapa para girar. usaré aquí mapas para este ejemplo, pero funcionará igual de bien con Google Maps. También me perdí el tutorial de configuración aquí mapas, porque esta publicación no se trata de eso, pero puede explorar fácilmente el Lite SDK de acuerdo con su documentación aquí

El SDK de Here Maps Lite nos proporciona: un componente tradicional para Android que queremos representar en nuestra interfaz de usuario de escritura. Así que creemos el nuestro plegado que simplemente envuelve usando el mismo la clase que usamos arriba con ejemplo.

Y luego usemos nuestro nuevo se puede componer en actividades de pantalla completa.

MapView se puede componer en actividad de pantalla completa

Y seamos sinceros, tenemos el mapa Aquí que se muestra en la interfaz de usuario de escritura sin tener que escribir nuestra propia interfaz de usuario del mapa.

Este ejemplo es útil para averiguar qué podemos hacer y que es posible usar una vista anterior de Android a partir de dependencias que no se sobrescribirán en Jetpack Compose en un futuro cercano, pero aún es un poco simple, así que usemos el real más complejo actual. interfaz de usuario mundial.

Durante el año pasado, estuve trabajando en una guía de televisión en Plex. Tomó mucho trabajo y es algo que se mejora y mejora constantemente con nuevas funciones.

TVGuideView

En la aplicación Plex es esencialmente compuesto una clase que incluye muy bien una guía de televisión para apoyar la televisión y los dispositivos móviles. Entonces hagamos lo mismo que hicimos antes con los mapas (crearemos una vista plegable), pero esta vez con

Ahora tenemos nuestros nuevos usémoslo en nuestra actividad.

TVGuideVIew usado en Jetpack Compose

Y es nuestro original ahora se puede utilizar en nuestra interfaz de usuario Compose sin necesidad de reescribir. Y como ahora estamos en Compose, podemos crear y decorar fácilmente la interfaz de usuario a su alrededor utilizando componentes de Compose. Así que agreguemos ConstraintLayout (Compose) y un título tonto a nuestra interfaz de usuario de Compose.

TVGuideView con un título tonto.

Y eso es todo, úsalo cuando desee utilizar la vista tradicional en su interfaz de usuario de escritura. Eche un vistazo a la Parte 2 aquí, donde usamos una interfaz de usuario plegable dentro de los componentes tradicionales de la interfaz de usuario de Android.

El propósito de estas publicaciones de blog era mostrar más lo que es posible para la interoperabilidad de Compose. Puedo proporcionar más detalles, pero espero que esto y la Parte 2 brinden suficientes detalles para comenzar y pensar cómo podría adoptar e interoperar Compose en sus proyectos una vez que las cosas comiencen a estabilizarse. Y solo para recapitular:

  1. Utilizar AndroidView dibujar tradicional en su interfaz de usuario de escritura.
  2. Utilizar ComposeView/AbstractComposeView para renderizar la interfaz de usuario de Compose en Android tradicional con un diseño (como se describe en la Parte 2).

Deja una respuesta

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