使用Jetpack Compose在Android中构建UI

前言

在Android世界中，我们使用LinearLayout，相对布局以及什么不设计UI。然后我们开始使用 ConstraintLayouts 来设计 UI。但我们仍然错过了在Android中设计声明性UI的诀窍。我们有很多不同的库可以做到这一点，但没有一个有原生的Android支持。

在Google IO '19中，Google推出了Jetpack Compose来创建声明性UI。因此，基本上，声明性UI意味着通过指定我们需要的一组特定的UI元素来创建UI，并以某种方式构建它。

为什么我们应该使用Jetpack Compose？

我们应该使用Jetpack compose，因为与我们今天编写的内容相比，使用它来编写更少的代码。例如，我们现在没有显式写入 XML 文件。此外，使用组合，我们可以通过使用Kotlin编写任何类型的UI。

因此，让我们逐一讨论如何使用jetpack compose。

步骤01.设置

首先，将 google（） 添加到项目的 build.gradle 文件中

allprojects {
    repositories {
        google()
        jcenter()
    }
}

步骤 02. App 的 Gradle

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
   

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

composeOptions {
    kotlinCompilerVersion "1.3.61-dev-withExperimentalGoogleExtensions-20200129"
    kotlinCompilerExtensionVersion "0.1.0-dev06"
}

步骤 03. 项目的 gradle 文件

dependencies {
    classpath 'com.android.tools.build:gradle:4.0.0-alpha01'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25"}

步骤 04. 最后，添加项目依赖项

implementation 'androidx.ui:ui-framework:0.1.0-dev06'
implementation 'androidx.ui:ui-layout:0.1.0-dev06'
implementation 'androidx.ui:ui-material:0.1.0-dev06'
implementation 'androidx.ui:ui-tooling:0.1.0-dev06'

现在，我们完成了项目的设置。让我们构建 UI。到目前为止，我们使用 setContentView 从 XML 文件扩充布局。但在本教程中，我们将使用Jetpack compose来设计布局文件。

步骤05.在活动文件中，

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        //your design 
    }
}

现在，我们将设计设置为 setContent。这里我们调用一个函数。我们使用可组合函数。因此，作为开发人员，让我们从Hello World开始。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

步骤06.让我们讨论如何创建可组合函数。

要创建可组合函数，我们需要使用@Composable注释。

@Composable
fun helloWorld() {
    Text(text = "Hello World")
}

并在 setContent{} 中调用 helloWorld（）

• 可组合函数只能从另一个可组合函数调用。
• 可组合函数是我们用于在屏幕上绘制 UI 的函数。所有写在其中的小部件都呈现在屏幕上。
  步骤07.让我们定义一个容器。
  在这里，如果我们需要在线性布局中具有垂直模式的方向行为。在这里，我们使用列，

Column {
    //the inside widgets
}

这将按垂直顺序堆叠线性布局中的元素。在这里，让我们用一个按钮的例子来讨论，

Column {
    Button {
        Clickable(onClick = {
            Log.d(TAG, "This is Button 1")
        }) {
            Text("Click Me", style = TextStyle(color = Color.White))
        }
    }
    Spacer(modifier = LayoutHeight(16.dp))
    Button(backgroundColor = Color.White) {

        Clickable(onClick = {
            startActivity(
                Intent(
                    this@MainActivity,
                    UserListActivity::class.java
                )
            )
        }) {

            Text(text = "This is Button 2", style = TextStyle(color = Color.Black))
        }
    }
}

在这里，我们设计了两个按钮

• 在我们第一次声明一个Button小部件的地方，我们在其中实现了一个Clickable负责单击按钮的控件。在第一个按钮中，它将打印一个日志。TextStyle在此，我们使用()更新了按钮中文本的样式。
• 然后我们添加了一个Spacer，它在两个 16dp 单位的按钮之间添加了一个空格。
• 最后，我们实现了第二个按钮，点击它会打开一个新的活动。在这里，我们更改了文本样式并将 of 更改backgroundColor为Button白色。

输出

如果我们想在android中采用Material design原理的设计，可以使用 MaterialTheme()

MaterialTheme {
    // Widgets 1
    // Widgets 2
    // Widgets 3
}

步骤 08。让我们讨论如何使用 Jetpack Compose 构建列表，

让我们首先创建一个名为 UserListActivity 的新活动，并在其中添加，

class UserListActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                populateUser()
            }
        }
    }}

在此，我们添加了一个小部件 Material Theme，然后为其添加了一个子可组合函数populateUser()。

现在，populateUser() 看起来像，

@Preview
@Composable
private fun populateUser() {
    setupList(UserDataSource.getUsers())
}

在这里，我们将有另一个可组合函数setupList()，我们将从数据源传递用户列表。它可以来自本地存储、静态数据甚至来自 API。

我们的用户数据类看起来像，

data class User(val id: Int = 0, val name: String = "", val email: String = "")

现在，在我们的示例中，我们将创建一个显示用户名和电子邮件的列表。

在setupList() 函数中，

@Composable
private fun setupList(users: List<User>) {
    VerticalScroller {
        Column {
            users.let {
                it?.forEach { user ->
                    printUser(user)
                }
            }
        }
    }
}

我们将添加一个名为的小部件，该小部件VerticalScroller将负责显示用户列表。在小部件中，我们添加了一个Column这样，我们可以让所有用户垂直堆叠。然后我们遍历以单独获取用户并将其传递给printUser()可组合函数。

在printUser()函数中，

@Composable
private fun printUser(user: User) {
    Ripple(bounded = true) {
        Clickable(
            onClick = {
                Toast.makeText(
                    this@UserListActivity,
                    "You click on name ${user.name}",
                    Toast.LENGTH_SHORT
                ).show()
            }
        ) {
            Card {
                    Container(
                        padding = EdgeInsets(16.dp),
                        modifier = LayoutWidth.Fill,
                        alignment = Alignment.CenterStart
                    ) {
                        Column {
                            Text(text = user.name, style = MaterialTheme.typography().h6)
                            Text(text = user.email, style = MaterialTheme.typography().body1)
                        }
                    }
                

            }
        }
    }
}

我们首先创建一个Column小部件，在其中包含两个 Text，其中包含名称和电子邮件。在此，名称的样式为Heading6，电子邮件的样式为body1。这与我们在 HTML 中传递样式的方式非常相似。

现在，我们将 wrap 使用Container小部件从四周添加一些填充，16dp并将为 Fill 添加一个修饰符。在这里，EdgeInsets意味着它将从各个方面以及在 XML 中添加 16dp 的LayoutWidth.Fill填充match_parent。alignmentin Container 小部件是为了确保它的孩子从哪里开始。

然后，我们将它包装在下面Card，为每个项目提供一个卡片视图类型的视图。

现在，我们添加Ripple小部件以在单击它时产生涟漪效果。Clickable 类似于我们上面所做的。在这里，单击时，我们会显示祝酒词。

在 Compose 中管理状态

在构建 UI 时，我们在调用代码时在实例中设置数据。但是当数据发生变化并且我们必须用新数据更新 UI 时，我们将如何管理 UI 中的数据？

为了在 Jetpack compose 中管理状态，我们@Model在类前面使用。因此，它有助于观察数据的变化。一旦数据发生变化，它会重绘数据发生变化的 UI，而不是整个 UI 树。

@Model 是线程安全的

注意：如果我们@Preview 在任何可组合函数之上添加，我们可以在将其运行到实际设备之前在 Android Studio 本身中查看该函数，以确定它的外观。这类似于我们过去设计时查看 XML 文件预览的方式。