关于Android—Jetpack Compose

关于Android—Jetpack Compose

文章目录

• 简介
• Jetpack Compose的好处
• 安装
• 一、可组合函数
• • 构建项目
  • 添加文本元素
  • 定义可组合函数
  • 在 Android Studio 中预览函数
• 二、布局
• • 添加多个文本
  • 使用 Column
  • 添加图片元素
  • 配置布局
• 三、Material Design
• • 使用 Material Design
  • 颜色
  • 排版
  • 形状
  • 启用深色主题
• 四、列表
• • 创建消息列表
• 参考文献

简介

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它可简化并加快 Android 上的界面开发，使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。

Jetpack Compose的好处

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它可简化并加快 Android 上的界面开发，使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。
一起使用更方便：因为Android Jetpack组件中的很多库都对其他库提供了支持，比如Room和Paging就对LiveData提供了支持。

向后兼容：基本上每个组件都对低版本提供了支持。

支持RxJava：由于RxJava强大的生态环境，几乎和数据相关的组件都对RxJava提供了支持。

减少代码量：以Data Binding + ViewModel + LiveData或RxJava构建的MVVM模式能够显著减少代码量，比较平时使用的MVP模式也会更加方便，无需主动更新UI。

无需捆绑：Android Jetpack系列组件可以无需捆绑使用，你如果只想用里面的单个库，那么就可以仅仅依赖一个库。

安装

Jetpack Compose 是用于构建原生 Android 界面的新工具包，只需安装最新版Android Studio即可

一、可组合函数 构建项目

开始前，下载最新版本的 Android Studio，然后使用 Empty Compose Activity 模板创建应用。

添加文本元素

首先，通过在 onCreate 方法内添加文本元素，让系统显示“Hello world!”文本。可以通过定义内容块并调用 Text() 函数来实现此目的。
由 Compose 界面库定义的 Text() 函数会在屏幕上显示一个文本标签。

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

定义可组合函数

添加 @Composable 注解。定义一个 MessageCard() 函数并向其传递一个名称该函数就会使用该名称配置文本元素。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard("Android")
        }
    }
}

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

  

在 Android Studio 中预览函数

创建另一个名为 PreviewMessageCard() 的函数，由该函数使用适当的参数调用 MessageCard()。在 @Composable 上方添加 @Preview 注解。
重新构建项目。Android Studio 会添加一个预览窗口。此窗口会显示由标有 @Preview 注解的可组合函数创建的界面元素的预览。

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}
  
  

二、布局

界面元素采用多层次结构，元素中又包含其他元素。在 Compose 中，可以通过从可组合函数中调用其他可组合函数来构建界面层次结构。

添加多个文本

构建一个简单的消息屏幕
首先，通过显示发件人和消息内容，使消息可组合项更丰富。我们需要先更改可组合参数，以接受 Message 对象（而不是 String），并在 MessageCard 可组合项内添加另一个 Text 可组合项。：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(Message("Android", "Jetpack Compose"))
        }
    }
}

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message) {
    Text(text = msg.author)
    Text(text = msg.body)
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(
        msg = Message("123", "auoishndiouasjd")
    )
}

  
  
  

这段代码会在内容视图中创建两个文本元素。但是，由于我们未提供有关如何排列这两个文本元素的信息，因此它们会相互重叠，使文本无法阅读。

使用 Column

Column 函数可让您垂直排列元素。
可以使用 Row 水平排列项，以及使用 Box 堆叠元素。

@Composable
fun MessageCard(msg: Message) {
    Column {
        Text(text = msg.author)
        Text(text = msg.body)
    }
}

添加图片元素

添加一个 Row 可组合项，以实现良好的设计结构，并向该可组合项中添加一个 Image 可组合项：

@Composable
fun MessageCard(msg: Message) {
    Row {
        Image(
            painter = painterResource(R.drawable.img),
            contentDescription = "Contact profile picture",
        )
    
       Column {
            Text(text = msg.author)
            Text(text = msg.body)
        }
  
    }
  
}
  
  

配置布局

Compose 使用了修饰符。通过修饰符，您可以更改可组合项的大小、布局、外观，还可以添加高级互动，例如使元素可点击。您可以将这些修饰符链接起来，以创建更丰富的可组合项。下面我们使用其中一些修饰符来改进布局：

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.img),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                // Set image size to 40 dp
                .size(40.dp)
                // Clip image to be shaped as a circle
                .clip(CircleShape)
        )

        // Add a horizontal space between the image and the column
        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text(text = msg.author)
            // Add a vertical space between the author and message texts
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }
}
  

