Android Jetpack-Compose相关

news2024/9/19 10:54:05

封面

Android Jetpack-Compose相关

一、什么是Compose？

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

（注：想要使用Compose编写程序需要先把你的AndroidStudio升级到Android Studio Arctic Fox 或更高版本。）

二、Compose特点

更少的代码

与使用 Android View 系统（按钮、列表或动画）相比，Compose 可使用更少的代码实现更多的功能。

代码体量更小，编写代码只需要采用 Kotlin，而不必拆分成 Kotlin 和 XML 部分。使用 Compose 编写的代码都很简洁且易于维护。“Compose 的布局系统在概念上更简单，因此可以更轻松地推断。查看复杂组件的代码也更轻松。

直观

Compose 使用声明性 API。可以构建不与特定 activity 或 fragment 相关联的小型无状态组件。

加速开发

Compose 与所有的现有代码兼容：您可以从 View 调用 Compose 代码，也可以从 Compose 调用 View。

功能强大

Compose 不仅解决了声明性界面的问题，还改进了无障碍功能 API、布局等各种内容。将设想变为现实所需的步骤更少了。利用 Compose，可以轻松快速地通过动画让应用变得生动有趣。无论是使用 Material Design 还是自己的设计系统进行构建，Compose 都可以灵活地实现所需的设计。

三、如何使用Compose？

Compose只是注解接口，内部原理在自己看懂后，会在往后出一篇介绍原理，现在我们简单介绍如何使用。温馨提示Compose对学习过flutter的开发者来说非常容易入门。
Compose支持的布局：
一、Column（列排列的组件）；
二、Row（行排列的组件）；
三、Statck（叠加的组件）；
四、Scaffold（Scaffold、MaterialTheme等是MaterialDesign风格的组件等。这里简单只写出4个是因为这对于学习过flutter的开发者来说，它们4个已经是非常熟悉的老朋友了。
和flutter一样，Compose让开发者可以专心使用代码写开发UI界面，无需再写一份xml代码。

声明依赖项

如需添加 Compose 的依赖项，您必须将 Google Maven 制品库添加到项目中。

在应用或模块的 build.gradle 文件中添加所需工件的依赖项：

组说明
compose.animation在 Jetpack Compose 应用中构建动画，丰富用户体验。
compose.compiler借助 Kotlin 编译器插件，转换 @Composable functions（可组合函数）并启用优化功能。
compose.foundation使用现成可用的构建块编写 Jetpack Compose 应用，还可扩展 Foundation 以构建您自己的设计系统元素。
compose.material使用现成可用的 Material Design 组件构建 Jetpack Compose UI。这是更高层级的 Compose 入口点，旨在提供与 www.material.io 上描述的组件一致的组件。
compose.material3使用 Material Design 3（下一代 Material Design）组件构建 Jetpack Compose 界面。Material 3 中包括了更新后的主题和组件，以及动态配色等 Material You 个性化功能，旨在与新的 Android 12 视觉风格和系统界面相得益彰。
compose.runtimeCompose 编程模型和状态管理的基本构建块，以及 Compose Compiler 插件针对的核心运行时。
compose.ui与设备互动所需的 Compose UI 的基本组件，包括布局、绘图和输入。

四、使用Compose

使用Compose第一个基本程序：

​
package com.example.compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.compose.ui.theme.ComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTheme {
        Greeting("Android")
    }
}

​

效果图：
Hello Android！

五、例子

创建一个项目

创建1
点击 Empty Compose Activity

创建2
然后改名字改成自己想要的 点击完成即可创建一个项目
（注：我之前已经创建一个名字为Compose的项目所以下面有一个警告）

跑马灯例子~
添加启动类

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    TestScreen()
                }
            }
        }
    }
}

创建方法：

