Diseños personalizados con Jetpack Compose (Deep Dive) | de ABHINAV CHAUHAN | mayo 2022

A veces, nuestro requisito necesita algo más que diseños listos para usar. Por ejemplo, en Jetpack Compose queremos colocar componibles como en la imagen de abajo.No hay un diseño existente que pueda colocar tus componibles de esta manera.

Entonces, ¿qué hacemos cuando algo no existe? (Crear en ser) .

Así que escribamos nuestro propio diseño personalizado, al que llamaremos OverlappingRow.

A primera vista parece uno La línea Componible. Echemos un vistazo al código fuente de Row y veamos si podemos obtener ayuda. Una línea declara 3 parámetros

1. modificador que está más allá del alcance de este artículo, obtenga más información aquí
2. (disposición horizontal y disposición vertical) Básicamente, existen diferentes tipos de arreglos que los niños pueden usar para registrar sus datos también fuera del alcance de este artículo, obtenga más información aquí

3. contenido Son otros componibles los que pones en la fila. Luego hay una llamada a un diseño Componible que hace el resto del trabajo usando los argumentos. Un componible de diseño decide cómo se debe colocar el contenido de un componible como un grupo que sigue a todos los componibles predefinidos La línea, Separar , Caja.Que diseño necesita uno política de medida para tomar estas decisiones. Define cómo se mide y presenta un diseño, por lo que es el bloque de construcción principal tanto para la forma predefinida fila, columna, caja y diseños personalizados. Si prestaste atención al código fuente anterior La línea también obtiene una instancia de política de medida llamando al método rowMeasurePolicy().

MeasurePolicy es una interfaz. El único método abstracto que necesitamos anular es MeasureScope.measure(mensurables: List,restricciones: Restricciones): Resultado de la medida».

El método de medida () recibe una lista de elementos medibles (Measurables), que es una representación de elementos componibles secundarios, y las restricciones representan la restricción sobre el tamaño de los elementos componibles secundarios impuesta por el elemento componible principal y devuelve un Resultado de medida Y qué diseño Componible utilizado para colocar nuestro diseño en el tamaño correcto. En la línea MeasurePolicy() del código anterior, el La línea composable maneja la medida y la ubicación de sus elementos componibles secundarios, lo cual es un poco complejo, por lo que no podemos cubrirlo en este artículo, pero escribiremos el nuestro. politica de accion esto es mucho más simple que el de Row política de medida porque no ofrece todas las funciones que ofrece Row.

Nota: OverlappingFactor decide cuánto de cada componente secundario es visible antes de que el siguiente lo superponga. 1,0 significa totalmente visible 0,7 significa 70 % visible 0,5 significa 50 % visible y así sucesivamente.

Entendamos cómo funciona.

1. Primero medimos a todos los niños y obtenemos Colocable Los objetos también son representaciones de componibles secundarios, pero tienen un tamaño que necesitamos Colocable Porque un Colocable tiene métodos para colocar un componible teniendo en cuenta sus coordenadas x, y y z.
2. Llamamos al método layout(), que devuelve un Resultado de medida Este es el tipo de retorno del método de medida(). El método layout() necesita saber cuán ancho y alto queremos que sea nuestro diseño, así que calculamos el ancho y la altura y los pasamos a layout() como argumentos.
3. layout() también necesita un bloque de ubicación donde escribimos nuestra lógica de ubicación. Es análogo a onLayout() en el mundo de la vista. En el último paso escribimos la lógica juntos.

Ahora podemos seguir adelante y escribir nuestro hábito. línea superpuesta componible

propósito de uso

resultado

A continuación puede ver cómo implementar el diseño de flujo de la misma manera

Muchas gracias.