阿超 > MultiWaveHeader

MultiWaveHeader

2025-02-22

android

不像葡萄，不像鲜花，不像微微的雪。——博尔赫斯的《山峰上的年轻牧人》

https://github.com/scwang90/MultiWaveHeader

多重水波纹效果：使用 MultiWaveHeader 实现动态水波效果

如果你正在开发一款 Android 应用，并且想为其加入一些视觉效果，那么动态水波纹可能是一个不错的选择。而今天，我们将介绍一个很棒的库 MultiWaveHeader，它能帮助你轻松实现水波纹效果，并且支持高度自定义，能够适应不同的设计需求。

什么是 MultiWaveHeader？

MultiWaveHeader 是一个 Android 控件，可以实现动态的水波效果。它允许开发者定制水波的波形、颜色、速度、方向等多个参数，提供了灵活的配置选项，适合用于各种需要视觉反馈的场景，比如加载动画、刷新控件等。

功能特点

  1. 调节进度：可以动态调整水波的进度。
  2. 调节速度：支持自定义水波的移动速度。
  3. 方向设置：支持设置水波的上下方向。
  4. 波浪数量设置：没有波浪数量的上限，你可以自由设置波浪数量。
  5. 精细波形定义：支持精确控制每个波形的参数，比如偏移、拉伸、原始速度等。
  6. 渐变颜色和方向：支持设置水波的颜色渐变，并可以调整渐变的方向。

演示与效果

MultiWaveHeader 提供了非常直观的效果演示，帮助你快速理解其工作原理。

演示

你可以通过下载 APK Demo 来进行体验：Download APK-Demo

如何在项目中使用 MultiWaveHeader

1. 添加依赖

首先，你需要在你的 build.gradle 文件中添加 MultiWaveHeader 作为依赖：

1
2
3
4
implementation 'com.scwang.wave:MultiWaveHeader:1.0.0'

// 如果你使用 AndroidX:
implementation 'com.scwang.wave:MultiWaveHeader:1.0.0-andx'

2. 在 XML 布局中添加 MultiWaveHeader

然后，在你的布局文件中添加 MultiWaveHeader 控件，它将作为水波效果的容器展示：

1
2
3
4
<com.scwang.wave.MultiWaveHeader
    android:id="@+id/waveHeader"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>

3. 配置水波效果

在 Java 代码中，你可以通过设置属性来调整水波的效果，例如进度、速度、颜色等：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
MultiWaveHeader waveHeader = findViewById(R.id.waveHeader);

waveHeader.setStartColor(R.color.colorPrimary);  // 水波开始颜色
waveHeader.setCloseColor(R.color.colorPrimaryDark);  // 水波结束颜色
waveHeader.setColorAlpha(0.5f);  // 颜色透明度

waveHeader.setWaveHeight(50);  // 水波的高度
waveHeader.setGradientAngle(360);  // 渐变角度
waveHeader.setProgress(0.8f);  // 进度设置
waveHeader.setVelocity(1f);  // 速度
waveHeader.setScaleY(-1f);  // 垂直翻转

waveHeader.start();  // 开始水波效果
waveHeader.stop();   // 停止水波效果

你也可以通过 XML 进行配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<com.scwang.wave.MultiWaveHeader
    android:id="@+id/waveHeader"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:scaleY="-1"
    app:mwhVelocity="1"
    app:mwhProgress="1"
    app:mwhRunning="true"
    app:mwhGradientAngle="45"
    app:mwhWaveHeight="50dp"
    app:mwhColorAlpha="0.45"
    app:mwhStartColor="@color/colorPrimaryDark"
    app:mwhCloseColor="@color/colorPrimaryLight"
    app:mwhWaves="MultiWave"/>

4. 高度定制波形

MultiWaveHeader 还支持高度定制每一个水波的参数，像是水波的水平和垂直偏移、拉伸比例以及速度等。你可以通过如下代码来定制：

1
2
3
4
5
6
7
8
9
10
String[] waves = new String[]{
    "70,25,1.4,1.4,-26", // wave-1: offsetX(dp), offsetY(dp), scaleX, scaleY, velocity(dp/s)
    "100,5,1.4,1.2,15",
    "420,0,1.15,1,-10", // wave-3: 水平偏移(dp), 竖直偏移(dp), 水平拉伸, 垂直拉伸, 速度(dp/s)
    "520,10,1.7,1.5,20",
    "220,0,1,1,-15",
};
waveHeader.setWaves(TextUtils.join(" ", Arrays.asList(waves)));  // 自定义水波
waveHeader.setWaves("PairWave");  // 默认的两个波形
waveHeader.setWaves("MultiWave");  // 默认的五个波形

5. 选择不同的波形样式

MultiWaveHeader 还提供了多个预设波形样式，例如 PairWave 和 MultiWave，让你能够快速实现不同的视觉效果。你只需在 XML 或代码中指定波形样式即可。

波形方向控制：

  • 顶部方向水波：水波从顶部向下移动，表现为从顶部开始逐渐扩散。
  • 底部方向水波：水波从底部向上移动，表现为从底部开始逐渐扩散。

波形类型：

  • 一对波形：默认情况下会显示两个水波，它们同步运动，产生一种对称效果。
  • 单一波形：只会显示一个波形，适用于简洁的视觉设计。

你可以根据需求选择合适的方向和波形数量来实现最合适的视觉效果。

水波控制台效果

通过选择不同的方向、波形数量、速度和渐变方向等选项，MultiWaveHeader 可以呈现多种不同的水波效果。例如：

  • 顶部 vs 底部波形方向：你可以在顶部或底部创建水波，向上或向下展开，来适应不同的界面设计需求。
  • 一对 vs 单一波形：一对波形效果适合对称美感，而单一波形则给人一种简洁的动态感。

总结

MultiWaveHeader 是一个功能强大的 Android 库，通过简单的配置，你可以在应用中加入生动的水波效果。无论是动态加载效果，还是作为刷新控件，或者仅仅是为了美化界面，MultiWaveHeader 都能帮助你实现流畅且美观的视觉效果。

如果你想要在应用中加入动态的水波纹效果，并希望拥有高度的自定义功能，MultiWaveHeader 是一个不容错过的工具。