在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