Android 自定义缩放球以及水纹效果

没事写着玩，效果图





在values中的attrs.xml 定义属性样式maxRadius为半径最大值

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="maxRadius" format="integer"></attr>

<declare-styleable name="CanvasView">
<attr name="maxRadius"/>
</declare-styleable>
</resources>

Layout中使用，关键点在于xmlns:custom=”http://schemas.android.com/apk/res-auto”命名空间的添加以及自定义custom:maxRadius=”150”的使用。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="demo.cn.com.demo.MainActivity">

<demo.cn.com.demo.view.CanvasView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
custom:maxRadius="150"
/>
</RelativeLayout>

缩放球效果的java Code

package demo.cn.com.demo.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LightingColorFilter;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import demo.cn.com.demo.R;

/**
* Created by rander on 16-3-17.
*/
public class CanvasView extends View{
public CanvasView(Context context) {
this(context, null);
}

public CanvasView(Context context, AttributeSet attrs) {
this(context, attrs, -1);
}

public CanvasView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//解析自定义属性
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CanvasView, defStyleAttr, 0);
final int count = typedArray.getIndexCount();
for(int i=0 ;i < count;i++)
{
int attr = typedArray.getIndex(i);
switch (attr)
{
case R.styleable.CanvasView_maxRadius:
maxRadius = typedArray.getInteger(attr,DEFAULT_RADIUS);
break;
}
}
typedArray.recycle();
init();
}

private Paint mPaint;
/** 屏幕宽*/
private int mScreenWith;
/** 屏幕高*/
private int mScreenHeight;
/** 圆心x,y*/
private int cx;
private int cy;
/** 半径，动态变化*/
private int mRadius;
/** 最大半径*/
private int maxRadius;
/** 用户没设的时候默认最大半径*/
private static final int DEFAULT_RADIUS = 200;
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
mPaint.setDither(true);
mPaint.setAntiAlias(true);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mScreenWith = w;
mScreenHeight = h;
cx = mScreenWith/2;
cy = mScreenHeight/2;
}

private static final int MSG = 0x7986;
/** 是否需要递增*/
private boolean isIncrease = true;
Handler handler = new Handler()
{
@Override
public void handleMessage(Message msg) {
switch (msg.what)
{
case MSG:
/**是递增*/
if(isIncrease)
{
/**超过最大值就递减*/
if(mRadius > maxRadius)
{
isIncrease = false;
}
else
{
mRadius++;
}
}
else
{
/**小于0就递增*/
if(mRadius < 0)
{
isIncrease = true;
}
else
{
mRadius--;
}
}
invalidate();
break;
}
}
};

@Override
protected void onDraw(Canvas canvas) {

canvas.drawCircle(cx, cy, mRadius, mPaint);
handler.sendEmptyMessage(MSG);
super.onDraw(canvas);
}
}

波浪纹的java Code

package demo.cn.com.demo.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LightingColorFilter;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import demo.cn.com.demo.R;

/**
* Created by rander on 16-3-17.
*/
public class CanvasView extends View{
public CanvasView(Context context) {
this(context, null);
}

public CanvasView(Context context, AttributeSet attrs) {
this(context, attrs, -1);
}

public CanvasView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//解析自定义属性
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CanvasView, defStyleAttr, 0);
final int count = typedArray.getIndexCount();
for(int i=0 ;i < count;i++)
{
int attr = typedArray.getIndex(i);
switch (attr)
{
case R.styleable.CanvasView_maxRadius:
maxRadius = typedArray.getInteger(attr,DEFAULT_RADIUS);
break;
}
}
typedArray.recycle();
init();
}

private Paint mPaint;
/** 屏幕宽*/
private int mScreenWith;
/** 屏幕高*/
private int mScreenHeight;
/** 圆心x,y*/
private int cx;
private int cy;
/** 半径，动态变化*/
private int mRadius;
/** 最大半径*/
private int maxRadius;
/** 用户没设的时候默认最大半径*/
private static final int DEFAULT_RADIUS = 200;
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(5);
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mScreenWith = w;
mScreenHeight = h;
cx = mScreenWith/2;
cy = mScreenHeight/2;
}

private static final int MSG = 0x7986;
/** 是否需要递增*/
private boolean isIncrease = true;
Handler handler = new Handler()
{
@Override
public void handleMessage(Message msg) {
switch (msg.what)
{
case MSG:
/**是递增*/
if(isIncrease)
{
/**超过最大值就递减*/
if(mRadius > maxRadius)
{
isIncrease = false;
}
else
{
mRadius++;
}
}
else
{
/**小于0就递增*/
if(mRadius < 0)
{
isIncrease = true;
}
else
{
mRadius--;
}
}
invalidate();
break;
}
}
};
/**波浪数量*/
private final int WAVE_COUNT = 10;
@Override
protected void onDraw(Canvas canvas) {

for(int i=0;i<WAVE_COUNT;i++)
{
canvas.drawCircle(cx, cy, mRadius - 20*i, mPaint);
canvas.save();
}
canvas.restore();
handler.sendEmptyMessage(MSG);
super.onDraw(canvas);
}
}

缩放球与水纹效果的实现区别如下:

1.画笔的不同Paint设置Paint.Style.STROKE样式可以画空心效果，不设置则是实心圆。

2.onDraw方法的实现不一样，缩放球只是画了一次，而水纹效果不断的save并缩小半径画了好几次。