| Componse tutorial on Alignment and Arrangement

The introduction

As for Alignment and Arrangement, these two interfaces are generally used to arrange the orientation of components in Componse. However, many students who have just started to learn Componse are easily confused about how to use Componse, and there are few official materials at present. So write this article for a quick understanding.

I thought it would be very complicated, but finally I found that it was not as complicated as I imagined, so I simply wrote my understanding. Since the current level is limited, if any mistakes are found later, they will be corrected in time.

Alignment

The alignment used for a layout in its parent layout can be thought of as horizontal alignment;

It contains the following two interfaces:

• Horizontal

  Used to define the horizontal alignment

• Vertical

  Used to define vertical alignment

There are two concrete implementation classes associated with Alignment.

• AbsoluteAlignment
• BiasAbsoluteAlignment

AbsoluteAlignment

// 2D AbsoluteAlignments
val TopLeft: Alignment = BiasAbsoluteAlignment(-1f, -1f)
val TopRight: Alignment = BiasAbsoluteAlignment(1f, -1f)
val CenterLeft: Alignment = BiasAbsoluteAlignment(-1f.0f)
val CenterRight: Alignment = BiasAbsoluteAlignment(1f.0f)
val BottomLeft: Alignment = BiasAbsoluteAlignment(-1f.1f)
val BottomRight: Alignment = BiasAbsoluteAlignment(1f.1f)
// 1D BiasAbsoluteAlignment.Horizontals. Used to determine the layout direction, horizontal and vertical arrangement
val Left: Alignment.Horizontal = BiasAbsoluteAlignment.Horizontal(-1f)
val Right: Alignment.Horizontal = BiasAbsoluteAlignment.Horizontal(1f)
Copy the code

Google provides good alignment static classes that are easy to use when you don’t know the layout direction.

BiasAlignment

data class BiasAlignment(
    val horizontalBias: Float.val verticalBias: Float
){
  - class Horizontal(Bias) Horizontal alignment -class Vertical(Bias) Vertical alignment}Copy the code

Aligned according to offset,-1 means start or top,0 means center, and 1 means end or bottom

BiasAbsoluteAlignment

data class BiasAbsoluteAlignment(
    private val horizontalBias: Float.private val verticalBias: Float
){
   - class Horizontal(BIAS) Horizontal alignment bias- [-1.1] -1Left aligned,0In the middle,1Means right align}Copy the code

Unlike BiasAlignment, -1 indicates alignment to the upper-left corner, 0 indicates center, and 1 indicates lower-right corner

Arrangement

Use to specify how the child elements of the parent layout are aligned in the main axis of the layout:

The same

Except for AbsoluteAlignment, the above ment includes two subclasses, Horizontal and Vertical

Why is that?

Because there are horizontal or vertical layout directions for a View, these two subclasses exist to make it easier to call.

The sample

This article sample code address

@Composable
fun ColumnSimple(
    text: String,
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start
) {
    Column(
        modifier = modifier
            .background(color = Color.Yellow)
            .padding(5.dp),
        verticalArrangement, horizontalAlignment
    ) {
        Text(text = text, color = Color.Black)
    }
}
Copy the code

The default alignment direction

The sample	rendering

Customize the vertical arrangement

The sample	The effect

Custom horizontal arrangement

The sample	The effect