itrenjunhua/waveview

Android自定义控件实现动态百分比水波纹效果

WaveView Android自定义水波纹百分比效果控件

Android 自定义控件实现动态百分比水波纹效果，支持修改波纹长度、波峰高度、颜色、是否需要边框、边框的颜色、大小、可以控制波纹的移动速度，支持矩形和圆形两种效果。所有属性可以通过布局文件设置，也可以在代码中设置。

效果图展示

自定义属性字段展示

<!--自定义水波纹效果属性-->  
<declare-styleable name="WaveView">  
    <!--波浪1的长度、高度、颜色和每次重绘的偏移量-->  
    <attr name="wave1Length" format="integer" />  
    <attr name="wave1Height" format="integer" />  
    <attr name="wave1Color" format="color" />  
    <attr name="wave1Offset" format="integer" />  
    <!--波浪2的长度、高度、颜色和每次重绘的偏移量-->  
    <attr name="wave2Length" format="integer" />  
    <attr name="wave2Height" format="integer" />  
    <attr name="wave2Color" format="color" />  
    <attr name="wave2Offset" format="integer" />  
    <!--边框的宽度和颜色-->  
    <attr name="borderWidth" format="dimension" />  
    <attr name="borderColor" format="color" />  
    <!--文字的大小和颜色-->  
    <attr name="textColor" format="color" />  
    <attr name="textSize" format="dimension" />  
    <!--水位高度的百分比-->  
    <attr name="precent" format="float" />  
    <!--两次重绘的间隔时间-->  
    <attr name="intervalTime" format="integer" />  
    <!--控件的显示形状，rect矩形、circle圆形-->  
    <attr name="showShape" format="enum">  
        <enum name="rect" value="0" />  
        <enum name="circle" value="1" />  
    </attr>  
</declare-styleable>

使用

使用代码控制属性

① 在布局文件中定义控件

<com.waveview.view.WaveView  
    android:id="@+id/waveview"  
    android:layout_width="200dp"  
    android:layout_height="200dp"  
    android:layout_marginTop="10dp"/>

② 在代码中找到控件

WaveView waveview = (WaveView) findViewById(R.id.waveview);

③ 通过控件设置属性

// 代码设置相关属性  
waveview.setBorderWidth(2)  
    .setWaveColor1(Color.RED)  
    .setWaveColor2(Color.parseColor("#80ff0000"))  
    .setBorderColor(Color.GREEN)  
    .setTextColor(Color.BLUE)  
    .setShape(WaveView.ShowShape.RECT)  
    .setTextSize(36)  
    .setPrecent(0.65f)  
    .setTime(2);  

---

使用xml布局文件控制属性

<com.waveview.view.WaveView  
    android:id="@+id/waveview"  
    android:layout_width="200dp"  
    android:layout_height="200dp"  
    android:layout_marginTop="10dp"  
    renj:borderColor="#00ff00"  
    renj:borderWidth="2dp"  
    renj:intervalTime="3"  
    renj:precent="0.6"  
    renj:showShape="circle"  
    renj:textColor="#0000ff"  
    renj:textSize="18sp"  
    renj:wave1Color="#ff0000"  
    renj:wave2Color="#80ff0000"/> 

注意

使用xml文件控制属性时，注意添加属性名称空间xmlns:renj="http://schemas.android.com/apk/res-auto"

设置百分比变化监听

waveview.setPrecentChangeListener(new WaveView.PrecentChangeListener() {  
        @Override  
        public void precentChange(double precent) {  
            tvPrecent.setText("当前进度：" + precent + "");  
        }  
    }); 

CSDN博客查看相关内容 点击这里