持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第1天,点击查看活动详情
废话之前先上图吧,如果不是有人告诉,你可以一眼看出哪个是真哪个是假吗?
仿制整个页面(仅仅页面)大概花了我两个小时,不过开源软件仅仅是静态的、不可点击的。图有形似而无功能。
自定义绘制
Jetpack Co矩阵转置mpose 自定义绘制的文章其实矩阵乘法并不少了,开源节流是什么意思基本代码上和View
体系基本类似,开源众包就是方法上有所差异
详细的内容可以见其他作者的文章,如
-
路很长运动会加油稿OoO
的JetPack-Compose – 自定义绘制 – () - RugerMc的使用 Jetpack Compose 完成自定义绘制 – (juej数组去重方法in.cn)
- ……
我就不赘述
上述代码中,中间那块数据图数组指针就是自己画的(Keep 用的是 RecyclerView
)。大致上,包括这几个部分
- 四个浅色矩形和底部文字
- 三条浅色横线和一条深色横线
- 中间的深色矩形和canvas平台底部文字
- 中间竖线、矩形和底部的小线段
其中1->3的顺序不能更改,因为三条浅色横线在浅色矩形之上,但是运动世界校园在深色矩形之下
浅色矩形
页面上一数组去重共4个浅色矩形,观察Keep可知,它们的高度与 对应数据和运动记录中最长时间之比 成正比
所以先计算一下最大的数字,找一些数组排序变量存储宽高:
// 画布的宽高
val w = size.width
val h = size.height
// 最高的矩形占的高度(3/6)
val maxH = h / 2
// 最大的数字,所有矩形以这个为基准计算高度
val maxNum = listData.maxOf { it.num }
// 以及一个参数
startIndex: Int //最左侧的矩阵对应的index
其中列表BeanItemData
定义如下:
data class ItemData(val content :String, val num : Int)
然后计算对应位置(左上角)和大小(宽高)即运动会加油稿可
for (i in 0 until min(5, listData.size - startIndex)){
val data = listData[startIndex + i]
if (i != 2){
// 画四个浅色矩形
val blockH = data.num.toFloat() / maxNum * maxH
drawRect(lightColor, Offset(w / 4f * i - blockW / 2, 0.833f * h - blockH), Size(blockW, blockH))
}
}
浅色矩形对应的文字也是类似,不过由于Canvas并不能直接画文字,所以要先获取到canvas.nativeCanvas
再在它上面drawText
for(...){
// 浅色矩形下方的文字
paint.color = Color.Gray.toArgb()
drawIntoCanvas {
FunnyCanvasUtils.drawCenterText(it.nativeCanvas, data.content, w / 4f * i , h * 7 / 8 + 2f, rect, paint)
}
}
这里用到了一个方法drawCenterText
就是让文字以给定的x,y
为横向运动中心点,纵向baseline
为基准进行绘制,感兴趣的可以看源码(见文末),此处不在赘述
画横线
画线的方法就是drawLine
,给出两个Offset
分别表示起点和终点即可。唯一注意的是,由于要画虚线,所以要设置pathEf开源软件fect = PathEffeccanvas软件t.矩阵的逆dashPathEffect
并给出一个二canvas翻译元数组(表示线长、开源节流是什么意思间隔)
// 三条浅色横线
for (i in 2 until 5){
drawLine(Color.Black.copy(alpha = 0.5f), Offset(0f, h * i / 6), Offset(w, h * i / 6), pathEffect = PathEffect.dashPathEffect(
floatArrayOf(10f,10f)))
}
其余的就不赘述了,本质上就是计算着不同位置,画不同的东西而已。可以自行见源码
其他内容
至于图片上的其他部分,则是这样组成的:
最上运动完多久可以洗澡面一部分直接就是图片(哈哈)
这一行是一个Row
,两端对齐
这一行也是一个Row
,以文本开源baseline
对齐
下面是Row
套三个Column
后续
暂时就是这样,Jetpa运动会作文ck Compose 的 布局和绘制到运动会加油稿此5篇(前几篇见我的文章),下一篇我会发个很好玩儿的内容,是开源阅读app下载安装Layout的蜜汁用法,敬请期数组待。
如果你对 Jetpack运动会加油稿 Compose 开发完整项目canvas上交有兴趣,鄙人毛遂自荐下开源众包自己的开源项目F矩阵unnySaltyFish/数组指针FunnyTranslation: 基于Jetpack Compose开发的翻译软件,支持多引擎、插件化~
本文所有代码见此处