WaveProgressView 水波纹加载

是一个可以设置水波颜色、波长、波宽、字体大小、颜色、进度条的最大值,当前进度值,还可以设置波纹震动的快慢。当设置一个进度不变的时候,打开时还有一个动画填满的效果(实例中的比如第二个)

这里实现主要用到的知识有 自定义view、PorterDuffXfermode和二阶贝塞尔曲线   
首先自定义WaveProgressView继承View,在构造函数中获取布局文件中设置的背景,同时设置一个画波浪的画笔和画文字的画笔。
复写onDraw方法,先把波浪画在画布上,然后画背景(给背景画笔设置PorterDuff.Mode.DST_ATOP模式:取上层非交集部分与下层交集部分 )。当然也可以是PorterDuff.Mode.SRC_ATOP,主要取决于你画的先后顺序。最后把文字画上去,形成一个最终Bitmap,最后把这个Bitmap画到onDraw的参数canvas上。
(对于波峰移动做些计算)
使用handler循环调用invalidate刷新界面。同时应该在构造函数打开handler循环。
 最后就是一些相关属性设置一些方法。

这是一个第三方自定控件,提供了一些方法直接使用即可
//设置当前进度值和当前显示的文字
waveProgressbar.setCurrent(int currentProgress,String currentText);
//设置进度条的最大值
waveProgressbar.setMaxProgress(int maxProgress);
//设置显示文字的大小和颜色
waveProgressbar.setText(String mTextColor,int mTextSize);
//设置水波的颜色
waveProgressbar.setWaveColor(String mWaveColor);
//设置波浪的高度和波浪的宽度(均为一个波峰的大小)
waveProgressbar.setWave(float mWaveHight,float mWaveWidth);
//设置波浪的上下震动的速度(这里注意值越大,震动的越小)
waveProgressbar.setmWaveSpeed(int mWaveSpeed);

具体的水加载,以及显示%的变化,是用 ValueAnimator动画实现 比较简单
ValueAnimator.ofInt(); 设置变化的起始值,和结束值
setDuration() 设置动画时间;
addUpdateListener();监听动画绘制过程
源码网址
https://github.com/fanrunqi/WaveProgressView

具体使用步骤:

1 在项目 app build.gradle dependencies 配置

compile 'cn.fanrunqi:waveprogress:1.0.0'

2 在xml 中使用该控件 WaveProgressView
3 在activity 中初始化 控件
3 对控件进行相关设置,

示例 1 一个圆形的球,有20/100水 字体黄色,水蓝色,有波动,
2 是张图片,有50/100水 字体黄色,水蓝色,有波动,运行时从0 开始加载到50停止,的动画效果;
<图片必须是背景为空,为了加载效果好,使用正方形图片>
shape 标签

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"><!--控制形状,这里为圆-->
    <solid android:color="#DDDDDD"/>
    <size android:width="150dp"
        android:height="150dp"/>
</shape>

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xiang.waveprogressview.MainActivity">

<cn.fanrunqi.waveprogress.WaveProgressView

    android:id="@+id/waveProgressbar"
    android:background="@drawable/wave"
    android:layout_width="130dp"
    android:layout_height="130dp" />

    <cn.fanrunqi.waveprogress.WaveProgressView

        android:id="@+id/waveProgressbar2"
        android:background="@drawable/bg"
        android:layout_width="130dp"
        android:layout_height="130dp" />
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

</LinearLayout>

activity

package com.xiang.waveprogressview;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.TextView;

import java.util.Timer;
import java.util.TimerTask;

import cn.fanrunqi.waveprogress.WaveProgressView;

public class MainActivity extends AppCompatActivity {
    TextView text;
    WaveProgressView waveProgressView;
    WaveProgressView waveProgressView2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        text= (TextView) findViewById(R.id.text);
        waveProgressView = (WaveProgressView) findViewById(R.id.waveProgressbar);

        waveProgressView.setCurrent(20, "20/100"); // 充满容器高度,   显示数值
        waveProgressView.setMaxProgress(100);设置进度条的最大值
        waveProgressView.setText("#ffff00", 60);// 内部显示字,及字体颜色
        waveProgressView.setWaveColor("#5b9ef4"); //内部充满颜色, 水体颜色
        waveProgressView.setWave(20, 100);//波高,及波宽
        waveProgressView.setmWaveSpeed(15);设置波浪的上下震动的速度(这里注意值越大,震动的越小)

        waveProgressView2 = (WaveProgressView) findViewById(R.id.waveProgressbar2);
        initIncrease();
        // waveProgressView2.setCurrent(70, "70"+"/100"); // 充满容器高度,   显示数值
        waveProgressView2.setMaxProgress(100);设置进度条的最大值
        waveProgressView2.setText("#ffff00", 60);// 内部显示字,及字体颜色
        waveProgressView2.setWaveColor("#5b9ef4"); //内部充满颜色, 水体颜色
        waveProgressView2.setWave(20, 100);//波高,及波宽
        waveProgressView2.setmWaveSpeed(15);设置波浪的上下震动的速度(这里注意值越大,震动的越小)
    }

    private void initIncrease() {
        ValueAnimator animator = ValueAnimator.ofInt(0, 50);
        animator.setDuration(5000);//动画总时间
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                int a=value;
                waveProgressView2.setCurrent(a, a + "/100"); // 充满容器高度,   显示数值
            }
        });
        animator.start();
    }

}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值