@Composable
fun MarqueeText(
    text: String,
    modifier: Modifier = Modifier,
    textModifier: Modifier = Modifier,
    gradientEdgeColor: Color = Color.White,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current,
) {
    // 创建Text控件方法，相当于@Composable fun createText(localModifier: Modifier)
    val createText = @Composable { localModifier: Modifier ->
        Text(
            text,
            textAlign = textAlign,
            modifier = localModifier,
            color = color,
            fontSize = fontSize,
            fontStyle = fontStyle,
            fontWeight = fontWeight,
            fontFamily = fontFamily,
            letterSpacing = letterSpacing,
            textDecoration = textDecoration,
            lineHeight = lineHeight,
            overflow = overflow,
            softWrap = softWrap,
            maxLines = 1,
            onTextLayout = onTextLayout,
            style = style,
        )
    }

    var offset by remember { mutableStateOf(0) }
    val textLayoutInfoState = remember { mutableStateOf<TextLayoutInfo?>(null) }
    LaunchedEffect(textLayoutInfoState.value) {
        val textLayoutInfo = textLayoutInfoState.value ?: return@LaunchedEffect
        if (textLayoutInfo.textWidth <= textLayoutInfo.containerWidth) return@LaunchedEffect
        if(textLayoutInfo.containerWidth == 0) return@LaunchedEffect
        // 计算播放一遍的总时间
        val duration = 7500 * textLayoutInfo.textWidth / textLayoutInfo.containerWidth// 父层不要有其他元素，不然这句很容易发生Error java.lang.ArithmeticException: divide by zero（除以零）
        // 动画间隔时间
        val delay = 1000L

        do {
            // 定义动画，文字偏移量从0到-文本宽度
            val animation = TargetBasedAnimation(
                animationSpec = infiniteRepeatable(
                    animation = tween(
                        durationMillis = duration,
                        delayMillis = 1000,
                        easing = LinearEasing,
                    ),
                    repeatMode = RepeatMode.Restart
                ),
                typeConverter = Int.VectorConverter,
                initialValue = 0,
                targetValue = -textLayoutInfo.textWidth
            )
            // 根据动画帧时间，获取偏移量值。
            // 起始帧时间
            val startTime = withFrameNanos { it }
            do {
                val playTime = withFrameNanos { it } - startTime
                offset = animation.getValueFromNanos(playTime)
            } while (!animation.isFinishedFromNanos(playTime))
            // 延迟重新播放
            delay(delay)
        } while (true)
    }

    SubcomposeLayout(
        modifier = modifier.clipToBounds()
    ) { constraints ->
        // 测量文本总宽度
        val infiniteWidthConstraints = constraints.copy(maxWidth = Int.MAX_VALUE)
        var mainText = subcompose(MarqueeLayers.MainText) {
            createText(textModifier)
        }.first().measure(infiniteWidthConstraints)

        var gradient: Placeable? = null

        var secondPlaceableWithOffset: Pair<Placeable, Int>? = null
        if (mainText.width <= constraints.maxWidth) {// 文本宽度小于容器最大宽度， 则无需跑马灯动画
            mainText = subcompose(MarqueeLayers.SecondaryText) {
                createText(textModifier.fillMaxWidth())
            }.first().measure(constraints)
            textLayoutInfoState.value = null
        } else {
            // 循环文本增加间隔
            val spacing = constraints.maxWidth * 2 / 3
            textLayoutInfoState.value = TextLayoutInfo(
                textWidth = mainText.width + spacing,
                containerWidth = constraints.maxWidth
            )
            // 第二遍文本偏移量
            val secondTextOffset = mainText.width + offset + spacing
            val secondTextSpace = constraints.maxWidth - secondTextOffset
            if (secondTextSpace > 0) {
                secondPlaceableWithOffset = subcompose(MarqueeLayers.SecondaryText) {
                    createText(textModifier)
                }.first().measure(infiniteWidthConstraints) to secondTextOffset
            }
            // 测量左右两边渐变控件
            gradient = subcompose(MarqueeLayers.EdgesGradient) {
                Row {
                    GradientEdge(gradientEdgeColor, Color.Transparent)
                    Spacer(Modifier.weight(1f))
                    GradientEdge(Color.Transparent, gradientEdgeColor)
                }
            }.first().measure(constraints.copy(maxHeight = mainText.height))
        }

        // 将文本、渐变控件 进行位置布局
        layout(
            width = constraints.maxWidth,
            height = mainText.height
        ) {
            mainText.place(offset, 0)
            secondPlaceableWithOffset?.let {
                it.first.place(it.second, 0)
            }
            gradient?.place(0, 0)
        }
    }
}

/**
 * 渐变侧边
 */
@Composable
private fun GradientEdge(
    startColor: Color, endColor: Color,
) {
    Box(
        modifier = Modifier
            .width(10.dp)
            .fillMaxHeight()
            .background(
                brush = Brush.horizontalGradient(
                    0f to startColor, 1f to endColor,
                )
            )
    )
}

private enum class MarqueeLayers { MainText, SecondaryText, EdgesGradient }

/**
 * 文字布局信息
 * @param textWidth 文本宽度
 * @param containerWidth 容器宽度
 */
private data class TextLayoutInfo(val textWidth: Int, val containerWidth: Int)

调用方法：

@Composable
fun TestScreen() {
    val content = "FJNU哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈"
    Column(modifier = Modifier.padding(top = 200.dp)) {
        MarqueeText(
            text = content,
            color = Color.Black,
            fontSize = 24.sp,
            modifier = Modifier
                .padding(start = 50.dp, end = 50.dp)
                .background(Color.White)
        )
    }
}

最后记得在xml文件里面修改一下你自己改的名字即可

最终实现效果

jieguo1
jieguo2

（因为我不会做动图所以就分两次截图）…

总结：

