ConstraintLayout en Android usando Jetpack Compose

ConstraintLayout es el sistema de vista en un ViewGroup para colocar widgets en relación con la posición de otros widgets en la pantalla. En jetpack compose, casi todos los diseños se pueden crear usando filas y columnas , pero si desea crear diseños más grandes y complicados, también puede usar el diseño de restricción como una alternativa a las filas y columnas. En este artículo, vamos a crear un diseño simple que demuestre el uso de ConstraintLayout en Jetpack Compose. Primero, tome la imagen de aquí o use cualquier imagen de su elección. Estaremos creando este diseño. Veamos la guía paso a paso.

requisitos previos:

• Conocimientos de Kotlin .
• Buen conocimiento de la creación de diseños en XML Android .
• Conocimientos de Jetpack Compose .

Implementación paso a paso

Paso 1: cree un nuevo proyecto (o utilícelo en el proyecto Compose existente)

Para crear un nuevo proyecto en la versión Android Studio Canary, consulte el artículo Cómo crear un nuevo proyecto en la versión Android Studio Canary con Jetpack Compose.

Paso 2: agregar dependencias

Abra build.gradle(app) y agregue la siguiente dependencia.

   implementación «androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha08»

Paso 3: Trabajando con el Componible

Cree una función Composable llamada ConstraintLayoutExample. En Jetpack Compose tenemos Composable llamado ConstraintLayout en el que podemos poner nuestro otro composable para posicionarlo en relación con los demás. En Compose usamos la función createRefs() para crear referencias, similar a Id en View System. Dentro de la función ConstaintLayoutExample , coloque un ConstraintLayout Composable y cree tres referencias que necesitaremos, para la barra superior, el logotipo y el texto inferior. 

ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
  
// Creating references
val (logo, topBar, companyName) = createRefs()
          
}

Luego cree una barra superior dentro de ConstraintLayout, consulte el comentario a continuación en el código para comprender mejor cómo poner restricciones.

// TopAppBar Composable
TopAppBar(
          modifier = Modifier
                .constrainAs(topBar) {
                      
                    // top of TopAppBar constraints
                    // to top of parent
                    top.linkTo(parent.top)
                      
                    // start of TopAppBar constraints
                    // to start of parent
                    start.linkTo(parent.start)
                      
                    // end of TopAppBar constraints 
                    // to end of parent
                    end.linkTo(parent.end)
                },
               
            backgroundColor = Green
  ) {
  
// Contents for topAppBar
Text(
     text = "Geeks for Geeks | Constraint Layout", color = Color.White
    )
}

Del mismo modo, cree la imagen y el texto componible y las restricciones.

// Image Composable
Image(
       // Setting the image saved in drawable
       painter = painterResource(id = R.drawable.gfg),
       contentDescription = "company logo",
       modifier = Modifier
                .size(70.dp)
  
                // Pass the reference
                .constrainAs(logo) {
  
                    // constraint top to bottom of topAppBar
                    top.linkTo(topBar.bottom)
  
                    // constraint start to parent start
                    start.linkTo(parent.start)
  
                    // constraint end to parent end
                    end.linkTo(parent.end)
  
                    // Constraint bottom to top of bottom text 
                    // as it will be in bottom most
                    bottom.linkTo(companyName.top)
                })
  
// Text Composable
Text(
      text = "Geeks for geeks",
      color = Color.Black,
      modifier = Modifier.
           // Passing the reference
           constrainAs(companyName) {
                      
           // constraint start to parent start
           start.linkTo(parent.start)
  
           // constraint end to parent end
           end.linkTo(parent.end)
  
           // constraint bottom to parent bottom
           bottom.linkTo(parent.bottom)
    })

Y hemos terminado, ahora llama al componible desde setContent en MainActivity Class

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(color = MaterialTheme.colors.background) {
                ConstraintLayoutExample()
            }
  
        }
    }
}

Ejecute la aplicación y vea cómo los Composables están restringidos según el código. completar MainActivity.kt

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(color = MaterialTheme.colors.background) {
                ConstraintLayoutExample()
            }
        }
    }
}
  
  
@Preview
@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
  
        val (logo, topBar, companyName) = createRefs()
  
        // TopAppBar Composable
        TopAppBar(
            modifier = Modifier
            
                .constrainAs(topBar) {
  
                    // top of TopAppBar constraints
                    // to top of parent
                    top.linkTo(parent.top)
  
                    // start of TopAppBar constraints
                    // to start of parent
                    start.linkTo(parent.start)
  
                    // end of TopAppBar constraints
                    // to end of parent
                    end.linkTo(parent.end)
                },
  
            backgroundColor = Color.Green
        ) {
  
            // Contents for topAppBar
            Text(
                text = "Geeks for Geeks | Constraint Layout", color = Color.White
            )
        }
  
        // Image Composable
        Image(
            // Setting the image saved in drawable
            painter = painterResource(id = R.drawable.gfg),
            contentDescription = "company logo",
            modifier = Modifier
                .size(70.dp)
  
                 // Pass the reference
                .constrainAs(logo) {
  
                    // constraint top to bottom of topAppBar
                    top.linkTo(topBar.bottom)
  
                    // constraint start to parent start
                    start.linkTo(parent.start)
  
                    // constraint end to parent end
                    end.linkTo(parent.end)
  
                    // Constraint bottom to top of bottom 
                    // text as it will be in bottom most
                    bottom.linkTo(companyName.top)
                })
  
        // Text Composable
        Text(
            text = "Geeks for geeks",
            color = Color.Black,
            modifier = Modifier.
                // Passing the reference
                constrainAs(companyName) {
  
                    // constraint start to parent start
                    start.linkTo(parent.start)
  
                    // constraint end to parent end
                    end.linkTo(parent.end)
  
                    // constraint bottom to parent bottom
                    bottom.linkTo(parent.bottom)
          })
    }
}

Producción:

Si tiene algún problema, consulte el Proyecto Github .