使用 Jetpack Compose 在 Android 中使用 ConstraintLayout

ConstraintLayout是 ViewGroup 中的视图系统，用于相对于屏幕上其他小部件的位置放置小部件。在 jetpack compose 中，几乎所有布局都可以使用Rows和Columns创建，但如果您想创建更大的复杂布局，您也可以使用 Constraint Layout 作为 Rows 和 Columns 的替代方案。在本文中，我们将创建一个简单的 Layout 来演示ConstraintLayout在 Jetpack Compose 中的使用。首先，从这里抓取图像或使用您选择的任何图像。我们将创建此布局。让我们看一下分步指南。

先决条件：

• 对 Kotlin 的了解。
• 在 XML Android 中创建布局的良好知识。
• Jetpack Compose 的知识。

分步实施

第 1 步：创建一个新项目（或在现有 Compose 项目中使用它）

要在 Android Studio Canary 版本中创建新项目，请参阅文章如何使用 Jetpack Compose 在 Android Studio Canary 版本中创建新项目。

第 2 步：添加依赖项

打开 build.gradle(app) 并添加以下依赖项。

   implementation “androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha08”

第 3 步：使用可组合

创建一个名为ConstraintLayoutExample的可组合函数。在 Jetpack Compose 中，我们有一个名为ConstraintLayout 的Composable，我们可以在其中放置我们的另一个可组合物以相对于其他组合物定位它。在 Compose 中，我们使用createRefs()函数来创建引用，类似于View System 中的 Id。在ConstaintLayoutExample函数，放置一个ConstraintLayout Composable 并创建三个我们需要的引用，用于顶部栏、徽标和底部文本。

Kotlin

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

然后在ConstraintLayout里面创建一个topbar ，参考下面代码中的注释可以更好的理解如何放置约束。

科特林

// 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
    )
}

同样，创建图像和文本可组合和约束。

科特林

// 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)
    })

我们完成了，现在从MainActivity类中的 setContent 调用可组合

科特林

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

运行应用程序并查看 Composables 如何根据代码进行约束。下面是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)
          })
    }
}

输出：

如果有任何问题，请参阅 Github 项目。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！