This is the fourth day of my participation in the August Text Challenge.More challenges in August

Linear layout of columns and rows

Vertical linear layout

The API is as follows:

Inline fun Column(Modifier: modifier = modifier, // modifier verticalArrangement: Arrangement.Vertical = arrangement. Top, // similar to gravity, specify horizontalAlignment in Vertical direction: Alignment.Horizontal = Alignment.Start, // Specifies the position of the content in the Horizontal direction content: @composable ColumnScope.() -> Unit // Content)Copy the code

A simple example:

@Composable
fun ColumnDemo() {
    Column(
        modifier = Modifier
            .size(width = 200.dp, height = 400.dp)
            .background(Color.Red),
    ) {
        Text(text = "text1")
        Text(text = "text2")
        Text(text = "text3")
    }
}
Copy the code

The effect is as follows:

We then make the content appear in the middle and add the following code:

VerticalArrangement = Arrangement. Center, / / specified vertical Center horizontalAlignment = Alignment. CenterHorizontally / / specified centered horizontal AlignmentCopy the code

The effect is as follows:

Horizontal linear layout

The API is as follows:

Inline fun Row(Modifier: modifier = modifier, modifier horizontalArrangement: Arrangement.Horizontal = arrangement. Start, // Similar to gravity, specify content in Horizontal alignment: Align.Vertical = align.Top, // Specifies the position of the content in the Vertical direction only. Content: @composable RowScope.Copy the code

Row is equivalent to a horizontal linear layout, like Column, as follows:

@Composable fun RowDemo() { Row( modifier = Modifier .size(width = 200.dp, height = 400.dp) .background(Color.Red), VerticalAlignment = Alignment CenterVertically, / / vertical center horizontalArrangement = Arrangement. SpaceBetween / / horizontal direction: There's no space back and forth, {// Add a background to differentiate (Text(Text = "text1",modifier = modifier. Background (color.green)) Text(Text = "text1",modifier = Modifier.background(Color.Green)) Text(text = "text1",modifier = Modifier.background(Color.Green)) } }Copy the code

The effect is as follows:

“Arrangement” has the following enumerated values:

Arrangement.Start // Subviews arranged in the header arrangement. End // Subviews arranged in the tail arrangement. Center // Subviews arranged in the middle arrangement. SpaceBetween Cally // A cap and end will split evenly between subviews.SpaceAround // a cap and end will split evenly between each child view, including a cap and endCopy the code

SpaceBetween, SpaceAround, and spaceinstituted are as follows:

Box layout Box

The API is as follows

Inline fun Box(Modifier: modifier = modifier, // modifier contentAlignment: Alignment = Alignment.TopStart, // Content Alignment (horizontal and vertical), the default is top left (in LTR case) propagateMinConstraints: Boolean = false, // Whether to pass the minimum constraint to the inner View, if set to true, the content will fill the Box itself: @composable BoxScope.() -> Unit // Inner layout)Copy the code

A simple example:

@Composable fun BoxDemo() { Box( modifier = Modifier .size(width = 200.dp, height = 200.dp) .background(Color.Red), ContentAlignment = align.center, // Center Alignment) {Text(Text = "BoxLayout", modifier = modifier. Size (width = 100.dp, height = 100.dp) .background(Color.Green) ) } }Copy the code

The effect is as follows:

Now we add the following code:

propagateMinConstraints = true
Copy the code

Find that Text fills Box:

ConstraintLayout ConstraintLayout

@Composable fun ConstraintLayoutDemo(context: Context) {ConstraintLayout(modifier = modifier. Background (color.gray) // Add Gray background to distinguish. Size (width = 300.dp, // create two ids val (btn_click, Text_hello) = createRefs() // Add a Button Button(onClick = {toast.maketext (context, "Click Button", LENGTH_SHORT).show()}, modifier = modifier. ConstrainAs (btn_click) {// specify id as btn_click top.linkto (parent. Top, Margin = 32.dp) // Align top with top of parent layout, LinkTo (parent.end) // Align the left side with the right side of the parent layout LinkTo (text_hello.top) // align bottom with text_hello top}) {Text(Text = "Button")} // add a Text(Text = "Text", Modifier = modification.background (color.red) // Add a Red background, ConstrainAs (text_hello) {// set id to text_hello top.linkto (btn_click.bottom, margin = 48.dp) // align top with btn_click bottom, LinkTo (btn_click.end) bottom. LinkTo (btn_click.end) bottom. LinkTo (parent. Margin = 32.dp) // Align bottom with parent, and set margin to 32dp})}}Copy the code

The results are as follows, fully in line with expectations:

Then let’s look at ConstraintLayout’s other corner APIS

1 GuideLine and the Barrier

We add the following code:

// Create guideline, Located in the bottom 50% of val line_bottom_50F = createGuidelineFromBottom (fraction = 0.5 F) val (tv_bottom) = createRefs () / / Align the bottom of the Text with the guideline (Text = "Bottom_50", Line_bottom_50F = modifier. Background (color.yellow). ConstrainAs (tv_bottom) {// Align bottom with guideline. })Copy the code

We through createGuidelineFromBottom () creates a start from the bottom of the GuideLine, parameter can be a dp, also can be a floating point number, floating-point is the percentage, the results are as follows:

Then let’s look at Barrier:

Val Barrier = createEndBarrier(btn_click, tv_bottom) val Barrier = createEndBarrier(btn_click, tv_bottom)Copy the code

The parameter is the ID of the control you want to organize. I’m not going to use it anymore, just use it like GuideLine.

Tips: createGuideLineFromXXX/createXXXBarrier there are a lot of API based on direction, can be called directly, but also with the help of a GuideLine to achieve percentage layout.

2 Chain

Chain is one of the highlights of ConstraintLayout, and it has two apis:

CreateHorizontalChain () createVerticalChain()Copy the code

The first argument is the id of the control, and the second argument is ChainStyle, respectively:

  • Packed: All controls are next to each other and centered
  • Spread: All controls are evenly distributed in the parent layout, which is the default for ChainStyle
  • SpreadInside: The first and last controls are distributed on both ends, with the rest evenly distributed in the parent layout.

Let’s take a look at the corresponding effect of Packed:

// create a reference (id) var (tv_1, tv_2, Val Chain = createHorizontalChain(elements = arrayOf(tv_1, tv_2, tv_3), // Associate Id chainStyle = ChainStyle.Packed // Specify Chain Type) // Create a Chain associate three Text Text(Text = "tv1",modifier = Modifier.size(50.dp).background(Color.Red).constrainAs(tv_1){}) Text(text = "tv1",modifier = Modifier.size(50.dp).background(Color.Green).constrainAs(tv_2){}) Text(text = "tv1",modifier = Modifier.size(50.dp).background(Color.Yellow).constrainAs(tv_3){})Copy the code

The effect is as follows:

Spread effect:

SpreadInside’s effects: