Android 波浪实现

2019-11-09 16:54:31

字体：大中小

来源：转载

供稿：网友

在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 如图这里写图片描述