前言
在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 文件预览的方式。