波形自定义控件（一）：效果展示与使用方法

耗时一天，终于做出了一个波形加载控件，来看看效果吧。

效果展示

基本使用

首先导入这个控件。

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    ...
    implementation 'com.github.PYJTLK:WaveLoadingView:1.0' 
}

在布局文件上放置一个WaveLoadingView，设置相关的参数。这里以上图红色的长方形风格为例。

<com.pyjtlk.waveloadingview.WaveLoadingView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:imageWaveType="rect"
        app:imageSize="20dp"
        app:color="#AA00"
        app:interval="1dp"
        app:waveHeight="slight"
        app:waveLength="5"
        app:length="10"
        app:rectRadius="8dp"
        app:ghostEffect="true"
        app:ghostAlphaMax="255"
        app:ghostAlphaMin="100"/>

接着在Activity绑定即可。

private WaveLoadingView waveLoadingView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    waveLoadingView = findViewById(R.id.loadView);
}

参数列表

参数	说明
text	文本内容
textSize	文本大小
length	总长度，设置了text参数时失效
waveLength	波长
waveHeight	波的高度，枚举变量，枚举值：slight，normal，big，large
imageWaveType	波的类型，设置了text参数时失效，枚举值：circle，square，rect，noise
color	文本或图形的颜色
customImage	自定义图像
duration	动画效果的时间，单位：ms
interval	图形的间隔距离
imageSize	图形的大小，注意图形的长宽都会使用这个尺寸
rectRadius	圆角的半径
ghostEffect	是否使用幻影效果
ghostAlphaMax	幻影效果透明度上限
ghostAlphaMax	幻影效果透明度下限

控件的参数有点多，其实总的来说可以分为三大类型。文本型（刚刚展示紫色的那个），图像型（绿、蓝、红、天蓝那四个）及自定义型（星星）。

优先级：自定义型>文本型>图像型
举个例子，如果设置了customImage，那么text 和textSize就失效了。

方法列表

常用的方法如下

方法	说明
start	启动动画
pause	暂停动画
setDuration	设置波移动时间
setColor	设置颜色
setWaveLength	设置波长
setInterval	设置图形或字符间隔
setType	设置图形类型
setGhostEffect	使用幻影效果
setGhostAlpha	设置幻影效果Alpha上下限
setWaveDrawable	设置自定义图像

高级用法

从刚刚的展示效果可以看出，WaveLoadingView的波默认下是从左往右的。如果想自定义波的移动方式可以设置一个波控制器，如下实现了一个左右来回运动的效果。

waveLoadingView.setWaveControler(new WaveLoadingView.WaveControler() {
            int i = 0;

            @Override
            public int onRefresh(int currentPostion, int start, int end) {
                if(i == 0){
                    if(currentPostion + 1 > end){
                        i = 1;
                        return currentPostion - 1;
                    }else{
                        return currentPostion + 1;
                    }
                }

                if(i == 1){
                    if(currentPostion - 1 < start){
                        i = 0;
                        return currentPostion + 1;
                    }else{
                        return currentPostion - 1;
                    }
                }

                return 0;
            }
        });

效果如下。

最后

项目Github地址：https://github.com/PYJTLK/WaveLoadingView
由于此控件用的是androidx库，项目使用android.support库的朋友可以把它下载下来自行修改。如果喜欢这个控件的话，可以点个star支持一下。

下一篇

后续几篇将讲解WaveLoadingView的实现原理，其中下一篇讲解自定义控件的初始化流程。