Android 波浪实现

在github上找到一个优秀Android库，贴上网址https://github.com/restress/android-open-project

看到一个很喜欢的waveview，效果如图，于是就想自己做做看

看了一下github上面的demo 感觉很简单哒
就是先引用一下WaveView的库，然后通过控制控件的progress属性来控制波浪的高度。
可以用来：
1.当背景
2.用作progress bar

不过我想要拿来动态显示数据 ，想做成下图，试试看

新手教程如下：
1.新建一个项目（略），然后添加https://github.com/john990/WaveView下载的项目作为引用
添加引用有两个步骤，首先在 项目/app/libs 里面添加下载的项目

第二步修改gradle里面的dependencies
allprojects {
repositories {
…
maven { url “https://jitpack.io” }
}
}
这个是放在build.gradle(project)里面

dependencies {        compile 'com.github.john990:WaveView:v0.9'}

这个放在build.gradle(module:app)里面

2.先按照官方给的demo试试看， 把main.xml和mainActivity贴上
main.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:wave="http://schemas.android.com/apk/res-auto"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <com.john.waveview.WaveView        android:id="@+id/wave_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#ff702e8c"        wave:above_wave_color="@android:color/white"        wave:blow_wave_color="@android:color/white"        wave:progress="80"        wave:wave_height="little"        wave:wave_hz="normal"        wave:wave_length="middle" />    <SeekBar        android:id="@+id/seek_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom|center_horizontal"        android:layout_marginBottom="20dp"        android:progress="80" /></FrameLayout>

MainActivity

public class MainActivity extends Activity {    private SeekBar seekBar;    private WaveView waveView;    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        seekBar = (SeekBar) findViewById(R.id.seek_bar);        waveView = (WaveView) findViewById(R.id.wave_view);        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {            @Override            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {                waveView.setProgress(progress);            }            @Override            public void onStartTrackingTouch(SeekBar seekBar) {            }            @Override            public void onStopTrackingTouch(SeekBar seekBar) {            }        });    }}

在copy了代码之后，直接实现了github文档上的示意图。

3.现在剩下的问题就是把它放在一个circle里面
但是众所周知，Android官方是没有圆形layout的
所以就用drawable画一个圆形背景

在res/drawble新建一个circle.xml，建立一个圆形容器
代码如下

<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval"    android:useLevel="false">    <solid android:color="@color/colorPrimary"/>    <size android:width="50dp"        android:height="50dp"/></shape>

然后把main.xml里面WaveView属性background写成
android:background=”@drawable/circle”
然后就实现了原型WaveView
如图

圆形WaveView下载地址
http://download.csdn.net/detail/sparkleyn/9750005