Compose的所有控件都是独立于android平台（这里的独立是相对原生Android View系统而言的，指上层独立，底层还是依赖原声，这样设计是为了与原生View系统仍保持交互）。原生Android可以实现的都可以使用Compose来加速开发，无法做到原生Android做不到的。Compose与原生Android各有各的好处，Compose 对于大多数开发者指标产生的影响是积极的。考虑到这一点，再加上 Compose 大大提高了开发人员的生产力。对大部分人来说，Compose 无疑是 Android UI 开发的未来。

作者：王润熙
https://blog.csdn.net/qq_52903932/article/details/128149694?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128149694%22%2C%22source%22%3A%22qq_52903932%22%7D

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/58647.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Go学习之路-环境搭建

Go学习之路-环境搭建

默认运行设备系统&#xff1a;MacOS 安装 安装包下载地址&#xff08;下面3个都可以&#xff09;&#xff1a; https://studygolang.com/dl https://golang.google.cn/dl/ https://golang.org/dl/ 我这里选择 pkg包、一键安装、默认的安装路径 /usr/local/go 环境 设置go语言…
阅读更多...
[附源码]计算机毕业设计springboot在线图书销售系统

[附源码]计算机毕业设计springboot在线图书销售系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
mmap 创建共享内存映射

mmap 创建共享内存映射

所谓内存映射指的是 让一个磁盘文件与内存中的一个缓冲区相映射&#xff0c;进程访问这块内存时&#xff0c;就等同于访问文件对应映射部分&#xff0c;不必再调用 read / write 。 我们可以使用mmap函数来建立内存和文件某一部分的映射关系。 目录 一、共享内存映射的创建 /…
阅读更多...
代码审计-3 文件包含漏洞

代码审计-3 文件包含漏洞

文章目录代码审计-文件包含漏洞文件包含漏洞种类当检测到目标存在文件包含漏洞时可以怎么利用文件包含中php可使用的协议PHPCMS V9.6.3后台文件包含漏洞后台路由分析漏洞寻找代码审计-文件包含漏洞 文件包含漏洞种类 当检测到目标存在文件包含漏洞时可以怎么利用 文件包含中php…
阅读更多...
npm run dev和npm run serve

npm run dev和npm run serve

npm run dev和npm run serve目录概述需求&#xff1a;设计思路实现思路分析1.npm install命令2.package.json3.npm run serve参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make …
阅读更多...
redis基础4——RDB持久化、AOF持久化全面深入解读

redis基础4——RDB持久化、AOF持久化全面深入解读

文章目录一、redis持久化机制1.1 持久化的背景1.2 两种持久化概念1.2.1 快照方式&#xff08;RDB&#xff09;1.2.2 文件追加方式&#xff08;AOF&#xff09;1.3 rdb持久化&#xff08;Redis Database&#xff09;1.3.1 快照原理1.3.2 触发机制1.3.2.1 手动触发1.3.2.1.1 save…
阅读更多...
最常用的python开发工具

最常用的python开发工具

有哪些值得推荐的 Python 开发工具 推荐5个非常适合Python小白的开发工具&#xff1a;1、Python TutorPython Tutor是由Philip Guo开发的一个免费教育工具&#xff0c;可帮助开发者攻克编程学习中的基础障碍&#xff0c;理解每一行源代码在程序执行时在计算机中的过程。 通过…
阅读更多...
CentOS8克隆虚拟机修改IP，错误：未知的连接 “ens160“

CentOS8克隆虚拟机修改IP，错误：未知的连接 “ens160“

关于CentOS8该如何克隆与修改IP&#xff0c;并设置成静态IP的方法&#xff0c;可以参考我的另一篇文章&#xff0c;我也是一直这么做的。 CentOS8拷贝虚拟机、修改ip、主机 但是最近我再使用我的这篇文章克隆虚拟机的时候&#xff0c;竟然报错了&#xff0c;本来想删除掉克隆…
阅读更多...
2023年天津农学院专升本专业课报名、确认缴费及准考证打印流程

2023年天津农学院专升本专业课报名、确认缴费及准考证打印流程

天津农学院2023年高职升本科专业课考试 报名、确认缴费及准考证打印操作流程 一、报名操作流程 1. 阅读报名注意事项 请考生于2022年12月5日9点—12月10日12点登录报名系统 http://gzsb.tjau.edu.cn&#xff0c;请认真阅读报名注意事项。2.报名登录 点击“报名”菜单后进入报名…
阅读更多...
LeetCode 374. 猜数字大小

LeetCode 374. 猜数字大小

&#x1f308;&#x1f308;&#x1f604;&#x1f604; 欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓LeetCode 374. 猜数字大小&#xff0c;做好准备了么&#xff0c;那么开始吧。 &#x1f332;&#x1f332;&#x1f434;&#x1f434; 一、题目名称 LeetCode 374.…
阅读更多...
2023最新SSM计算机毕业设计选题大全（附源码+LW）之java高校辅导员工作管理系统82aub

