Dialog 按照顺序弹窗的优雅写法
作者:让开,我要吃人了 发布时间:2021-10-18 18:35:25
我为 Compose 写了一个波浪效果的进度加载库,API 的设计上符合 Compose 的开发规范,使用非常简便。
1. 使用方式
在 root 的 build.gradle
中引入 jitpack
,
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
在 module 的 build.gradle
中引入 ComposeWaveLoading
的最新版本
dependencies {
implementation 'com.github.vitaviva:ComposeWaveLoading:$latest_version'
}
2. API 设计思想
Box {
WaveLoading (
progress = 0.5f // 0f ~ 1f
) {
Image(
painter = painterResource(id = R.drawable.logo_tiktok),
contentDescription = ""
)
}
}
传统的 UI 开发方式中,设计这样一个波浪控件,一般会使用自定义 View 并将 Image 等作为属性传入。 而在 Compose 中,我们让 WaveLoading
和 Image
以组合的方式使用,这样的 API 更加灵活,WaveLoding
的内部可以是 Image
,也可以是 Text
亦或是其他 Composable
。波浪动画不拘泥于某一特定 Composable, 任何 Composable 都可以以波浪动画的形式展现, 通过 Composable 的组合使用,扩大了 “能力” 的覆盖范围。
3. API 参数介绍
@Composable
fun WaveLoading(
modifier: Modifier = Modifier,
foreDrawType: DrawType = DrawType.DrawImage,
backDrawType: DrawType = rememberDrawColor(color = Color.LightGray),
@FloatRange(from = 0.0, to = 1.0) progress: Float = 0f,
@FloatRange(from = 0.0, to = 1.0) amplitude: Float = defaultAmlitude,
@FloatRange(from = 0.0, to = 1.0) velocity: Float = defaultVelocity,
content: @Composable BoxScope.() -> Unit
) { ... }
参数说明如下:
参数 | 说明 |
---|---|
progress | 加载进度 |
foreDrawType | 波浪图的绘制类型: DrawColor 或者 DrawImage |
backDrawType | 波浪图的背景绘制 |
amplitude | 波浪的振幅, 0f ~ 1f 表示振幅在整个绘制区域的占比 |
velocity | 波浪移动的速度 |
content | 子Composalble |
接下来重点介绍一下 DrawType
。
DrawType
波浪的进度体现在前景(foreDrawType)和后景(backDrawType)的视觉差,我们可以为前景后景分别指定不同的 DrawType 改变波浪的样式。
sealed interface DrawType {
object None : DrawType
object DrawImage : DrawType
data class DrawColor(val color: Color) : DrawType
}
如上,DrawType 有三种类型:
None: 不进行绘制
DrawColor:使用单一颜色绘制
DrawImage:按照原样绘制
以下面这个 Image
为例, 体会一下不同 DrawType 的组合效果
index | backDrawType | foreDrawType | 说明 |
---|---|---|---|
1 | DrawImage | DrawImage | 背景灰度,前景原图 |
2 | DrawColor(Color.LightGray) | DrawImage | 背景单色,前景原图 |
3 | DrawColor(Color.LightGray) | DrawColor(Color.Cyan) | 背景单色,前景单色 |
4 | None | DrawColor(Color.Cyan) | 无背景,前景单色 |
注意 backDrawType 设置为 DrawImage 时,会显示为灰度图。
4. 原理浅析
简单介绍一下实现原理。为了便于理解,代码经过简化处理,完整代码可以在 github 查看
这个库的关键是可以将 WaveLoading {...}
内容取出,加以波浪动画的形式显示。所以需要将子 Composalbe 转成 Bitmap 进行后续处理。
4.1 获取 Bitmap
我在 Compose 中没找到获取位图的办法,所以用了一个 trick 的方式, 通过 Compose 与 Android 原生视图良好的互操作性,先将子 Composalbe 显示在 AndroidView
中,然后通过 native 的方式获取 Bitmap:
@Composable
fun WaveLoading (...)
{
Box {
var _bitmap by remember {
mutableStateOf(Bitmap.createBitmap(1, 1, Bitmap.Config.RGB_565))
}
AndroidView(
factory = { context ->
// Creates custom view
object : AbstractComposeView(context) {
@Composable
override fun Content() {
Box(Modifier.wrapContentSize(){
content()
}
}
override fun dispatchDraw(canvas: Canvas?) {
val bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val canvas2 = Canvas(source)
super.dispatchDraw(canvas2)
_bitmap = bmp
}
}
}
)
WaveLoadingInternal(bitmap = _bitmap)
}
}
AndroidView
是一个可以绘制 Composable 的原生控件,我们将 WaveLoading 的子 Composable 放在其 Content
中,然后在 dispatchDraw
中绘制时,将内容绘制到我们准备好的 Bitmap 中。
4.2 绘制波浪线
我们基于 Compose 的 Canvas 绘制波浪线,波浪线通过 Path
承载 定义 WaveAnim
用来进行波浪线的绘制
internal data class WaveAnim(
val duration: Int,
val offsetX: Float,
val offsetY: Float,
val scaleX: Float,
val scaleY: Float,
) {
private val _path = Path()
//绘制波浪线
internal fun buildWavePath(
dp: Float,
width: Float,
height: Float,
amplitude: Float,
progress: Float
): Path {
var wave = (scaleY * amplitude).roundToInt() //计算拉伸之后的波幅
_path.reset()
_path.moveTo(0f, height)
_path.lineTo(0f, height * (1 - progress))
// 通过正弦曲线绘制波浪
if (wave > 0) {
var x = dp
while (x < width) {
_path.lineTo(
x,
height * (1 - progress) - wave / 2f * Math.sin(4.0 * Math.PI * x / width)
.toFloat()
)
x += dp
}
}
_path.lineTo(width, height * (1 - progress))
_path.lineTo(width, height)
_path.close()
return _path
}
}
如上,波浪线 Path 通过正弦函数绘制。
4.3 波浪填充
有了 Path ,我们还需要填充内容。填充的内容前文已经介绍过,或者是 DrawColor
或者 DrawImage
。 绘制 Path 需要定义 Paint
val forePaint = remember(foreDrawType, bitmap) {
Paint().apply {
shader = BitmapShader(
when (foreDrawType) {
is DrawType.DrawColor -> bitmap.toColor(foreDrawType.color)
is DrawType.DrawImage -> bitmap
else -> alphaBitmap
},
Shader.TileMode.CLAMP,
Shader.TileMode.CLAMP
)
}
}
Paint 使用 Shader 着色器绘制 Bitmap, 当 DrawType 只绘制单色时, 对位图做单值处理:
/**
* 位图单色化
*/
fun Bitmap.toColor(color: androidx.compose.ui.graphics.Color): Bitmap {
val bmp = Bitmap.createBitmap(
width, height, Bitmap.Config.ARGB_8888
)
val oldPx = IntArray(width * height) //用来存储原图每个像素点的颜色信息
getPixels(oldPx, 0, width, 0, 0, width, height) //获取原图中的像素信息
val newPx = oldPx.map {
color.copy(Color.alpha(it) / 255f).toArgb()
}.toTypedArray().toIntArray()
bmp.setPixels(newPx, 0, width, 0, 0, width, height) //将处理后的像素信息赋给新图
return bmp
}
4.4 波浪动画
最后通过 Compose 动画让波浪动起来
val transition = rememberInfiniteTransition()
val waves = remember(Unit) {
listOf(
WaveAnim(waveDuration, 0f, 0f, scaleX, scaleY),
WaveAnim((waveDuration * 0.75f).roundToInt(), 0f, 0f, scaleX, scaleY),
WaveAnim((waveDuration * 0.5f).roundToInt(), 0f, 0f, scaleX, scaleY)
)
}
val animates : List<State<Float>> = waves.map { transition.animateOf(duration = it.duration) }
为了让波浪更有层次感,我们定义三个 WaveAnim
以 Set 的形式做动画
最后,配合 WaveAnim 将波浪的 Path 绘制到 Canvas 即可
Canvas{
drawIntoCanvas { canvas ->
//绘制后景
canvas.drawRect(0f, 0f, size.width, size.height, backPaint)
//绘制前景
waves.forEachIndexed { index, wave ->
canvas.withSave {
val maxWidth = 2 * scaleX * size.width / velocity.coerceAtLeast(0.1f)
val maxHeight = scaleY * size.height
canvas.drawPath (
wave.buildWavePath(
width = maxWidth,
height = maxHeight,
amplitude = size.height * amplitude,
progress = progress
), forePaint
)
}
}
}
}
需要源码可以私信我,当天回复
来源:https://blog.csdn.net/weixin_55362248/article/details/120374053
猜你喜欢
- 第一章:基本的圆角框第二章:透明圆角化背景图片第三章:圆角化图片 第四章:CSS圆角框组件 V1.0序言:在我的文章《超圆滑圆角框的半完美解
- 1、目前来看,百付宝仅仅只是C2C的一个支付后台。他的内容只集中于“钱和订单”两个环节,没有其他干扰信息。2、百付宝的界面表现很简单。因为简
- 前言pandas对大数据有很多便捷的清洗用法,尤其针对缺失值和重复值。缺失值就不用说了,会影响计算,重复值有时候可能并未带来新的信息反而增加
- 注意主窗口一定要为tk.Tk(),在主窗口上通过button的点击相应子函数创建子窗口,注意此时创建出来的窗口必须是Toplevel,否则出
- Python中的切片知识.在Python中,切片(slice)是对序列型对象(如list, string, tuple)的一种高级索引方法。
- 导语哈喽铁汁们好久不见吖~小编已经复工了于是马不停蹄赶来给大家准备新年礼物算开工礼物吧!海龟来作图虎年就是要画老虎2022不用纸和笔~今晚画
- 折线图介绍折线图和柱状图一样是我们日常可视化最多的一个图例,当然它的优势和适用场景相信大家肯定不陌生,要想快速的得出趋势,抓住趋势二字,就会
- 在Windows系统中用“Ctrl+C”和“Ctrl+V”就可以完成复制、粘贴工作,是不是很爽?其实使用a标签的accesskey属性也可以
- python查找图片按钮的坐标位置因为业务需求,了解到一些python自动化的内容,其中有类似于airtest截图点击的东西。本来是想使用p
- 文章介绍了flask框架中的cookie和session。Session是在服务器端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存
- 一、%号占位符这是一种引入最早的一种,也是比较容易理解的一种方式.使用方式为:1、格式化字符串中变化的部分使用占位符2、变量以元组形式提供3
- 本文实例讲述了Python中函数参数调用方式。分享给大家供大家参考,具体如下:Python中函数的参数是很灵活的,下面分四种情况进行说明。(
- 我们经常用到的PHP取整函数,主要是:ceil,floor,round,intval。ceil -- 进一法取整说明float ceil (
- 一、Tkinter的介绍和简单教程Tkinter 是 Python 的标准 GUI 库。Python 使用 Tkinter 可以快速的创建
- 引入依赖#?导入模块import?pymysqlimport?pandas?as?pdimport?numpy?as?npimport?ti
- 本文实例为大家分享了python实现图片识别汽车的具体代码,供大家参考,具体内容如下准备工作1、登陆开发者控制台2、安装 pip insta
- 将数组传递给前台模板:1.def modifyBtn(req,modifyip): print modifyip c
- 前言Python本身已有顺序表(List、Tupple)的实现,所以这里从栈开始。什么是栈想象一摞被堆起来的书,这就是栈。这堆书的特点是,最
- 发现问题最近由于卸载Mysql时将很多相关依赖包都卸载了,重装mysql后启动django出现如下错误:django.core.except
- 序列概念在分片规则里list、tuple、str(字符串)都可以称为序列,都可以按规则进行切片操作切片操作注意切片的下标0代表顺序的第一个元