android win8风格布局,Android仿Win8界面开发

本文将要模仿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、下来，来看看布局

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" >

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal" >

android:id="@+id/MyImageView01"

android:layout_width="108dp"

android:layout_height="108dp"

android:layout_margin="16dp"

android:scaleType="matrix"

android:src="@drawable/fen" />

android:id="@+id/MyImageView02"

android:layout_width="108dp"

android:layout_height="108dp"

android:layout_margin="16dp"

android:scaleType="matrix"

android:src="@drawable/fen" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal" >

android:id="@+id/MyImageView03"

android:layout_width="108dp"

android:layout_height="108dp"

android:layout_margin="16dp"

android:scaleType="matrix"

android:src="@drawable/fen" />

android:id="@+id/MyImageView04"

android:layout_width="108dp"

android:layout_height="108dp"

android:layout_margin="16dp"

android:scaleType="matrix"

android:src="@drawable/fen" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal" >

android:id="@+id/MyImageView05"

android:layout_width="108dp"

android:layout_height="108dp"

android:layout_margin="16dp"

android:scaleType="matrix"

android:src="@drawable/fen" />

android:id="@+id/MyImageView06"

android:layout_width="108dp"

android:layout_height="108dp"

android:layout_margin="16dp"

android:scaleType="matrix"

android:src="@drawable/fen" />

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软件编程有所帮助。