2023最新SSM计算机毕业设计选题大全（附源码+LW）之java高校辅导员工作管理系统82aub

对于即将毕业或者即将做课设的同学而言&#xff0c;由于经验的欠缺&#xff0c;面临的第一个难题就是选题&#xff0c;确定好题目之后便是开题报告&#xff0c;如果选题首先看自己学习那些技术&#xff0c;不同技术适合做不同的产品&#xff0c;比如自己会些简单的Java语言&…
阅读更多...
【圣诞文】用python带你体验多重花样圣诞树

【圣诞文】用python带你体验多重花样圣诞树

前言 大家早好、午好、晚好吖 ❤ ~ 在圣诞要来临的前夕&#xff0c;我们来出一起圣诞特辑吧 &#xff08;虽说可能有一丢丢早&#xff0c;但是等要来了在准备就来不及了呀~&#xff09; 圣诞节要素 1、圣诞袜&#xff0c;最早以前是一对红色的大袜子&#xff0c;大小不拘。 …
阅读更多...
Spring异步任务async介绍与案例实战

Spring异步任务async介绍与案例实战

关于spring异步任务 简单地说&#xff0c;用Async注释bean的方法将使其在单独的线程中执行。换句话说&#xff0c;调用者不会等待被调用方法的完成。利用spring提供的注解即可简单轻松的实现异步任务处理。 默认线程池问题 Spring 异步任务默认使用 Spring 内部线程池 Simpl…
阅读更多...
网页自动点赞

网页自动点赞

进入网页版QQ空间 ,在开发者模式下创建脚本 var x5,y10;function autoClick(){yy5;var zandocument.getElementsByClassName(item qz_like_btn_v3);for(var i0;i<zan.length;i){if(zan[i].attributes[6].valuelike){zan[i].firstChild.click();}};window.scrollBy(x,y);}win…
阅读更多...
LC118原厂直流驱动芯片 SOP-8

LC118原厂直流驱动芯片 SOP-8

直流驱动芯片 LC118 SOP-8 电机驱动电路 马达驱动IC 马达驱动IC LC118的描述&#xff1a; LC118 是为专门为低电压下工作的系统而设计的单通道玩具直流电机驱动集成电路。它具有 H桥驱动器, 采用导通电阻非常小的P-MOS和N-MOS功率晶体管作为开关管&#xff0c;可在瞬间提供大电…
阅读更多...
CMake中target_link_libraries的使用

CMake中target_link_libraries的使用

CMake中的target_link_libraries命令用于指定链接给定目标和/或其依赖项时要使用的库或标志。来自链接库目标的使用要求将被传播(propagated)。目标依赖项的使用要求会影响其自身源代码的编译。其格式如下&#xff1a; target_link_libraries(<target> ... <item>…
阅读更多...
用Rust写一个链表，非常详细，一遍看懂

用Rust写一个链表，非常详细，一遍看懂

前言 在Rust里写一个链表可不是一件容易的事&#xff0c;涉及到很多的知识点&#xff0c;需要熟练掌握之后才能写出一个不错的链表。这篇文章主要介绍了如何写一个Rust链表&#xff0c;并且补充了涉及到的很多的额外知识点&#xff0c;尤其是所有权问题。 首先&#xff0c;你需…
阅读更多...
人工智能内容生成元年—AI绘画原理解析

人工智能内容生成元年—AI绘画原理解析

AIGC体验生成一、背景 2022年AIGC&#xff08;AI生成内容&#xff09;焕发出了勃勃生机&#xff0c;大有元年之势&#xff0c;技术与应用迭代都扎堆呈现。在各种新闻媒体处可以看到诸多关于学术前沿研究&#xff0c;以及相应落地的商用案例。可谓出现了现象级的学术-商业共振。…
阅读更多...
phpbugs代码审计第三题多重加密答案错误

phpbugs代码审计第三题多重加密答案错误

phpbugs多重加密 这题官方给的答案是错的&#xff0c;网上给的也是错的&#xff0c;麻烦别直接拿给的答案来抄好吗&#xff1f;就想纠正一下别误导别人了 源码如下: <?phpinclude common.php;$requset array_merge($_GET, $_POST, $_SESSION, $_COOKIE);//把一个或多个…
阅读更多...
安卓期末大作业——售票APP源码和设计报告

安卓期末大作业——售票APP源码和设计报告

大作业文档 项目名称&#xff1a;售票APP专业&#xff1a;班级&#xff1a;学号&#xff1a;姓名&#xff1a; 目 录 目录 一、项目功能介绍3二、项目运行环境31、开发环境32、运行环境33、是否需要联网3三、项目配置文件及工程结构31、工程配置文件32、工程结构目录4四、项…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023