overview
The linear layout in Compose corresponds to the LinearLayout in the Android traditional view. The difference is that Compose divides the layout into Column and Row according to the orientation. Corresponds to the case of orientation = "horizontal" in the traditional view LinearLayout. Since the layout of the two internal elements in the parent container and the way they are arranged are different, dividing into two components helps to provide a type-safe Modifier modifier. The frame layout in Compose corresponds to the FrameLayout in Android's traditional View, which allows its subcomponents to be stacked in sequence.
Example analysis
1. Linear layout
In Compose, linear layout is divided into Column and Row according to different usage scenarios. Column is a vertical linear layout component, and Row is a horizontal linear layout component.
1.1 Column components
@Composable
inline fun Column(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: @Composable ColumnScope.() -> Unit
)
The above is the parameter list of Column, among which the verticalArrangement and horizontalAlignment parameters can help us arrange the vertical/horizontal position of the sub-items respectively. By default, the sub-items will be arranged vertically (Arrangment.Top) and horizontally to the left placement of children
We can use an example to see the use of 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)
)
}
}
operation result:
In the above code, we place the Text in the Column in the middle of the component through the verticalArrangement parameter, and then use the Modifier.align modifier to set the alignment rules of the subitems independently. Some people may ask here, isn’t there a horizontalAlignment parameter
? Why use Modifier.align in the horizontal direction? Because for the subitems in the vertical layout, Modifier.align can only set its position in the horizontal direction, whereas the subitems of the horizontal layout can only set its position in the vertical direction, such as the Column component we are introducing, when Column When there are multiple sub-items in the component, they are always arranged linearly in the vertical direction. If the sub-items are allowed to be set separately, there will be a bad situation. For example, there are three items A, B, and C in Column. If the configuration of A The alignment direction is Aligment.Bottom, and B is Aligment.Top. This is obviously impossible, so the vertical layout of Column's subitems can only be set through verticalArragnment.（注意：这里不是说Column只能使用verticalArragnment参数）
注意：在不给Column指定高度、宽度、大小的情况下，Column组件会默认包裹里面的子项，在这个时候我们是无法使用Column参数中的verticalArrangement或者horizontalAlignment来定位子项在Column中的整体位置的
1.2 Row component
The Row component can arrange the internal sub-items horizontally from left to right, and when used in conjunction with the Cloumn component, a rich and beautiful interface can be built. The following is an article card made using the Row component and the Column component, the code is as follows:
@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)
)
}
}
}
}
}
}
operation result:
As can be seen from the above code, the horizontalArrangement parameter of Row helps us reasonably configure the horizontal position of the button. It can be seen that in the icon part, the like and share buttons are aligned on the left and right ends. Arrangement defines many sub-item alignment methods, except Center (center), Start (horizontal to the left), End (horizontal to the right) and other common alignments There are also some alignment methods in specific scenarios, such as Space Between, Space Evenly, etc.
2. Frame Layout
2.1 Box components
The Box component is a layout component that can stack the child items in sequence in sequence. It is similar to the FrameLayout of the traditional layout in use. This is very simple. Let's look at the next piece of code to understand its use.
@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")
}
operation result:
2.2 Surface components
Surface is literally understood as a plane, and the same is true in Material Design design guidelines. We can place many components on this platform, and we can set the border, rounded corners, colors, etc. of this plane. For example, use Surface To achieve a card effect, the code is as follows:
@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 = "海塔灯")
}
}
}
}
operation result:
From the above code, we can see that we mainly write UI code in Surface, and Surface is mainly responsible for the shape, shadow, background, etc. of the entire component. Surface can help us decouple some code without having to add a lot to a single component The Modifier modifier method.
很多读者可能会有疑问有了Box为啥还要加一个Surface组件，其实Box和Surface组件还是有区别的，如果我们需要快速设置界面的形状，阴影，边框，颜色等，我们使用Surface会更好，因为这样可以减少Modifier的使用量。而如果我们只是需要简单设置界面背景颜色，大小，且需要简单布局下子项的位置，则可以使用Box
3.Spacer blank
In many cases, we need to leave a blank space between components. At this time, we can use the Spacer component provided by Compose to simply use a demo to show the use of 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))
}
}
operation result
From the above code, we can see another usage scenario of Spacer, which is to use Box to draw a placeholder rectangular block in the code. When there is no content, Spacer can be used instead.
Summarize
This article mainly talks about how to use linear layout and frame layout in Compose. In fact, it is very simple, and we need to practice more, without any skills. When we write Compose UI as proficiently as writing XML UI, our work efficiency will be greatly improved, and we can use less code to achieve more dazzling UI effects, and Kotlin and Java can also be used in combination. Now I’m using Compose to write the test interface, which is very convenient. I recommend readers to start using Compose to write the interface and Java to write functions. Those who use Kotlin can use Compose more conveniently. , a language that completes the interface and functions is really cool.