自定义安卓波浪进度条展示

最新推荐文章于 2024-08-28 16:27:43 发布

AndroidMsky

最新推荐文章于 2024-08-28 16:27:43 发布

阅读量5.4k

点赞数 2

分类专栏：安卓技术 Msky带你玩转安卓自定义View 文章标签： android 自定义view 动画进度条

本文链接：https://blog.youkuaiyun.com/AndroidMsky/article/details/52103432

版权

安卓技术同时被 2 个专栏收录

36 篇文章

订阅专栏

Msky带你玩转安卓自定义View

7 篇文章

订阅专栏

本文展示了如何在Android中创建一个自定义的波浪形进度条动画，包括详细的实现过程和最终的动态效果展示。同时提供了GIF演示、源码下载地址以及相关参考文献。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

千呼万唤始出来，先上GIF看效果啦。

这边网络问题MarkDown进不去所以老的编辑模式大家凑合着看，博主顶着4G在更新博客希望大家支持。

加入有一天你们boss说，诶小明（一个程序猿）啊，今天我们这个文件下载要用一个新的进度条，美工已经设计好了，美工是在大海边长大的，所以设计了一个像海浪一样的进度条，那么小明你应该如何实现它呢。

想想原生控件，肯定是没有了。那么我们只好拿起我们的工匠精神去自定义view了！

于是乎那就先实现波浪再实现动态改变波浪高度吧。

首先需要一个动画值发生器

ValueAnimator animator = ValueAnimator.ofInt(0, mWaveLength);
        animator.setDuration(1000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mOffset = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();

然后利用path画出这个大大的波浪

mPath.reset();
        mPath.moveTo(-mWaveLength + mOffset, mCenterY);
        for (int i = 0; i < mWaveCount; i++) {//50是波纹的大小

            mPath.quadTo((-mWaveLength * 3 / 4) + (i * mWaveLength) + mOffset, mCenterY + 50,
                    (-mWaveLength / 2) + (i * mWaveLength) + mOffset, mCenterY);

            mPath.quadTo((-mWaveLength / 4) + (i * mWaveLength) + mOffset, mCenterY - 50, i * mWaveLength + mOffset, mCenterY);
        }

        mPath.lineTo(mscreenWidth, mscreenHeight);
        mPath.lineTo(0, mscreenHeight);
        mPath.close();
        canvas.drawPath(mPath, mPaint);

好了大波浪已经有了。那么如何动态改变它的高度也就简单了。

  public void setProgress(int a) {

        this.c = 100 - a;
        if (c < 0) c = 0;
        if (c > 100) c = 100;
        textc = a;
        mCenterY = (mscreenHeight / 100)*c;


    }

自定义progress的几个属性颜色大小之类。

<resources>
    <declare-styleable name="WavaBezierProgress">

        <attr name="progressColor" format="color"></attr>
        <attr name="progressTextColor" format="color"></attr>
        <attr name="progressTextSize" format="dimension"></attr>
        <attr name="progressTextLocation" format="dimension"></attr>


    </declare-styleable>

然后再Main里面调用，这里主页面比较简单就不细说了。

private WavaBezierProgress mWavaBezierProgress;
    private int value = 10;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWavaBezierProgress = (WavaBezierProgress) findViewById(R.id.wavaBezierProgress);
        mWavaBezierProgress.setProgress(value);


    }

    public void jia(View v) {
        value += 10;
        mWavaBezierProgress.setProgress(value);
    }

    public void jian(View v) {

        value -= 10;
        mWavaBezierProgress.setProgress(value);
    }

    public void man(View v) {
        value = 100;
        mWavaBezierProgress.setProgress(value);

    }

效果还是蛮简单的，相信大家阅读后对自定义view也不会太陌生了

博主原创未经允许不许转载。

欢迎加安卓开发交流群：308372687（博主尽可能帮助大家欢迎讨论交流）

下载地址

https://github.com/AndroidMsky/WaveBezierProgress

参考文献

http://blog.youkuaiyun.com/eclipsexys/article/details/51956908