Jetpack compose layout (IV) - constraintlayout

The previous articles introduced layout related ： Layout Basics 、Material Components and layout 、 Custom layout .
In this article, we will continue to introduce the last knowledge point of layout ：Compose Use in ConstraintLayout.

ConstraintLayout It helps to place composable items on the screen according to their relative positions , Using multiple nesting Row、Column、Box And custom layout elements can be replaced by this layout . When implementing large layouts with complex alignment requirements ,ConstraintLayout It is useful to . similar Android View In the system ConstrantLayout Layout .

Use Compose Medium ConstraintLayout when , Need to be in build.gradle The following libraries are introduced into ：

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0"

For specific version, please refer to ：ConstraintLayout Version page

* notes ： stay Android View The system uses ConstraintLayout To reduce layout nesting levels , Lifting performance , But in Compose UI There is no such problem in the system , It can efficiently handle deep layout hierarchies . So in Compose Whether to use ConstraintLayout It all depends on the developer's usage habits 、 Code legibility and maintainability .

Let's take a look at the usage ：

Mode one ： Use modifiers in composable items to set in-line
Use steps ：
Step one 、 Use createRefs() or createRef() Create a reference associated with the component
Step two 、 By giving constraintAs Modifier sets the reference associated with it
Step three 、 call linkTo() Set constraints

parent Is an existing reference , Can be used to specify a pair of ConstraintLayout Constraints on composable items themselves .

example ：

/**
 *  Mode one ： Directly in ConstraintLayout Set constraint information internally in 
 */
@Composable
fun StudyConstraintLayout(){
    ......
    // Constraint  Layout 
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        // Step one 、 Use  createRefs()  or  createRef()  Create a reference associated with the component 
        val (textTitle,tfUser,tfPassword,btnLogin,snack) = createRefs()

        Text(
            text = " Login screen ",
            modifier = Modifier
                // Step two 、 By giving constraintAs Modifier sets the reference associated with it 
                .constrainAs(textTitle) {
                    // Step three 、 call linkTo() Set constraints 
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    // Set the top constraint and margin
                    top.linkTo(parent.top,20.dp)
                }
        )
    ......
    }
}

Given the amount of sample code , Only part of the code is posted here , Detailed code (StudyConstraintLayout)

Running effect ：

Mode two ： Constraints and layout separation methods
In some cases we need to separate the constraints from the applied layout , Easy to use . Such as ： Change constraints according to screen configuration , Or add animation effects between two constraint sets .

For such application scenarios, you can use ConstraintSet+Modifier.layoutId Combined way to achieve . The specific steps are as follows ：

• Generate a ConstraintSet object , And pass it as a parameter to ConstraintLayout;
• Use layoutId The modifier will be in ConstraintSet References created in are assigned to composable items ;

Examples are as follows ：

/**
 *  Mode two 、 By using ConstraintSet Set constraints 
 */
@Composable
fun StudyConstraintSet(){
    val constraintSet = decoupledConstraints(0.dp)

    ConstraintLayout(constraintSet) {
        Button(
            onClick = { /* Do something */ },
            // Notification settings layoutId Implement control constraints 
            modifier = Modifier.layoutId("button")
        ) {
            Text("Button")
        }

        Text("Text", Modifier.layoutId("text"))
    }
}

/**
 *  Create a ConstraintSet example 
 */
private fun decoupledConstraints(margin:Dp):ConstraintSet{
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button){
            top.linkTo(parent.top)
        }

        constrain(text){
            top.linkTo(button.bottom,10.dp)
        }
    }
}
// preview 
@Preview(name = " Mode two  ConstraintSet")
@Composable
fun PreviewStudyConstraintLayout2(){
    StudyConstraintSet()
}

design sketch ：

Come here Compose Of ConstrantLayout The content has been introduced .
Welcome to leave a message , Learning together , Common progress ！

github - Sample source code
gitee - Sample source code