Diseño de diseño personalizado en Jetpack Compose | de Saurabh Pantalones | junio 2022

¡Acostumbrarse a!https://dar-al-sabah.com/ Recientemente me dieron un diseño solo como referencia para la pantalla de inicio de sesión, que era una pantalla simple pero tenía algunas curvas. Así que terminé intentándolo solo con fines de estudio. La pantalla se veía asíLo interesante aquí es la forma en que los dos contenedores están alineados en diagonal. Así que pensé en desarrollarlo. Veamos cómo se hace. Así que dividamos los dos contenedores separados en diagonal como Inicio de sesión e Inicio de sesión. Determinaremos su forma uno por uno. En general, ambos contenedores son rectángulos con esquinas redondeadas, excepto por una esquina que está doblada en diagonal. Para crear tal forma, ahora podemos crear caminos individuales para ambos y darles la forma que queremos. Crearemos una clase CurvedShape que amplíe la clase Shape de la biblioteca de gráficos Composable. Anula una función llamada createOutline donde proporcionamos nuestra ruta personalizada para los contenedores. return Esquema.Generic(ruta =si (tipo == CurveType.LTR) ltrCurve(tamaño)else rtlCurve(tamaño))}}Creamos una enumeración para CurveType. El contenedor de registro tiene una curva LTR (de izquierda a derecha) y el contenedor de inicio de sesión tiene una curva RTL (de derecha a izquierda). Bien, ahora vamos a crear nuestras funciones de ruta para ambos contenedores.

Trayectoria de la curva LTR

En este camino, conectamos la esquina inferior derecha con la esquina inferior izquierda en diagonal. Nombraremos cada esquina como C1, C2, C3 y C4 comenzando desde la esquina superior izquierda como se muestra a continuación.En nuestra implementación de ruta LTR, ahora comenzamos a dibujar un arco en C1 en la esquina superior izquierda del contenedor con un radio predefinido. Luego trazamos una línea de C1 a C2. Desde C2 creamos un arco a C3 y desde C3 conectamos el arco al arco C4 en un ángulo lo suficientemente inclinado para adaptarse a nuestro diseño. Y devolvemos esta ruta en nuestra función CurvedShape createOutline para el tipo LTR. Finalmente, colocamos esta forma en nuestro cuadro de inicio de sesión en la capa de gráficos.Box(modifier = modifier.graphicsLayer {forma = CurvedShape(CurveType.LTR)clip = true}.background(Color.Cyan)) Si configura este componible en el contenido principal y ejecuta la aplicación, obtendrá el siguiente resultadoHemos creado nuestro formulario de registro deseado. Ahora podemos agregarle elementos y listo.

Trayectoria de la curva RTL

De la misma manera que la curva LTR, podemos crear nuestra forma RTL. En este caso, nuevamente consideramos cuatro esquinas como C1, C2, C3 y C4 como se muestraNuevamente creamos el arco C1 y lo conectamos a C2 y C2 a C3 y finalmente a C4. Y devolvemos esta ruta en nuestra función CurvedShape createOutline para el tipo RTL. Finalmente, colocamos esta forma en nuestro cuadro de inicio de sesión en la capa de gráficos.Box(modifier = modifier.graphicsLayer {forma = CurvedShape(CurveType.RTL)clip = true}.background(Color.Cyan)) Si configura este componible en el contenido principal y ejecuta la aplicación, obtendrá el siguiente resultado¡¡Grande!! Así que creamos las formas que queríamos para nuestros contenedores. Pero el mayor desafío viene ahora, donde debemos ajustarlos para que las diagonales se alineen correctamente entre sí. Ahora, si los configura en una columna, el contenedor de inicio de sesión se colocará debajo de la parte inferior del contenedor de registro y aparecerán de la siguiente maneraEntonces, ¿cómo vamos a contratarlos según sea necesario? ¡Asi que! Para hacer esto, necesitamos crear un modificador de diseño personalizado que tome las coordenadas x e y como @Composablefun Modifier.placeAt (x: Int, y: Int,) = diseño { Métricas, Restricciones ->val placeable = mensurables.measure(restricciones)layout(placeable.width, placeable.height) {colocable.placeRelative(x,y)}}Ahora nombremos este modificador para nuestro inicio de sesión y contenedores de inicio de sesión de la siguiente manera: dado que el contenedor de inicio de sesión tiene una altura de 600 dp, establecemos el límite para el contenedor de inicio de sesión en 510 dp, que es aproximadamente lo que necesitamos. ¡Bam! Finalmente creamos nuestro diseño deseado. Puede consultar el repositorio de github y bifurcarlo para jugar.