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