android控件之水波纹进度条

最新推荐文章于 2025-06-11 21:36:44 发布

yangxinyue315

最新推荐文章于 2025-06-11 21:36:44 发布

阅读量882

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签：水波纹进度原型动画进度

本文链接：https://blog.youkuaiyun.com/yangxinyue315/article/details/87922877

android 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一款名为WaveView的GitHub项目，该组件能够创建波浪效果的进度条，并详细解释了如何通过设置波浪的水平偏移、水波纹高度、垂直振动距离和波长来调整其外观。此外，还分享了如何解决该组件缺乏数字显示的问题，通过自定义TextView继承类和在WaveHelper中添加数字变化动画，实现了进度值的显示。

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

在网上找了很多，多半是半成品，最后使用了
https://github.com/gelitenight/WaveView
这个，从效果上，还是使用上，都很不错，建议多看看它的demo，效果图在上述地址中有，我就不贴了。

几个常用的属性说明下
setWaveShiftRatio - Shift the wave horizontally. --波浪相对于初始位置的水平偏移
setWaterLevelRatio - Set water level. --水波纹的水平高度（这个就可以用来表示进度）
setAmplitudeRatio - Set vertical size of wave. --波浪垂直振动时偏离水面的最大距离
setWaveLengthRatio - Set horizontal size of wave. --一个完整的波浪的水平长度
上面几个属性，都是float类型的，取值都是0…1之间

但是，这个控件有缺点：
没有数字显示

为了解决这个问题，我想了几个办法，但是，由于技术有限，都没有实现，最后。。。。。
1、在布局上，用一个继承了TextView的控件a，布局在“水球”的中间
2、在a中，增加一个value的属性；增加一个formatstring的属性；
一个用于存储进度值
一个用于格式化显示
3、在WaveView提供的WaveHelper中，增加数字变化的动画。

代码：PercentageTextView.java
private int mValue;
    private String mFormatString = "";
    public PercentageTextView(Context context){
        super(context);
    }
    public PercentageTextView(Context context, AttributeSet attributeSet){
        super(context,attributeSet);
        init(attributeSet);
    }
    public PercentageTextView(Context context,AttributeSet attributeSet,int defStyle)
    {
        super(context,attributeSet,defStyle);
        init(attributeSet);
    }
    /**
     * 初始化view
     * @param attributeSet 属性集合
     */
    public void init(AttributeSet attributeSet){
        TypedArray typedArray = getContext().getTheme().obtainStyledAttributes(attributeSet,
                R.styleable.PercentageTextView, 0, 0);
        mValue = typedArray.getInt(R.styleable.PercentageTextView_value, 50);
        mFormatString = typedArray.getString(R.styleable.PercentageTextView_formatString);
        typedArray.recycle();
    }
    public int getValue()
    {
        return mValue;
    }
    public void setValue(int value){
        if(mValue != value) {
            mValue = value;
        }
        invalidate();
    }
    public String getFormatString(){
        return mFormatString;
    }
    public void setFormatString(String value)
    {
        if(!mFormatString.equals(value))
            mFormatString = value;
        invalidate();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        CharSequence text = String.format(mFormatString,mValue);
        setText(text);
        super.onDraw(canvas);
    }

对应在attr.xml中增加的内容
<declare-styleable name="PercentageTextView">
        <attr name="value" format="integer" />
        <attr name="formatString" format="string" />
    </declare-styleable>

对应在string.xml中增加的内容
<string name="default_percentage_format">%1$d%%</string>
在layout文件中用，类中没有使用

在WaveHelper中的initAnimation()的方法中，做了如下添加
//文字百分比动画
        if(mTextView != null) {
            int number = (int) (mWaveView.getWaterLevelRatio() * 100);

            ObjectAnimator numberAnim = ObjectAnimator.ofInt(
                    mTextView, "value", 0, number);
            numberAnim.setDuration(10000);
            numberAnim.setInterpolator(new DecelerateInterpolator());
            animators.add(numberAnim);
        }

最终搞定！！！