WaveProgressView-----水纹进度球

首先我们来看看效果图:怎么样是不是很酷很炫?很想在自己的程序中使用?

这里写图片描述

下面我们就来看看它在AndroidStudio中的简单实现吧:

第一步:在app的Build.gradle中的dependencies中添加第三方依赖:

dependencies {
    //配置第三方控件的依赖
    compile 'cn.fanrunqi:waveprogress:1.0.0'
}

第二步:修改最低适配sdk为19 , 由于WaveProgressView最低兼容sdk版本是19 , 所以如果你开发的项目兼容

最低版本小于19,那么狠抱歉……

defaultConfig {
        applicationId "com.jackson.waveprogressviewdemo"
        minSdkVersion 19
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"

第三步: 为WaveProgressView准备圆形背景:在drawable目录下新建 wave_bg.xml , 使用shap标签,

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"><!--形状为圆弧形-->
    <solid android:color="@color/colorPrimaryDark"/>
    <size android:width="200dp"
        android:height="200dp"/>

</shape>

第四步:在layout布局文件中添加控件WaveProgressView , 并将背景设置为刚才定义的图片:

<cn.fanrunqi.waveprogress.WaveProgressView
        android:id="@+id/wave_progress_view"
        android:background="@drawable/wave_bg"
        android:layout_width="200dp"
        android:layout_height="200dp" />

第五步:初始化WaveProgressView:

    /**
     * 初始化WaveProgressView
     */
    private void initProgressWave() {

        mWave= (WaveProgressView) findViewById(R.id.wave_progress_view);
        mWave.setMaxProgress(100);设置进度条的最大值
        mWave.setText("#ffff00", 60);// 字体颜色以及大小
        mWave.setWaveColor("#5b9ef4"); //内部充满颜色, 水体颜色
        mWave.setWave(20, 100);//波高,及波宽
        mWave.setmWaveSpeed(60);//波浪改变速度

    }

最后一步:动态更新WaveProgressView的进度 , 这里采用两种方法 , 个人感觉都还不错:

方法一 : 通过ValueAnimator(属性动画)来动态改变进度.


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

方法二: 通过Timer的日程表和handler实现动态改变进度.


    int mToProgress=68;//目标进度
    int mProgress;//当前进度
    Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if (msg.what==0x123){
                mProgress++;
                if (mProgress<=mToProgress) {
                    mWave.setCurrent(mProgress, mProgress + "/100");
                }else{
                    timer.cancel();//取消定时器
                }

            }
        }
    };

    /**
     * 使用 Timer定时器实现动态改变进度球
     */
    private void initProgress() {
        timer=new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {

                handler.sendEmptyMessage(0x123);

            }
        },0,200);//时间间隔为200
    }

综合来看 , 这两种方法一种通过线程来实现进度更新 , 一种通过通过动画来实现 , 一个可以设置完成进度变化所需要的总时间 , 一个可以规定两个进度值变化之间的间隔 , 各有优缺 , 运用之妙 , 存乎于心!

*公告公告::::不知何故,只能实现进度递增—水波和进度值同增 , 不能实现进度递减—水波先增而进度值递减 , 若有实现进度递减的方法 , 还望赐教…谢了*

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值