扁平化imageview

来源：互联网发布：淘宝店童装编辑：程序博客网时间：2024/06/08 11:45

今天没事的时候，感觉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(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即可

0 0