首页 > 系统 > Android > 正文

Android仿Win8界面开发

2020-04-11 11:06:25
字体:
来源:转载
供稿:网友

本文将要模仿Win8界面的一个设计,一个一个的方块。方法很简单。这里自己把图片改改就可以成为自己想要的界面了。

1、首先来看看自定义的MyImageView:

package com.example.win8test; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Camera; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.PaintFlagsDrawFilter; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.os.Handler; import android.os.Message; import android.util.AttributeSet; import android.view.MotionEvent; import android.widget.ImageView;  @SuppressLint("HandlerLeak") public class MyImageView extends ImageView {  public static final int Rotate_Handler_Message_Start = 1;  public static final int Rotate_Handler_Message_Turning = 2;  public static final int Rotate_Handler_Message_Turned = 3;  public static final int Rotate_Handler_Message_Reverse = 6;   public static final int Scale_Handler_Message_Start = 1;  public static final int Scale_Handler_Message_Turning = 2;  public static final int Scale_Handler_Message_Turned = 3;  public static final int Scale_Handler_Message_Reverse = 6;   private boolean isAntiAlias = true;  private boolean scaleOnly = false;  private boolean isSizeChanged = false;  private boolean isShowAnimation = true;  private int rotateDegree = 10;  private boolean isFirst = true;  private float minScale = 0.95f;  private int vWidth;  private int vHeight;  private boolean isAnimationFinish = true, isActionMove = false,    isScale = false;  private Camera camera;  boolean XbigY = false;  float RolateX = 0;  float RolateY = 0;  OnViewClick onclick = null;   public MyImageView(Context context) {   super(context);   camera = new Camera();  }   public MyImageView(Context context, AttributeSet attrs) {   super(context, attrs);   camera = new Camera();  }   public void SetAnimationOnOff(boolean oo) {   isShowAnimation = oo;  }   public void setOnClickIntent(OnViewClick onclick) {   this.onclick = onclick;  }   @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(isAntiAlias);  }   @Override  public boolean onTouchEvent(MotionEvent event) {   super.onTouchEvent(event);   if (!isShowAnimation)    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) {     if (isAnimationFinish && !isSizeChanged) {      isSizeChanged = true;      scale_handler.sendEmptyMessage(Scale_Handler_Message_Start);     }    } else {     if (scaleOnly) {      scale_handler.sendEmptyMessage(Scale_Handler_Message_Start);     } else {      rotate_Handler        .sendEmptyMessage(Rotate_Handler_Message_Start);     }    }    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) {     if (isSizeChanged)      scale_handler        .sendEmptyMessage(Scale_Handler_Message_Reverse);    } else {     rotate_Handler.sendEmptyMessage(Rotate_Handler_Message_Reverse);    }    break;   }   return true;  }   public interface OnViewClick {   public void onClick();  }   @SuppressLint("HandlerLeak")  private Handler rotate_Handler = new Handler() {   private Matrix matrix = new Matrix();   private float count = 0;    // private boolean clickGuolv = false;   @Override   public void handleMessage(Message msg) {    super.handleMessage(msg);    matrix.set(getImageMatrix());    switch (msg.what) {    case Rotate_Handler_Message_Start:     count = 0;     beginRotate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));     rotate_Handler.sendEmptyMessage(Rotate_Handler_Message_Turning);     break;    case Rotate_Handler_Message_Turning:     beginRotate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));     count++;     if (count < getDegree()) {      rotate_Handler        .sendEmptyMessage(Rotate_Handler_Message_Turning);     } else {      isAnimationFinish = true;     }     break;    case Rotate_Handler_Message_Turned:     beginRotate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));     if (count > 0) {      rotate_Handler        .sendEmptyMessage(Rotate_Handler_Message_Turned);     } else {      isAnimationFinish = true;      if (!isActionMove && onclick != null) {       onclick.onClick();      }     }     count--;     count--;     break;    case Rotate_Handler_Message_Reverse:     count = getDegree();     beginRotate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));     rotate_Handler.sendEmptyMessage(Rotate_Handler_Message_Turned);     break;    }   }  };   private synchronized void beginRotate(Matrix matrix, float rotateX,    float rotateY) {   // Bitmap bm = getImageBitmap();   int scaleX = (int) (vWidth * 0.5f);   int scaleY = (int) (vHeight * 0.5f);   camera.save();   camera.rotateX(RolateY > 0 ? rotateY : -rotateY);   camera.rotateY(RolateX < 0 ? rotateX : -rotateX);   camera.getMatrix(matrix);   camera.restore();   // 控制中心点   if (RolateX > 0 && rotateX != 0) {    matrix.preTranslate(-vWidth, -scaleY);    matrix.postTranslate(vWidth, scaleY);   } else if (RolateY > 0 && rotateY != 0) {    matrix.preTranslate(-scaleX, -vHeight);    matrix.postTranslate(scaleX, vHeight);   } else if (RolateX < 0 && rotateX != 0) {    matrix.preTranslate(-0, -scaleY);    matrix.postTranslate(0, scaleY);   } else if (RolateY < 0 && rotateY != 0) {    matrix.preTranslate(-scaleX, -0);    matrix.postTranslate(scaleX, 0);   }   setImageMatrix(matrix);  }   private Handler scale_handler = 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 Scale_Handler_Message_Start:     if (!isAnimationFinish) {      return;     } else {      isAnimationFinish = false;      isSizeChanged = true;      count = 0;      s = (float) Math.sqrt(Math.sqrt(minScale));      beginScale(matrix, s);      scale_handler        .sendEmptyMessage(Scale_Handler_Message_Turning);     }     break;    case Scale_Handler_Message_Turning:     beginScale(matrix, s);     if (count < 4) {      scale_handler        .sendEmptyMessage(Scale_Handler_Message_Turning);     } else {      isAnimationFinish = true;      if (!isSizeChanged && !isActionMove && onclick != null) {       onclick.onClick();      }     }     count++;     break;    case Scale_Handler_Message_Reverse:     if (!isAnimationFinish) {      scale_handler        .sendEmptyMessage(Scale_Handler_Message_Reverse);     } else {      isAnimationFinish = false;      count = 0;      s = (float) Math.sqrt(Math.sqrt(1.0f / minScale));      beginScale(matrix, s);      scale_handler        .sendEmptyMessage(Scale_Handler_Message_Turning);      isSizeChanged = false;     }     break;    }   }  };   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);  }   public int getDegree() {   return rotateDegree;  }   public void setDegree(int degree) {   rotateDegree = degree;  }   public float getScale() {   return minScale;  }   public void setScale(float scale) {   minScale = scale;  } } 

2、下来,来看看布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:background="@drawable/d"  android:orientation="vertical"  tools:context=".MainActivity" >   <LinearLayout   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:orientation="horizontal" >    <com.example.win8test.MyImageView    android:id="@+id/MyImageView01"    android:layout_width="108dp"    android:layout_height="108dp"    android:layout_margin="16dp"    android:scaleType="matrix"    android:src="@drawable/fen" />    <com.example.win8test.MyImageView    android:id="@+id/MyImageView02"    android:layout_width="108dp"    android:layout_height="108dp"    android:layout_margin="16dp"    android:scaleType="matrix"    android:src="@drawable/fen" />  </LinearLayout>   <LinearLayout   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:orientation="horizontal" >    <com.example.win8test.MyImageView    android:id="@+id/MyImageView03"    android:layout_width="108dp"    android:layout_height="108dp"    android:layout_margin="16dp"    android:scaleType="matrix"    android:src="@drawable/fen" />    <com.example.win8test.MyImageView    android:id="@+id/MyImageView04"    android:layout_width="108dp"    android:layout_height="108dp"    android:layout_margin="16dp"    android:scaleType="matrix"    android:src="@drawable/fen" />  </LinearLayout>   <LinearLayout   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:orientation="horizontal" >    <com.example.win8test.MyImageView    android:id="@+id/MyImageView05"    android:layout_width="108dp"    android:layout_height="108dp"    android:layout_margin="16dp"    android:scaleType="matrix"    android:src="@drawable/fen" />    <com.example.win8test.MyImageView    android:id="@+id/MyImageView06"    android:layout_width="108dp"    android:layout_height="108dp"    android:layout_margin="16dp"    android:scaleType="matrix"    android:src="@drawable/fen" />  </LinearLayout>  </LinearLayout> 

3、上面的图片按钮的用法,这里只给一张图片按钮添加了事件:

MyImageView image_3D_1 = (MyImageView)findViewById(R.id.MyImageView01);   image_3D_1.setOnClickIntent(new MyImageView.OnViewClick() {   @Override   public void onClick() {    Toast.makeText(MainActivity.this, "clicked", 100)      .show();   }  }); 

4、效果
手指按在中间是缩小,手指按在边上是有角度的卷动

手指一直按着的时候,被按下的那个图像变小,并且手指一直按着移动,此时其它图片按钮不响应

希望本文所述对大家学习Android软件编程有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表