今天没事的时候，感觉Win8的扁平化的button还是挺好看的，就研究了下怎样在安卓界面实现Win8的扁平化button点击效果。
发现了一个自己定义的View能够实现扁平化button效果，话不多说，我们直接上代码。
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(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后，在给界面加入button的时候，引用自己定义的ImageView就可以。