Android仿Win8界面开发(附源码)

朴灿烈づ我的快乐病毒、 2021-09-10 11:46 386阅读 0赞

[林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][Evankaka]

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

先来看看效果：[源码免费下载][Link 1]

[![A56][]][A56 1]

# 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、下来，来看看布局 #

# 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、效果 #

手指按在中间是缩小，手指按在边上是有角度的卷动

[![A58][]][A58 1]

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

[![A59][]][A59 1]

[源码免费下载][Link 1]

[Evankaka]: http://blog.csdn.net/evankaka
[Link 1]: http://download.csdn.net/detail/evankaka/8452979
[A56]: /images/20210811/c6be4d81b1dd4fb9af3ea3aaa152e30e.png
[A56 1]: https://img-blog.csdn.net/20150221172418451
[A58]: /images/20210811/9835aed292cf4aeba9f5b442c4a391ae.png
[A58 1]: https://img-blog.csdn.net/20150221172458961
[A59]: /images/20210811/6a610e36c18c468ab7bd7dfbe07afd75.png
[A59 1]: https://img-blog.csdn.net/20150221172535294