Composición Deep Dive — 1. Composición | Por hongbeom | Desarrollado por hongbeom | Mar 2022
Veamos cómo funciona Jetpack Compose Layout con el video Deep Dive into Jetpack Compose Layout (Android Dev Summit21).
Este artículo es una traducción y arreglo de Deep Dive into Jetpack Compose Layout, uno de los videos de Android Dev Summit21.
El sistema de diseño de Compose está diseñado para hacer que los diseños personalizados sean fáciles de configurar, funcionen de manera eficiente y brinden un gran rendimiento.
Echemos un vistazo a cómo el modelo de diseño de Compose logra los objetivos anteriores.
Jetpack Compose cambia de estado a IU. ¿Cómo es esto posible?
Esto se logra en tres etapas: composición, maquetación y dibujo.
1. En la etapa de composición Composable Cree un árbol de interfaz de usuario ejecutando funciones y exportando la interfaz de usuario.
P.ej SearchResult Cuando se ejecuta la función componible, se crea el árbol de la interfaz de usuario que se muestra a la derecha. Por supuesto, también puede crear múltiples árboles con diferentes estados en su componible, incluida la lógica y el flujo de control.
La composición es una de las etapas del dibujo de la interfaz de usuario, pero en realidad es una interfaz.
El objeto de composición se devuelve desde la API que se usó originalmente para componer la interfaz de usuario (p. ej.: setContent).Tenemos este objeto de composición y queremos descartar aleatoriamente la IU y la composición. dispose Puede hacer esto llamando a un método.
cómo Composable Si crea una función, ¿puede identificarla y crear un árbol de interfaz de usuario? Composable Echemos un vistazo a las anotaciones.
Composable Las anotaciones se pueden usar en funciones, tipos, parámetros de tipo y captadores de propiedades, y son un componente esencial de las aplicaciones de Compose.
nosotros Composable Cuando anota una función o lambda, le dice a Compose que representa una transformación de los datos de la aplicación a un árbol o capa. Además, el tipo de función o expresión lambda ha cambiado. Composable diferentes funciones Composable Solo se puede llamar desde dentro de una función.
Debido a esta característica ComposableContextdescensor Composable pasado a una función, que ComposableContextLe permitirá almacenar información sobre ejecuciones anteriores de funciones que ocurrieron en la misma sección lógica del árbol de la interfaz de usuario.
Esta ComposableContext¿Qué es? ComposableContextSe utiliza para conectar lógicamente dos combinaciones. abstract es un tipo
CompositionContext Una instancia representa una referencia a la composición principal en una ubicación particular en el árbol de composición, y esta instancia se puede asignar a nuevas composiciones secundarias.a menos que las dos obras estén separadas por esta cita invalidatey puede ejecutar lógica como la transferencia de datos entre combinaciones.
Como referencia, el padre del compuesto raíz de nivel superior es RecomposerNo vieron. RecomposerEs una clase de programador que realiza la reorganización y aplica actualizaciones a una o más combinaciones.Esta RecomposerVeremos cómo queda con más detalle más adelante.
De hecho MainActivityusado para setContent La función se escribe de la siguiente manera.
ComponentActivityUna función de extensión definida como setContentsí parentGuau contentcomo parámetro.
También nosotros setContent desde el interior existingComposeView Mostrar la parte superior de la pantalla actual a través de una variable ViewGroupPuedes ver lo que buscas.
ComposeViewes una superclase AbstractComposeViewexiste setParentCompositionContext pasado como parámetro al método CompositionContextregistro, uso general parent Como no se pasan parámetros, se crea dentro de esta función. ComposeViewAkione ViewGroupserá; será
Luego ComposeViewGuau AbstractComposeViewqué papel
¿Que estas haciendo?
primero AbstractComposeViewvamos a ver.
AbstractComposeViewsomos familiares ViewGroupUsar heredar de Heredar de sus subclases Contenty Content Debe implementar una función.
De hecho ComposeViewsí Content Esta función se implementa de la siguiente manera.
pero ContentSi intenta agregar una vista sin usar (addView o llamar al método sobrecargado correspondiente) UnsupportedOperationException Tirará un error.
La vida útil del host que usa esta vista se interrumpe, por lo que la composición se descarta, o la composición se mantiene y se conecta/desconecta repetidamente a la vista. AbstractComposeViewy windowexiste ViewTreeLifecycleOwnerdebe ser incluido.
También puede eliminar la composición predeterminada o, si la vista fue originalmente windowSi no está conectado a disposeComposition Destruye la composición llamando requestLayout()llamada. (Dialog, Popupusado para setViewCompositionStrategyUsar ciclo de vida de cambio explícito ON_DESTROY También se puede utilizar al entrar en un estado. )
Vemos en la toma que la composición crea un árbol de interfaz de usuario. Si es así, ¿de qué estructura está hecho este árbol?
el primer sencillo Composable Veamos una función.
La función anterior se creó cuando creamos por primera vez el proyecto Compose. Composable Esta es una función.
Una generación Text Composable Si ingresas a la función Text -> BasicText -> CoreText -> Layout Puedes ver cuál es la estructura.
Esta Layout Composablevamos a ver
LayoutEs un componente central importante que se usa cuando se muestra la interfaz de usuario en Compose, y se explica en los comentarios.
El árbol de la interfaz de usuario descrito en el video anterior. Nodefinalmente visible. ReusableComposeNodeComo sugiere el nombre, una función que crea nodos reutilizables, Layoutrecibido como parámetro modifier, measurePolicy, contentse está pasando a este nodo.
Más adentro, ResuableComposeNode Veamos la implementación.
desde el interior currentComposerSe está trabajando mucho mirando este código, currentComposerLos nodos generados se pueden ver y procesar, como incluirlos en el árbol o actualizarlos.
luego esto currentComposerQuién es
existe como un atributo de nivel superior del archivo currentComposersí Composeratributo de tipo.
ver comentarios ComposerDescrito como una interfaz utilizada por el asistente de generación de código objetivo del complemento del compilador Compose Kotlin.
La peculiaridad de Compose es que Compose no es un procesador de anotaciones.. NOSOTROS @Composeable Anotación significa que el código se crea con la ayuda del complemento del compilador de Kotlin, en lugar de que el procesador de anotaciones lo detecte y genere el código.
ahora tenemos ComposerDescubrí que los nodos de interfaz de usuario son creados por .
Estos nodos son Composeratravesar Búfer de brechaAdministrado como una estructura de datos llamada Gap Buffer, que actualmente representa una colección con un índice o cursor, y se implementa en la memoria como una matriz. El espacio no utilizado dentro de la matriz se denomina espacio, y la inserción/eliminación de nodos se realiza mientras se mueve la posición del espacio.
Para obtener más información, consulte el siguiente enlace.
En la explicación vinculada anteriormente, la complejidad temporal de mover un espacio es O(n), y todas las operaciones (acceder/mover/insertar/eliminar) excepto mover un espacio toman un tiempo constante. Dijeron que eligieron esta estructura de datos porque, en promedio, estaban seguros de que la interfaz de usuario no cambiaría mucho la estructura. Al igual que la interfaz de usuario dinámica, los valores cambian con frecuencia, pero la estructura rara vez cambia.
Si observamos la clase ComposerImpl, en realidad es una implementación de Composer, SlotTable Hay una propiedad de tipo que usa el Gap Buffer mencionado anteriormente para almacenar datos sintéticos.
Arriba, vimos la fase de composición del sistema Compose Layout. Continuaremos escribiendo en la Parte 2 Diseño.