三、Material Design 使用 Material Design

我们的消息设计现在已有布局，但看上去还不是特别理想。

Jetpack Compose 原生提供 Material Design 及其界面元素的实现。我们将使用 Material Design 样式改进 MessageCard 可组合项的外观。

ComposeTutorialTheme）封装 MessageCard 函数。要同时在 @Preview 和 setContent 函数中执行此 *** 作。

颜色

使用已封装主题中的颜色设置样式很简单，您可以在需要颜色的任意位置使用主题中的值。
下面我们来设置标题样式，并为图片添加边框：

@Composable
fun MessageCard(msg: Message) {
   Row(modifier = Modifier.padding(all = 8.dp)) {
       Image(
           painter = painterResource(R.drawable.profile_picture),
           contentDescription = null,
           modifier = Modifier
               .size(40.dp)
               .clip(CircleShape)
               .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
       )

       Spacer(modifier = Modifier.width(8.dp))

       Column {
           Text(
               text = msg.author,
               color = MaterialTheme.colors.secondaryVariant
           )

           Spacer(modifier = Modifier.height(4.dp))
           Text(text = msg.body)
       }
   }
}

  

排版

MaterialTheme 中提供了 Material 排版样式，只需将其添加到 Text 可组合项中即可。

@Composable
fun MessageCard(msg: Message) {
   Row(modifier = Modifier.padding(all = 8.dp)) {
       Image(
           painter = painterResource(R.drawable.profile_picture),
           contentDescription = null,
           modifier = Modifier
               .size(40.dp)
               .clip(CircleShape)
               .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
       )
       Spacer(modifier = Modifier.width(8.dp))

       Column {
           Text(
               text = msg.author,
               color = MaterialTheme.colors.secondaryVariant,
               style = MaterialTheme.typography.subtitle2
           )

           Spacer(modifier = Modifier.height(4.dp))

           Text(
               text = msg.body,
               style = MaterialTheme.typography.body2
           )
       }
   }
}

  

形状

我们还为消息添加内边距，以改进布局。

@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {
   ComposeTutorialTheme {
       MessageCard(
           msg = Message("Colleague", "Hey, take a look at Jetpack Compose, it's great!")
       )
   }
}
  

启用深色主题

您可以启用深色主题（或夜间模式），使用 Material 颜色、文本和背景时，系统会自动适应深色背景。
添加新的预览注解并启用夜间模式。
浅色和深色主题的颜色选项是在由 IDE 生成的 Theme.kt 文件中定义的。

@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {
   ComposeTutorialTheme {
       MessageCard(
           msg = Message("Colleague", "Hey, take a look at Jetpack Compose, it's great!")
       )
   }
}
  

四、列表

列表在应用内随处可见。

创建消息列表

只包含一条消息的聊天会略显孤单，我们来更改对话，使其包含多条消息。我们需要创建一个可显示多条消息的 Conversation 函数。对于此用例，我们可以使用 Compose 的 LazyColumn 和 LazyRow.。这些可组合项只会呈现屏幕上显示的元素，因此，对于较长的列表，使用它们会非常高效。同时，这些可组合项可避免采用 XML 布局的 RecyclerView 的复杂性。

在此代码段中，您可以看到 LazyColumn 包含一个 items 子项。它接受 List 作为参数，并且其 lambda 会收到我们命名为 message 的参数（可以随意为其命名），它是 Message 的实例。 简而言之，系统会针对提供的 List 的每个项调用此 lambda：将此示例数据集导入您的项目，以便快速引导对话：

import androidx.compose.foundation.lazy.items

@Composable
fun Conversation(messages: List) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

@Preview
@Composable
fun PreviewConversation() {
    ComposeTutorialTheme {
        Conversation(SampleData.conversationSample)
    }
}

  

参考文献

1. 官方文档《Jetpack Compose 使用入门》
2. Jetpack Compose Beta 版现已发布！
3. Compose（一）
4. Compose（二）
5. Jetpack Compose实现简单聊天列表
6. gittee《Jetpack Compose的list列表效果》
7. jetpack compose—看这一篇就够了!!!

作者：罗员力
原文链接