Android自定义View之雷达涟漪效果(附带demo)

一直在找类似雷达效果的view怎么做，最近看了许多博客，也是有所收获的。

先上效果图

感觉有点奇妙，那就对了。

自定义view文件。

package com.example.xuhong.radarviewiphone_master;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.RelativeLayout;

import java.util.ArrayList;
public class RadarView extends RelativeLayout{

private static final int DEFAULT_RIPPLE_COUNT=6;
private static final int DEFAULT_DURATION_TIME=3000;
private static final float DEFAULT_SCALE=6.0f;
private static final int DEFAULT_FILL_TYPE=0;

private int rippleColor;
private float rippleStrokeWidth;
private float rippleRadius;
private int rippleDurationTime;
private int rippleAmount;
private int rippleDelay;
private float rippleScale;
private int rippleType;
private Paint paint;
private boolean animationRunning=false;
private AnimatorSet animatorSet;
private ArrayList<Animator> animatorList;
private LayoutParams rippleParams;
private ArrayList<RippleView> rippleViewList=new ArrayList<RippleView>();

public RadarView(Context context) {
super(context);
}

public RadarView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}

public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}

private void init(final Context context, final AttributeSet attrs) {
if (isInEditMode())
return;

if (null == attrs) {
throw new IllegalArgumentException("Attributes should be provided to this view,");
}

final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleBackground);
rippleColor=typedArray.getColor(R.styleable.RippleBackground_rb_color, getResources().getColor(R.color.rippelColor));
rippleStrokeWidth=typedArray.getDimension(R.styleable.RippleBackground_rb_strokeWidth, getResources().getDimension(R.dimen.rippleStrokeWidth));
rippleRadius=typedArray.getDimension(R.styleable.RippleBackground_rb_radius,getResources().getDimension(R.dimen.rippleRadius));
rippleDurationTime=typedArray.getInt(R.styleable.RippleBackground_rb_duration,DEFAULT_DURATION_TIME);
rippleAmount=typedArray.getInt(R.styleable.RippleBackground_rb_rippleAmount,DEFAULT_RIPPLE_COUNT);
rippleScale=typedArray.getFloat(R.styleable.RippleBackground_rb_scale,DEFAULT_SCALE);
rippleType=typedArray.getInt(R.styleable.RippleBackground_rb_type,DEFAULT_FILL_TYPE);
typedArray.recycle();

rippleDelay=rippleDurationTime/rippleAmount;

paint = new Paint();
paint.setAntiAlias(true);
if(rippleType==DEFAULT_FILL_TYPE){
rippleStrokeWidth=0;
paint.setStyle(Paint.Style.FILL);
}else
paint.setStyle(Paint.Style.STROKE);
paint.setColor(rippleColor);

rippleParams=new LayoutParams((int)(2*(rippleRadius+rippleStrokeWidth)),(int)(2*(rippleRadius+rippleStrokeWidth)));
rippleParams.addRule(CENTER_IN_PARENT, TRUE);

animatorSet = new AnimatorSet();
animatorSet.setDuration(rippleDurationTime);
animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
animatorList=new ArrayList<Animator>();

for(int i=0;i<rippleAmount;i++){
RippleView rippleView=new RippleView(getContext());
addView(rippleView,rippleParams);
rippleViewList.add(rippleView);
final ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(rippleView, "ScaleX", 1.0f, rippleScale);
scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);
scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART);
scaleXAnimator.setStartDelay(i*rippleDelay);
animatorList.add(scaleXAnimator);
final ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(rippleView, "ScaleY", 1.0f, rippleScale);
scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);
scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART);
scaleYAnimator.setStartDelay(i*rippleDelay);
animatorList.add(scaleYAnimator);
final ObjectAnimator alphaAnimator= ObjectAnimator.ofFloat(rippleView, "Alpha", 1.0f, 0f);
alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE);
alphaAnimator.setRepeatMode(ObjectAnimator.RESTART);
alphaAnimator.setStartDelay(i * rippleDelay);
animatorList.add(alphaAnimator);
}

animatorSet.playTogether(animatorList);
}

private class RippleView extends View{

public RippleView(Context context) {
super(context);
this.setVisibility(View.INVISIBLE);
}

@Override
protected void onDraw(Canvas canvas) {
int radius=(Math.min(getWidth(),getHeight()))/2;
canvas.drawCircle(radius,radius,radius-rippleStrokeWidth,paint);
}
}

public void startRippleAnimation(){
if(!isRippleAnimationRunning()){
for(RippleView rippleView:rippleViewList){
rippleView.setVisibility(VISIBLE);
}
animatorSet.start();
animationRunning=true;
}
}

public void stopRippleAnimation(){
if(isRippleAnimationRunning()){
animatorSet.end();
animationRunning=false;
}
}

public boolean isRippleAnimationRunning(){
return animationRunning;
}
}

布局中使用，

因为继承的是相对布局，所以允许有子控件，这里我使用一个放大镜的图片哦，看起来是不是更有feel。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<com.example.xuhong.radarviewiphone_master.RadarView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rb_color="@android:color/holo_red_dark"
app:rb_duration="3000"
app:rb_radius="50dp"
app:rb_rippleAmount="4"
app:rb_scale="6">

<ImageView
android:id="@+id/centerImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="@drawable/search"></ImageView>
</com.example.xuhong.radarviewiphone_master.RadarView>

</LinearLayout>

属性说明。

app：rb_color [color def：@android：color / holo_blue_dark] - >涟漪的颜色

app：rb_radius [dimension def：64dp] - >涟漪的半径

app：rb_duration [integer def：3000] - >一个动画的持续时间（毫秒）

app：rb_rippleAmount [integer def：6] - >在一个屏幕上的最大波动量

app：rb_scale [interger def：6] - >一个动画循环结束时的涟漪标度

app：rb_type [enum（fillRipple，strokeRipple）def：fillRipple] - >填充圆或圆环

app：rb_strokeWidth [dimension def：2dp] - >描边的纹波宽度，只有当rb_type =“strokeRipple”时才工作

看看我们的activity控制动画吧。

package com.example.xuhong.radarviewiphone_master;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private RadarView  radarView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

radarView=(RadarView) findViewById(R.id.content);
//开始动画
radarView.startRippleAnimation();
ImageView imageView=(ImageView)findViewById(R.id.centerImage);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//停止动画
radarView.stopRippleAnimation();
}
});

}
}

国际案列 ，demo下载：

http://download.csdn.net/detail/xh870189248/9786833