首页 > 其他分享 >Android Jetpack Compose入门教程（一）

Android Jetpack Compose入门教程（一）

时间：2024-06-14 09:04:55浏览次数：26  
标签：MessageCard Compose Jetpack text Text msg Android dp

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

在本教程中，您将使用声明性的函数构建一个简单的界面组件。您无需修改任何 XML 布局，也不需要使用布局编辑器。相反，您只需调用可组合函数来定义所需的元素，Compose 编译器即会完成后面的所有工作。

一、可组合函数

Jetpack Compose 是围绕可组合函数构建的。这些函数可让您以程序化方式定义应用的界面，只需描述应用界面的外观并提供数据依赖项，而不必关注界面的构建过程（初始化元素、将其附加到父项等）。如需创建可组合函数，只需将 @Composable 注解添加到函数名称中即可。
在这里插入图片描述

1、新建项目

下载最新版本的 Android Studio，以下示例使用的是Android Studio Jellyfish版本，然后通过以下方法创建应用：选择 New Project，然后在 Phone and Tablet 类别下，选择 Empty Activity，点击Next。
在这里插入图片描述
将应用命名为 Compose_Demo，然后点击 Finish。默认模板已包含一些 Compose 元素，但在此教程中，您要逐步进行构建。
在这里插入图片描述

第一次构建需要等待一点时间，如构建失败，修改gradle文件夹下libs.versions.toml中gradle版本为8.1.1，点击 sync now，
在这里插入图片描述

2、添加文本元素

首先，通过在 onCreate 方法内添加文本元素，让系统显示“Hello world!”文本。可以通过定义内容块并调用 Text 可组合函数来实现此目的。setContent 块定义了 activity 的布局，我们会在其中调用可组合函数。可组合函数只能从其他可组合函数调用。

Jetpack Compose 使用 Kotlin 编译器插件将这些可组合函数转换为应用的界面元素。例如，由 Compose 界面库定义的 Text 可组合函数会在屏幕上显示一个文本标签。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        enableEdgeToEdge()
        setContent {
            Text(text = "Hello World")
        }
    }
 }

在这里插入图片描述

3、定义可组合函数

如需使函数成为可组合函数，请添加 @Composable 注解。如需尝试此操作，请定义一个 MessageCard 函数并向其传递一个名称，然后该函数就会使用该名称配置文本元素。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        enableEdgeToEdge()
        setContent {
            Text(text = "Hello World")
        }
    }
}

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

在这里插入图片描述

4、在 Android Studio 中预览函数

借助 @Preview 注解，您可以在 Android Studio 中预览可组合函数，而无需构建应用并将其安装到 Android 设备或模拟器中。该注解必须用于不接受参数的可组合函数。因此，您无法直接预览 MessageCard 函数，而是需要创建另一个名为 PreviewMessageCard 的函数，由该函数使用适当的参数调用 MessageCard。请在 @Composable 上方添加 @Preview 注解。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        enableEdgeToEdge()
        setContent {
            Text(text = "Hello World")
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun PreviewMessageCard(){
    MessageCard(name = "Android")
}

在这里插入图片描述

重新构建您的项目。由于新的 PreviewMessageCard 函数未在任何位置受到调用，因此应用本身不会更改，但 Android Studio 会添加一个预览窗口，您可以点击拆分（设计/代码）视图以展开此窗口。此窗口会显示由可组合函数创建的标有 @Preview 注解的界面元素的预览。任何时候，如需更新预览，请点击预览窗口顶部的刷新按钮。

二、布局

界面元素采用多层次结构，元素中又包含其他元素。在 Compose 中，您可以通过从可组合函数中调用其他可组合函数来构建界面层次结构。
在这里插入图片描述

1、添加多个文本

到目前为止，您已经构建了第一个可组合函数和预览！为探索更多 Jetpack Compose 功能，您将构建一个简单的消息界面，界面上显示可以展开且具有动画效果的消息列表。

首先，通过显示消息发送者和消息内容，使消息可组合项更丰富。您需要先将可组合参数更改为接受 Message 对象（而非 String），然后在 MessageCard 可组合项中添加另一个 Text 可组合项。请务必同时更新预览。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        enableEdgeToEdge()
        setContent {
            Text(text = "Hello World")
        }
    }
}

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

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

@Preview(showBackground = true)
@Composable
fun PreviewMessageCard(){
    MessageCard(
        msg = Message("Lexi",
            "Hey, take a look at Jetpack Compose, it's great!")
    )
}

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

