descripción general
El diseño lineal en Compose corresponde al LinearLayout en la vista tradicional de Android. La diferencia es que Compose divide el diseño en Columna y Fila según la orientación. Corresponde al caso de orientación = "horizontal" en la vista tradicional LinearLayout. Dado que el el diseño de los dos elementos internos en el contenedor principal y la forma en que se organizan son diferentes, la división en dos componentes ayuda a proporcionar un modificador Modifier con seguridad de tipos. El diseño del marco en Compose corresponde al FrameLayout en la vista tradicional de Android, que permite que sus subcomponentes se apilen en secuencia.
Ejemplo de análisis
1. Diseño lineal
En Compose, el diseño lineal se divide en Columna y Fila según los diferentes escenarios de uso. Columna es un componente de diseño lineal vertical y Fila es un componente de diseño lineal horizontal.
1.1 Componentes de la columna
@Composable
inline fun Column(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: @Composable ColumnScope.() -> Unit
)
Lo anterior es la lista de parámetros de Columna, entre los cuales los parámetros verticalArrangement y horizontalAlignment pueden ayudarnos a organizar la posición vertical/horizontal de los subelementos respectivamente. De manera predeterminada, los subelementos se organizarán verticalmente (Arrangment.Top) y horizontalmente a la izquierda colocación de los niños
Podemos usar un ejemplo para ver el uso de Column
@Composable
fun LinearLayoutDemo() {
Column(
modifier = Modifier
.border(1.dp, color = Color.Red)
.size(150.dp),
verticalArrangement = Arrangement.Center
) {
Text(
text = "Hello World",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "JetPack",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "zhongxj",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
}
}
resultado de la operación:
En el código anterior, colocamos el texto en la columna en el medio del componente a través del parámetro verticalArrangement, y luego usamos el modificador Modifier.align para establecer las reglas de alineación de los subelementos de forma independiente. Algunas personas pueden preguntar aquí, ¿no es así? hay un parámetro horizontalAlignment
?¿Por qué usar Modifier.align en la dirección horizontal? Porque para los subelementos en el diseño vertical, Modifier.align solo puede establecer su posición en la dirección horizontal, mientras que los subelementos del diseño horizontal solo pueden establecer su posición en la dirección vertical, como el componente Columna que estamos introduciendo, cuando Columna Cuando hay varios subelementos en el componente, siempre se organizan linealmente en la dirección vertical. Si se permite configurar los subelementos por separado, habrá una mala situación. Por ejemplo, hay tres elementos A, B y C en Columna. Si la configuración de A La dirección de alineación es Alineación.Inferior y B es Alineación.Superior. Esto es obviamente imposible, por lo que el diseño vertical de los subelementos de la Columna solo se puede establecer a través de verticalArragnment.（注意：这里不是说Column只能使用verticalArragnment参数）
注意：在不给Column指定高度、宽度、大小的情况下，Column组件会默认包裹里面的子项，在这个时候我们是无法使用Column参数中的verticalArrangement或者horizontalAlignment来定位子项在Column中的整体位置的
1.2 Componente de fila
El componente Fila puede organizar los subelementos internos horizontalmente de izquierda a derecha y, cuando se usa junto con el componente Cloumn, se puede crear una interfaz rica y hermosa. La siguiente es una ficha de artículo realizada con el componente Fila y el componente Columna, el código es el siguiente:
@Composable
fun ArticleCard() {
Surface(
shape = RoundedCornerShape(8.dp),
modifier = Modifier
.padding(horizontal = 12.dp)
.fillMaxWidth(),
elevation = 10.dp,
) {
Surface(modifier = Modifier.padding(12.dp), color = Color(0xeeeeeeee)) {
Column(modifier = Modifier.padding(12.dp)) {
Text(
text = "JetPack Compose",
style = MaterialTheme.typography.h6
)
Spacer(modifier = Modifier.padding(vertical = 5.dp))
Text(
text = " Jetpack Compose是第一个使用Kotlin正在开发中的大型项目," +
"因此Android团队正在探索Kotlin API指南的新世界,以创建一组特定于Compose API的指南," +
"该工作仍在进行中,仍然有很长的路要"
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
IconButton(onClick = {
/*TODO*/ }) {
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
IconButton(onClick = {
/*TODO*/ }) {
Icon(
painterResource(id = R.drawable.comment),
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
IconButton(onClick = {
/*TODO*/ }) {
Icon(
painterResource(id = R.drawable.share),
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
}
}
}
}
}
resultado de la operación:
Como se puede ver en el código anterior, el parámetro horizontalArrangement de Row nos ayuda a configurar razonablemente la posición horizontal del botón. Se puede ver que en la parte del icono, los botones Me gusta y Compartir están alineados en los extremos izquierdo y derecho. La disposición define muchos métodos de alineación de subelementos, excepto Centro (centro), Inicio (horizontal a la izquierda), Fin (horizontal a la derecha) y otras alineaciones comunes También existen algunos métodos de alineación en escenarios específicos, como Espacio entre, Espacio uniforme, etc.
2. Disposición del marco
2.1 Componentes de la caja
El componente Box es un componente de diseño que puede apilar los elementos secundarios en secuencia en secuencia. Es similar al FrameLayout del diseño tradicional en uso. Esto es muy simple. Veamos la siguiente pieza de código para comprender su uso.
@Composable
fun BoxDemo(){
Box(modifier = Modifier
.size(150.dp)
.background(Color.Green))
Box(modifier = Modifier
.size(80.dp)
.background(Color.Red))
Text(text = "Hello World")
}
resultado de la operación:
2.2 Componentes de la superficie
La superficie se entiende literalmente como un plano, y lo mismo es cierto en las pautas de diseño de Material Design. Podemos colocar muchos componentes en esta plataforma, y podemos establecer el borde, las esquinas redondeadas, los colores, etc. de este plano. Por ejemplo, use Superficie Para lograr un efecto de tarjeta, el código es el siguiente:
@Composable
fun SurfaceDemo() {
Surface(
shape = RoundedCornerShape(8.dp),
elevation = 10.dp,
modifier = Modifier
.width(300.dp)
.height(100.dp),
color = Color.Gray
) {
Row(modifier = Modifier.clickable {
}) {
Image(
painter = painterResource(id = R.drawable.portrait),
contentDescription = null,
modifier = Modifier.size(100.dp),
contentScale = ContentScale.Crop
)
Spacer(modifier = Modifier.padding(horizontal = 12.dp))
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.Center
) {
Text(text = "zhongxj", style = MaterialTheme.typography.h6)
Spacer(modifier = Modifier.padding(vertical = 8.dp))
Text(text = "海塔灯")
}
}
}
}
resultado de la operación:
A partir del código anterior, podemos ver que principalmente escribimos código de interfaz de usuario en Surface, y Surface es principalmente responsable de la forma, la sombra, el fondo, etc., de todo el componente. Surface puede ayudarnos a desacoplar parte del código sin tener que agregar mucho a un solo componente El método modificador Modifier.
很多读者可能会有疑问有了Box为啥还要加一个Surface组件，其实Box和Surface组件还是有区别的，如果我们需要快速设置界面的形状，阴影，边框，颜色等，我们使用Surface会更好，因为这样可以减少Modifier的使用量。而如果我们只是需要简单设置界面背景颜色，大小，且需要简单布局下子项的位置，则可以使用Box
3. Espaciador en blanco
En muchos casos, necesitamos dejar un espacio en blanco entre los componentes. En este momento, podemos usar el componente Spacer proporcionado por Compose para simplemente usar una demostración para mostrar el uso de Spacer.
@Composable
fun SpacerDemo(){
Row {
Box(modifier = Modifier
.size(100.dp)
.background(Color.Green))
Spacer(modifier = Modifier.width(20.dp))
Box(modifier = Modifier
.size(100.dp)
.background(Color.Yellow))
Spacer(modifier = Modifier.weight(1f))
Box(modifier = Modifier
.size(100.dp)
.background(Color.Magenta))
}
}
resultado de la operación
Del código anterior, podemos ver otro escenario de uso de Spacer, que es usar Box para dibujar un bloque rectangular de marcador de posición en el código.Cuando no hay contenido, se puede usar Spacer en su lugar.
Resumir
Este artículo habla principalmente sobre cómo usar el diseño lineal y el diseño de marcos en Compose. De hecho, es muy simple y necesitamos practicar más, sin ninguna habilidad. Cuando escribimos Compose UI tan eficientemente como escribimos XML UI, la eficiencia de nuestro trabajo mejorará enormemente y podemos usar menos código para lograr efectos de UI más deslumbrantes, y Kotlin y Java también se pueden usar en combinación. para escribir la interfaz de prueba, lo cual es muy conveniente. Recomiendo a los lectores que sigan adelante. Quienes usan Java pueden usar Compose para escribir interfaces y Java para escribir funciones, mientras que quienes usan Kotlin pueden usar Compose de manera más conveniente. , un lenguaje que completa la interfaz y las funciones son realmente geniales.