In the previous article, we talked about the configuration of the Jetpack Compose environment, as well as some of the tools that Android Studio provides for improving the efficiency of Compose development. Let’s start with Jetpack Compose’s layout component. Let’s start with Column, Row, Box.

1: Vertical layout Column

Those of you who are learning Android know that there is a LinearLayout control that specifies whether the layout is horizontal or vertical. The use of Column is equivalent to a vertical layout.

@Composable
fun columnTest(a){
    Column {
        Text(text = "The first text control, I'm the longer text control.")
        Text(text = "Second text control")}}Copy the code

For example, in the code above, we arrange two text controls vertically. Simple to use, let’s look at some code inside the Column constructor. Let’s briefly explain how to write a few input arguments to a constructor.

@Composable
@OptIn(ExperimentalLayoutNodeApi::class, InternalLayoutApi::class)
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope. () - >Unit
){... }Copy the code
  • Modifier modifier. Please see this article for an introduction to Modifier
  • VerticalArrangement Arrangement can be specified in different ways, which indicate different meanings. The default Arrangement is arrangement. Top means as close as possible vertically to the Top of the spindle \
    • Arrangement.top Place the child object vertically so that it is as close to the Top of the spindle as possible.
    • Arrangement.bottom Place the child object vertically so that it is as close to the BOTTOM of the spindle as possible.
    • Arrangement.center aligns the child object as close to the CENTER of the main axis as possible.
    • SpaceBetween places children vertically so that they are evenly distributed along the main axis, with no space available before the first child or after the last. That means the first one is at the top and the last one is at the bottom. And the middle ones are evenly spaced.
    • Arrange. spaceinstituted places child objects vertically so that they are evenly spaced
    • Arrangement.spacearound places child objects vertically, with the first placed at the top x interval and the last at the bottom X interval. The middle ones are evenly spaced.

    Several properties are shown below:Found that the picture written by Kangkang is more intuitive, so the picture is directly referenced by Kangkang’s article For example, if the Column height is 200DP and the two text controls are less than 200DP, when bottom alignment is set, the two controls will be at the bottom of the Column

    @Preview()
@Composable
fun columnTest(a){
    Column(
        // Set the width of Column to 200dp
        modifier = Modifier.size(200.dp),
        // Set the bottom alignment
        verticalArrangement = Arrangement.Bottom){
        Text(text = "First text control ikkokokojih whoo whoo whoo")
        Text(text = "Second text control")}}Copy the code

    The default is arrangement.top. You can also set the spacing of the items in the Column using arrangement.spacedby ()

    @Preview()
@Composable
fun columnTest(a){
    Column(
        // Set the width of Column to 200dp
        modifier = Modifier.size(200.dp),
        // Set the bottom alignment
        verticalArrangement = Arrangement.spacedBy(4.dp)){
        Text(text = "First text control ikkokokojih whoo whoo whoo")
        Text(text = "Second text control")}}Copy the code
  • HorizontalAlignment indicates the horizontalAlignment. The default is to start from the left

    For example, the above two text controls, one is longer and the other is shorter. If the horizontalAlignment is set to End. The two text controls will then be aligned to the right. 
    @Preview()
@Composable
fun columnTest(a){
  Column(horizontalAlignment = Alignment.End){
      Text(text = "The first text control, I'm the longer text control.")
      Text(text = "Second text control")}}Copy the code
  • Content The last argument to all layouts is Content, which is a function that emits sub-interface elements. In fact, this is the content of the child element, such as the two Text controls here. The complete Column would look like this: 
    Column(
   content = {
    Text("Some text")
    Text("Some more text")
    Text("Last text")})Copy the code

    Kotlin’s lambda syntax, Compose, simply supports it. So I’m just going to write this tedious thing as a simple way of writing it

      Column{
   Text("Some text")
   Text("Some more text")
   Text("Last text")}Copy the code

Two: Layout the Row horizontally

Row is used to place multiple items horizontally on the screen. Rows, like columns, allow you to configure the alignment of the elements they contain. Let’s take two text controls for example. Two text controls are aligned horizontally

@Preview()
@Composable
fun rowTest(a){
    Row{
        Text(text = "First text control ikkokokojih whoo whoo whoo")
        Text(text = "Second text control")}}Copy the code

Take a look at the source code for Row

@Composable
@OptIn(ExperimentalLayoutNodeApi::class, InternalLayoutApi::class)
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope. () - >Unit
){... }Copy the code

And we can see that it’s the same thing as Column.

  • Modifier See this article for an introduction to modifier
  • The horizontalArrangement sets the relationship between the horizontal subview and the main axis. The default is to place the sub-view horizontally and to the left to Start the layout Arrangement.start. There are the following values
    • Arrangement.start Place the child object horizontally as close to the left of the main axis as possible.
    • Arrangement.end Places the child object horizontally as close to the right of the main axis as possible.
    • Arrangement.center Place the child object horizontally as close to the CENTER of the main axis as possible.
    • SpaceBetween places children horizontally so that they are evenly distributed along the main axis, with no space available before the first child or after the last. That means the first one is on the far left, and the last one is on the far right. And the middle ones are evenly spaced.
    • A SpaceEvenly places child objects so that they are evenly spaced
    • Arrangement.spacearound places child objects horizontally, with the first placed at the top x interval and the last at the bottom X interval. The middle ones are evenly spaced.
  • VerticalAlignment Sets the alignment in the vertical direction.
  • Content Layout content (I won’t give an example because Column explained it)

3: Box (similar to FramLayout layout)

Use Box to place one element on top of another, similar to a FramLayout layout.

  Box(Modifier.size(200.dp).background(Color.Red)){
      Text(text = "First text control ikkokokojih whoo whoo whoo")
      Text(text = "Second text control")}Copy the code

The example above is a second text control superimposed on top of the first. Take a look at the Box source code

@Composable
@OptIn(ExperimentalLayoutNodeApi::class)
inline fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    content: @Composable BoxScope. () - >Unit
){... }Copy the code
  • Modifier See this article for an introduction to modifier
  • ContentAlignment Sets the alignment of child controls, such as the bottom center 
    @Preview()
 @Composable
 fun boxTest(a){
  Box(Modifier.size(300.dp).background(Color.Red),
  contentAlignment = Alignment.BottomCenter){
  Text(text = "First text control ikkokokojih whoo whoo whoo")
  Text(text = "Second text control")}}Copy the code
  • Content Layout content (I won’t give an example because Column explained it)

4. Clearly know Column, Row and Box through a picture

Through the combination of various Spaces, we can construct the interface we want. Note: Compose effectively handles nested layouts, making it an excellent tool for designing complex interfaces. This is an improvement over Android Views; In Android Views, you need to avoid using nested layouts for performance reasons.