android控件之 水波纹进度条

在网上找了很多,多半是半成品,最后使用了
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);
        }

最终搞定!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yangxinyue315

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值