我们在音乐播放的界面上可以看到播放的背景图片上会有一圈一圈的动态地震波,我们现在来看看这种地震波是如何实现。
我们先来看下动画效果:
接下来我们看看是如何实现的,activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.DevStoreDemo.seismicwaveview.SeismicWaveView
android:id="@+id/seismicwaveview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/boss" />
</RelativeLayout>
</LinearLayout>
自定义view,SeismicWaveView.java:
package com.DevStoreDemo.seismicwaveview;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class SeismicWaveView extends View {
private Paint paint;
private int maxWidth = 255;
private boolean isStarting = false;
private List<String> alphaList = new ArrayList<String>();
private List<String> startWidthList = new ArrayList<String>();
public SeismicWaveView(Context context) {
super(context);
init();
}
public SeismicWaveView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SeismicWaveView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
paint = new Paint();
paint.setColor(Color.YELLOW);//此处颜色可以改为自己喜欢的
alphaList.add("255");//圆心的不透明度
startWidthList.add("0");
}
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
setBackgroundColor(Color.TRANSPARENT);//颜色:完全透明
//依次绘制 同心圆
for (int i = 0; i < alphaList.size(); i++) {
int alpha = Integer.parseInt(alphaList.get(i));
int startWidth = Integer.parseInt(startWidthList.get(i));
paint.setAlpha(alpha);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, startWidth,paint);
//同心圆扩散
if (isStarting && alpha > 0 && startWidth < maxWidth)
{
alphaList.set(i, (alpha-1)+"");
startWidthList.set(i, (startWidth+1)+"");
}
}
if (isStarting&&Integer.parseInt(startWidthList.get(startWidthList.size() - 1)) == maxWidth / 5) {
alphaList.add("255");
startWidthList.add("0");
}
//同心圆数量达到6个,删除最外层圆
if(isStarting&&startWidthList.size()==6)
{
startWidthList.remove(0);
alphaList.remove(0);
}
//刷新界面
invalidate();
}
//地震波开始/继续进行
public void start() {
isStarting = true;
}
//地震波暂停
public void stop() {
isStarting = false;
}
public boolean isStarting() {
return isStarting;
}
}
最后是MainActivity.java:
package com.DevStoreDemo.seismicwaveview;
import com.example.seismicwaveview.R;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity {
private Button btn;
private SeismicWaveView seismicWaveView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn = (Button) findViewById(R.id.button);
btn.setText("开始");
seismicWaveView = (SeismicWaveView) findViewById(R.id.seismicwaveview);
//控制地震波的按钮
btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (seismicWaveView.isStarting()) {
btn.setText("继续");
seismicWaveView.stop();
} else {
btn.setText("停止");
seismicWaveView.start();
}
}
});
}
}
如以上代码就可以完成这个功能了。
下载地址如下: