扁平化imageview

今天没事的时候，感觉Win8的扁平化的按钮还是挺好看的，就研究了下如何在安卓界面实现Win8的扁平化按钮点击效果。发现了一个自定义的View可以实现扁平化按钮效果，话不多说，我们直接上代码。

1、首先要自定义自己的View，创建一个自定义的MyImageView类继承ImageView，并实现点击效果的设定。

public class MyImageView extends ImageView {

private boolean onAnimation = true;// 是否处于动画状态
private int rotateDegree = 10;// 执行动画的时间
private boolean isFirst = true;// 标识是否为第一次绘制视图
private float minScale = 0.95f;// 最小缩放限度
private int vWidth;// 视图宽度
private int vHeight;// 视图高度
private boolean isFinish = true;// 标识是否为结束
private boolean isActionMove = false;// 标识是否在移动状态
private boolean isScale = false;// 标识是否为缩放状态
private Camera camera;

boolean XbigY = false;// 是否放大
float RolateX = 0;// 旋转的X轴点
float RolateY = 0;// 旋转的Y轴点

OnViewClick onclick = null;

public MyImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
camera = new Camera();
}

public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
camera = new Camera();
}

public void SetAnimationOnOff(boolean oo) {
onAnimation = oo;
}

/**
* 设置点击事件
*
* @param onclick
*/
public void setOnClickIntent(OnViewClick onclick) {
this.onclick = onclick;
}

/**
* 绘制View
*/
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isFirst) {// 判断是否为第一次进入
isFirst = false;
init();
}
canvas.setDrawFilter(
134cb
new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
| Paint.FILTER_BITMAP_FLAG));// 抗锯齿
}

/**
* 初始化视图---初始化配置
*/
public void init() {
vWidth = getWidth() - getPaddingLeft() - getPaddingRight();
vHeight = getHeight() - getPaddingTop() - getPaddingBottom();
Drawable drawable = getDrawable();
BitmapDrawable bd = (BitmapDrawable) drawable;
bd.setAntiAlias(true);
}

/**
* 触摸监听
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
if (!onAnimation)// 判断是否为动画状态
return true;

switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:// 按下
float X = event.getX();
float Y = event.getY();
RolateX = vWidth / 2 - X;
RolateY = vHeight / 2 - Y;
XbigY = Math.abs(RolateX) > Math.abs(RolateY) ? true : false;

isScale = X > vWidth / 3 && X < vWidth * 2 / 3 && Y > vHeight / 3
&& Y < vHeight * 2 / 3;
isActionMove = false;

if (isScale) {// 判断是否允许缩放
scaleHandler.sendEmptyMessage(1);
} else {
rolateHandler.sendEmptyMessage(1);
}
break;
case MotionEvent.ACTION_MOVE:// 移动
float x = event.getX();
float y = event.getY();
if (x > vWidth || y > vHeight || x < 0 || y < 0) {
isActionMove = true;
} else {
isActionMove = false;
}

break;
case MotionEvent.ACTION_UP:// 松开
if (isScale) {// 判断是否允许缩放
scaleHandler.sendEmptyMessage(6);
} else {
rolateHandler.sendEmptyMessage(6);
}
break;
}
return true;
}

/**
* 自定义View点击事件接口
*/
public interface OnViewClick {
public void onClick();
}

/**
* 旋转动画的Handler，根据状态执行动画
*/
@SuppressLint("HandlerLeak")
private Handler rolateHandler = new Handler() {
private Matrix matrix = new Matrix();
private float count = 0;

@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
matrix.set(getImageMatrix());
switch (msg.what) {
case 1:
count = 0;
BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
rolateHandler.sendEmptyMessage(2);
break;
case 2:
BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
if (count < getDegree()) {
rolateHandler.sendEmptyMessage(2);
} else {
isFinish = true;
}
count++;
count++;
break;
case 3:
BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
if (count > 0) {
rolateHandler.sendEmptyMessage(3);
} else {
isFinish = true;
if (!isActionMove && onclick != null) {
onclick.onClick();
}
}
count--;
count--;
break;
case 6:
count = getDegree();
BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
rolateHandler.sendEmptyMessage(3);
break;
}
}
};

/**
* 开始旋转--使用线程锁控制，确保每次只执行一个动作
*
* @param matrix
* @param rolateX
* @param rolateY
*/
private synchronized void BeginRolate(Matrix matrix, float rolateX,
float rolateY) {
int scaleX = (int) (vWidth * 0.5f);
int scaleY = (int) (vHeight * 0.5f);
camera.save();
camera.rotateX(RolateY > 0 ? rolateY : -rolateY);
camera.rotateY(RolateX < 0 ? rolateX : -rolateX);
camera.getMatrix(matrix);
camera.restore();
// 控制中心点
if (RolateX > 0 && rolateX != 0) {
matrix.preTranslate(-vWidth, -scaleY);
matrix.postTranslate(vWidth, scaleY);
} else if (RolateY > 0 && rolateY != 0) {
matrix.preTranslate(-scaleX, -vHeight);
matrix.postTranslate(scaleX, vHeight);
} else if (RolateX < 0 && rolateX != 0) {
matrix.preTranslate(-0, -scaleY);
matrix.postTranslate(0, scaleY);
} else if (RolateY < 0 && rolateY != 0) {
matrix.preTranslate(-scaleX, -0);
matrix.postTranslate(scaleX, 0);
}
setImageMatrix(matrix);
}

/**
* 缩放动画Handler
*/
@SuppressLint("HandlerLeak")
private Handler scaleHandler = new Handler() {
private Matrix matrix = new Matrix();
private float s;
int count = 0;

@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
matrix.set(getImageMatrix());
switch (msg.what) {
case 1:
if (!isFinish) {
return;
} else {
isFinish = false;
count = 0;
s = (float) Math.sqrt(Math.sqrt(minScale));
BeginScale(matrix, s);
scaleHandler.sendEmptyMessage(2);
}
break;
case 2:
BeginScale(matrix, s);
if (count < 4) {
scaleHandler.sendEmptyMessage(2);
} else {
isFinish = true;
if (!isActionMove && onclick != null) {
onclick.onClick();
}
}
count++;
break;
case 6:
if (!isFinish) {
scaleHandler.sendEmptyMessage(6);
} else {
isFinish = false;
count = 0;
s = (float) Math.sqrt(Math.sqrt(1.0f / minScale));
BeginScale(matrix, s);
scaleHandler.sendEmptyMessage(2);
}
break;
}
}
};

/**
* 开始缩放动画
*
* @param matrix
* @param scale
*/
private synchronized void BeginScale(Matrix matrix, float scale) {
int scaleX = (int) (vWidth * 0.5f);
int scaleY = (int) (vHeight * 0.5f);
matrix.postScale(scale, scale, scaleX, scaleY);
setImageMatrix(matrix);
}

/**
* 获取执行的时间--旋转
*
* @return
*/
public int getDegree() {
return rotateDegree;
}

/**
* 设置动画时间--旋转
*
* @param degree
*/
public void setDegree(int degree) {
rotateDegree = degree;
}

/**
* 获取缩放程度
*
* @return
*/
public float getScale() {
return minScale;
}

/**
* 设置视图缩放度
*
* @param scale
*/
public void setScale(float scale) {
minScale = scale;
}
}

其中Record类的主要内容如下：

public class Record{

public int getDegrees(float a, float b) {
float dx = a;
float x = b / 4;
float x2 = 3 * b / 4;
if (dx < x / 10)
return 10;
else if (dx < x / 5)
return 9;
else if (dx < x * 3 / 10)
return 8;
else if (dx < x * 2 / 5)
return 7;
else if (dx < x * 5 / 10)
return 6;
else if (dx < x * 3 / 5)
return 5;
else if (dx < x * 7 / 10)
return 4;
else if (dx < x * 4 / 5)
return 3;
else if (dx < x * 9 / 10)
return 2;
else if (dx < x)
return 2;
else if (dx - x2 > x * 9 / 10)
return 10;
else if (dx - x2 > x * 4 / 5)
return 9;
else if (dx - x2 > x * 7 / 10)
return 8;
else if (dx - x2 > x * 3 / 5)
return 7;
else if (dx - x2 > x * 5 / 10)
return 6;
else if (dx - x2 > x * 2 / 5)
return 5;
else if (dx - x2 > x * 3 / 10)
return 4;
else if (dx - x2 > x / 5)
return 3;
else if (dx - x2 > x / 10)
return 2;
return 10;
}

}

2、定义好了自己的ImageView后，在给界面添加按钮的时候，引用自定义的ImageView即可