2、使用 Column

Column 函数可让您垂直排列元素。向 MessageCard 函数中添加一个 Column。
您可以使用 Row 水平排列各项，并使用 Box 堆叠元素。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        enableEdgeToEdge()
        setContent {
            Text(text = "Hello World")
        }
    }
}

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

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

@Preview(showBackground = true)
@Composable
fun PreviewMessageCard() {
    MessageCard(
        msg = Message(
            "Lexi",
            "Hey, take a look at Jetpack Compose, it's great!"
        )
    )
}

在这里插入图片描述

3、添加图片元素

下面我们来添加消息发送者的个人资料照片，以丰富消息卡片。使用 Resource Manager 从照片库中导入图片，或使用这张图片。添加一个 Row 可组合项，以实现良好的设计结构，并向该可组合项中添加一个 Image 可组合项。

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

在这里插入图片描述

4、配置布局

您的消息布局拥有良好的结构，但其元素的间距不合理，并且图片过大！为了装饰或配置可组合项，Compose 使用了修饰符。通过修饰符，您可以更改可组合项的大小、布局、外观，还可以添加高级互动，例如使元素可点击。您可以将这些修饰符链接起来，以创建更丰富的可组合项。您将使用其中一些修饰符来改进布局。

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_android_logo),
            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 horizontal space between the image and the column
            Spacer(modifier = Modifier.width(4.dp))
            Text(text = msg.body)
        }
    }
}

在这里插入图片描述

三、Material Design

Compose 旨在支持 Material Design 原则。它的许多界面元素都原生支持 Material Design。在本课中，您将使用 Material Design widget 来设置应用的样式。
在这里插入图片描述

1、使用 Material Design

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

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

首先，使用在您的项目中创建的 Material 主题 Compose_DemoTheme和 Surface 来封装 MessageCard 函数。 在 @Preview 和 setContent 函数中都需要执行此操作。这样一来，可组合项即可沿用应用主题中定义的样式，从而在整个应用中确保一致性。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        enableEdgeToEdge()
        setContent {
            Compose_DemoTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    MessageCard(Message(author = "Android", body = "Jetpack Compose"))
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewMessageCard() {
    Compose_DemoTheme {
        Surface {
            MessageCard(
                msg = Message(
                    "Lexi", "Hey, take a look at Jetpack Compose, it's great!"
                )
            )
        }
    }
}

在这里插入图片描述

注意：Empty Compose Activity 模板会为您的项目生成默认主题，使您能够自定义 MaterialTheme。 如果您为项目指定的名称不是 Compose_Demo，可以在 ui.theme 子软件包的 Theme.kt 文件中找到您的自定义主题。

在这里插入图片描述

2、颜色

通过 MaterialTheme.colorScheme，使用已封装主题中的颜色来设置样式。您可以在需要颜色的任何位置使用主题中的这些值。此示例使用动态主题颜色（由设备偏好设置定义）。 如需更改此设置，您可以在 MaterialTheme.kt 文件中将 dynamicColor 设为 false。

设置标题样式，并为图片添加边框：

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_android_logo),
            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)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )

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

        Column {
            Text(
                text = msg.author,
                color = MaterialTheme.colorScheme.primary
            )
            // Add a horizontal space between the image and the column
            Spacer(modifier = Modifier.width(4.dp))
            Text(text = msg.body)
        }
    }
}

在这里插入图片描述

3、Typography（排版）

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

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_android_logo),
            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)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )

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

        Column {
            Text(
                text = msg.author,
                color = MaterialTheme.colorScheme.secondary,
                style = MaterialTheme.typography.titleSmall
            )
            // Add a horizontal space between the image and the column
            Spacer(modifier = Modifier.width(4.dp))

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

在这里插入图片描述

4、Shape（形状）

通过 Shape，我们可以添加最后的“点睛之笔”。首先，将消息正文封装在 Surface 可组合项中。这样即可自定义消息正文的形状和高度。此外，还要为消息添加内边距，以改进布局。

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_android_logo),
            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)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )

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

        Column {
            Text(
                text = msg.author,
                color = MaterialTheme.colorScheme.secondary,
                style = MaterialTheme.typography.titleSmall
            )
            // Add a horizontal space between the image and the column
            Spacer(modifier = Modifier.width(4.dp))

            Surface(shape = MaterialTheme.shapes.medium, shadowElevation = 1.dp) {
                Text(
                    text = msg.body,
                    modifier = Modifier.padding(all = 4.dp),
                    style = MaterialTheme.typography.bodyMedium
                )
            }

        }
    }
}

