ComposeWaveLoading
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 |
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) | 无背景，前景单色 |
176 Nov 22, 2022
59 Dec 14, 2022
4 May 1, 2022
139 Jan 2, 2023
1 Aug 9, 2022
110 Dec 29, 2022
3 Dec 31, 2022
1 Aug 11, 2022
1 Jul 11, 2022
1 Mar 8, 2022
3 Jun 20, 2022
180 Jan 2, 2023
0 Jan 26, 2022
14 Dec 21, 2022
23 Aug 24, 2022
9 Jul 5, 2022
5 Apr 5, 2022
22 Dec 13, 2022
3 Dec 15, 2022
90 Dec 15, 2022
46 Nov 29, 2022
2 Feb 15, 2022
38 Sep 25, 2022
39 Dec 7, 2022
280 Dec 29, 2022
186 Jan 1, 2023
46 Oct 10, 2022
382 Jan 5, 2023
548 Jan 7, 2023