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