在这里插入图片描述

5、启用深色主题

您可以启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。

您可以在文件中以单独函数的形式创建多个预览，也可以向同一个函数中添加多个注解。

添加新的预览注解并启用夜间模式。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        enableEdgeToEdge()
        setContent {
            Compose_DemoTheme(darkTheme = true) {
                Surface(modifier = Modifier.fillMaxSize()) {
                    MessageCard(Message(author = "Android", body = "Jetpack Compose"))
                }
            }
        }
    }
}

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

在这里插入图片描述
浅色和深色主题的颜色选项是在由 IDE 生成的 Theme.kt 文件中定义的。

到目前为止，您已创建了一个消息界面元素，它会以不同样式显示一张图片和两项文本，并且在浅色和深色主题下都有良好的视觉效果！

标签：MessageCard,Compose,Jetpack,text,Text,msg,Android,dp
From： https://blog.csdn.net/Billy_Zuo/article/details/139653709

相关文章

  • 基于Android的礼品电商平台App设计与实现 毕业设计源码65516
                              摘 要在传统的商业模式中，对于礼品等商品，人们习惯于到各种商家店铺挑选购买。随着网络购物的广泛普及，和不断加快的时代节奏代中，人们不一定能为购买礼品腾出时间，更不会耐心挑选自己想礼品。......
  • Android WebSocket长连接的实现
    一、为什么需要WebSocket初次接触WebSocket的人，都会问同样的问题：我们已经有了HTTP协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为HTTP协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询......
  • 安卓应用开发——Android Studio中通过id进行约束布局
    在Android开发中，布局通常使用XML文件来描述，而约束（如相对位置、大小等）可以通过多种方式实现，但直接使用ID进行约束并不直接对应于Android的传统布局系统（如LinearLayout、RelativeLayout等）。然而，从AndroidStudio3.0开始，引入了ConstraintLayout，它允许你通过ID来定义视图之间的约......
  • Android 11 自由窗口模式启动app
    //未定义publicstaticfinalintWINDOWING_MODE_UNDEFINED=0;//普通全屏窗口publicstaticfinalintWINDOWING_MODE_FULLSCREEN=1;//画中画publicstaticfinalintWINDOWING_MODE_PINNED=2;//分屏主窗口publicstaticfinali......
  • 【Android面试八股文】为什么Android中要设计为只能在UI线程中去更新UI？Android中子线
    文章目录一、Android为什么不能在子线程更新UI？二、为什么Android中要设计为只能在UI线程中去更新UI？三、如果不在UI线程中更新UI，可能会出现什么问题呢？四、ViewRootImp是在onActivityCreated方法后面创建的吗？五、为什么一开始在Activity的onCreate方法中创建一个子线程访问......
  • 【Android面试八股文】我们来聊一聊IdelHandler吧，IdelHandler能干什么？怎么使用？有什么
    文章目录一、简单说说Handler机制二、IdleHandler是什么？怎么用？三、什么时候出现空闲时间可以执行IdleHandler四、IdleHander是如何保证不进入死循环的？五、你知道在Framework中如何使用IdleHander？六、一些其他面试问题Handler机制算是Android基本功，面试......
  • 数据库 android 数据库软件
    Access数据库    Access数据库被集成在Office办公软件中，是世界上最流行的桌面数据库管理系统。Access是一种功能强大且使用方便的关系型数据库管理系统，一般也称关系型数据库管理软件。它可运行于各种MicrosoftWindows系统环境中，由于它继承了Windows的特性，不仅易于使用，而......
  • DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门
    场景DockerCompose+Jenkins+Pipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/139631755以上使用流水线配置和打包springboot后台项目，如果要使用流水线和配置node打包vue项目，可按如下步骤。注：博......
  • Android studio 自动复制生成的 apk
    KTS脚本//顶层build.gradle.ktsvalapkBaseName:String="VoiceAssistant"allprojects{project.extra.apply{set("apkBaseName",apkBaseName)}}//模块build.gradle.ktsandroid{ applicationVariants.all{......
  • This version of the Android Support plugin for IntelliJ IDEA or Android Studio c
    解决低版本的android导入高版本的工程7.2修改适配android4.2.11、setting.gradle保留rootProject.name=""和include‘:app’，其余注释//pluginManagement{//repositories{//gradlePluginPortal()//google()//mavenCentral()//}//......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99