关于Android—Jetpack Compose

其他 2021-12-12 15:17:46 阅读次数: 0

文章目录

简介

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<Message>) {
    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—看这一篇就够了!!!

作者：罗勋
原文链接

猜你喜欢

转载自blog.csdn.net/fjnu_se/article/details/121877560
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022