Android仿Win8界面开发

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

本文将要模仿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、效果

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

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

时间： 2024-11-10 04:05:46

Android仿Win8界面开发的相关文章

Android 仿Win8的metro的UI界面（上）

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23441455 昨晚没事手机下载了一些APP,发现现在仿win8的主界面越来越多,在大家见惯了类GridView或者类Tab后,给人一种耳目一新的感觉.今天在eoe上偶然发现已经有人实现了这个功能的源码(地址:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=327557),马上下载跑了一下,效果很炫,但是有些bug,比

Android入门笔记 - 界面开发 - TextView,Button,EditText,Toast

今天简单介绍一下android中的控件资源,我们从一个登陆界面开始讲起,先贴代码: 准备工作:先在eclipse中创建一个android项目,我的项目名称是demo_login. (1)在项目文件夹的 res/layout/ 文件目录下打开 activity_main.xml : <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="f

Android仿微信界面--使用Fragment实现(慕课网笔记)

1 效果图  这里我们没有实现滑动切换view的功能 2 具体实现: 2.1 布局文件:top.xml, bottom.xml,tab01.xml,tab02.xml,tab03.xml,tab04.xml 具体请参考上述博客 2.2 新建4个Fragment,WeixinFragment,FrdFragment,AddressFragment,SettingFragment,分别对应tab01.xml,tab02.xml,tab03.xml,tab04.xml,其中这个Fragment是and

Android仿Win8界面的button点击

今天没事的时候,感觉Win8的扁平化的button还是挺好看的,就研究了下怎样在安卓界面实现Win8的扁平化button点击效果. 发现了一个自己定义的View能够实现扁平化button效果,话不多说,我们直接上代码. 1.首先要自己定义自己的View.创建一个自己定义的MyImageView类继承ImageView,并实现点击效果的设定. public class MyImageView extends ImageView { private boolean onAnimation = tru

Android仿QQ界面

最近这几天,一直跟着朋友们聚会什么的,没怎么做项目,今天总算是有时间开电脑继续做我的项目了.下面我就把我做的效果展示一下. 这是模仿了qq的界面效果.因为代码比较长就不粘贴代码了.需要的小伙伴可以跟我私聊.

Android入门笔记 - 界面开发 - Animation

今天我们来看看Android中的动画效果,实例比较简单: AlphaAnimation:透明度动画 ScaleAnimation:缩放动画 TranslateAnimation:移动位置动画 RotateAnimation:旋转角度动画 先贴代码: 这个实例完全使用代码实现的,当然也可以使用xml文件实现,我们先来看这个实例: package com.example.demo5_03_animation; import android.os.Bundle; import android.anno

Android仿计算器界面

1 <?xml version="1.0" encoding="utf-8"?> 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 an

android仿win8

在 eoe上偶然发现已经有人实现了这个功能的源码(地址:http://www.eoeandroid.com /forum.php?mod=viewthread&tid=327557),马上下载跑了一下,效果很炫,但是有些bug,比如点击速度特别 快时图像会被放大,以及点击时会触发两次点击事件. 本例子基于eoe中这位大神的实现,做了一些简化,和bug的修复. 效果: 首先普及一个小知识点: 我们在项目中有时候需要一个缓慢的梯度数据,例如:控件的宽度以一定的比例增加,然后以相同的比例还原到原来的长

Android仿WIN8系统磁贴点击下沉倾斜效果

※效果 ※使用说明 Java代码 import android.app.Activity; import android.os.Bundle; import android.widget.Toast; public class TestRolateAnimActivity extends Activity { /** Called when the activity is first created. */ MyImageView joke; @Override public void onCr