如何在Android开发中利用Shape让你的Composable开发事半功倍

虽然2023年4月Graphics-Shapes库就已经被发布^[1], 但是相关的资料仍寥寥无几, 近日浏览 Fun with shapes in Compose ^[2]这篇文章的时候, 才发觉已经可以用shape来实现很多的功能了.

Shape是什么?

简单来说, 借助Compose, 您可以创建由多边形组成的形状^[3]. 这么说可能不太直观, 那么我们可以下Shape都可以创建出什么样的内容:

虽然不能直接处理任意两个形状之间的变换问题,(当然, 这个问题是设计时的问题.) 但是对于多边形结构之间的变化来说, 却能帮助我们简化大量的操作.

Shape能做到什么?

正如前文中所说, Shape可以帮助我们完成多边形之间的变化.

我们先看一下, 首先展示的的6种预设的情况.

然后是作为clip裁剪显示图片的效果, 这里添加了缩放和选择的效果, 如果有需要的话可以根据实际情况添加需要的效果.

下面就是对开始和结束多边形的设置了. 需要注意的是, 部分预设的情况是可以自定义形状的.^[4]

下面我们依次显示不同预设效果都可以如何进行条件.

需要注意的是, 在实际使用的过程中, 如果直接在DrawScope 中使用的话, radius , width , height 需要设置为实际View的大小, 而如果将其构建出来提供给类似clip中使用的话, radius , width , height则需要设置为比例的情况.^[5]

RoundedPolygonType.Common

kotlin 复制代码
fun RoundedPolygon(
    @IntRange(from = 3) numVertices: Int,
    radius: Float = 1f,
    centerX: Float = 0f,
    centerY: Float = 0f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    perVertexRounding: List<CornerRounding>? = null
) = RoundedPolygon(
    ...
)

RoundedPolygonType.CIRCLE

kotlin 复制代码
fun RoundedPolygon.Companion.circle(
    @IntRange(from = 3) numVertices: Int = 8,
    radius: Float = 1f,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}

RoundedPolygonType.PILL

kotlin 复制代码
fun RoundedPolygon.Companion.pill(
    width: Float = 2f,
    height: Float = 1f,
    smoothing: Float = 0f,
    centerX: Float = 0f,
    centerY: Float = 0f,
): RoundedPolygon {
    ...
}

RoundedPolygonType.PILL_STAR

kotlin 复制代码
fun RoundedPolygon.Companion.pillStar(
    width: Float = 2f,
    height: Float = 1f,
    numVerticesPerRadius: Int = 8,
    @FloatRange(
        from = 0.0, fromInclusive = false, to = 1.0, toInclusive = false
    ) innerRadiusRatio: Float = .5f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    innerRounding: CornerRounding? = null,
    perVertexRounding: List<CornerRounding>? = null,
    @FloatRange(from = 0.0, to = 1.0) vertexSpacing: Float = 0.5f,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}

RoundedPolygonType.RECTANGLE

kotlin 复制代码
fun RoundedPolygon.Companion.rectangle(
    width: Float = 2f,
    height: Float = 2f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    perVertexRounding: List<CornerRounding>? = null,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}

RoundedPolygonType.STAR

kotlin 复制代码
fun RoundedPolygon.Companion.star(
    numVerticesPerRadius: Int,
    radius: Float = 1f,
    innerRadius: Float = .5f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    innerRounding: CornerRounding? = null,
    perVertexRounding: List<CornerRounding>? = null,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}

Final

Demo: https://github.com/clwater/AndroidComposeCanvas

1\]:[developer.android.com/jetpack/and...](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.android.com%2Fjetpack%2Fandroidx%2Freleases%2Fgraphics%23graphics-shapes-1.0.0-alpha01 "https://developer.android.com/jetpack/androidx/releases/graphics#graphics-shapes-1.0.0-alpha01") \[2\]:[medium.com/androiddeve...](https://link.juejin.cn?target=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Ffun-with-shapes-in-compose-8814c439e1a0 "https://medium.com/androiddevelopers/fun-with-shapes-in-compose-8814c439e1a0") \[3\]:[developer.android.com/jetpack/com...](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.android.com%2Fjetpack%2Fcompose%2Fgraphics%2Fdraw%2Fshapes "https://developer.android.com/jetpack/compose/graphics/draw/shapes") \[4\]:[developer.android.com/jetpack/com...](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.android.com%2Fjetpack%2Fcompose%2Fgraphics%2Fdraw%2Fshapes%3Fhl%3Dzh-cn%23custom-polygons "https://developer.android.com/jetpack/compose/graphics/draw/shapes?hl=zh-cn#custom-polygons") \[5\]: 当前使用的版本为1.0.0-alpha05, 不保证后续此特性继续保留.

相关推荐
沐怡旸1 小时前
【底层机制】【Android】深入理解UI体系与绘制机制
android·面试
啊森要自信1 小时前
【GUI自动化测试】YAML 配置文件应用:从语法解析到 Python 读写
android·python·缓存·pytest·pip·dash
下位子2 小时前
『AI 编程』用 Codex 开发识字小帮手应用
android·openai·ai编程
Zender Han3 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
君逸臣劳3 小时前
玩Android Flutter版本,通过项目了解Flutter项目快速搭建开发
android·flutter
叫我龙翔3 小时前
【MySQL】从零开始了解数据库开发 --- 基本查询
android·mysql·数据库开发
2501_916008893 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
马尚道4 小时前
掌握Kotlin编程,从入门到精通:视频教程
kotlin·ai编程
撩得Android一次心动5 小时前
Android adb 基础使用指南
android·adb
为java加瓦5 小时前
PHP MQTT 订阅服务:实时消息接收与数据库存储解决方案
android