本文将要模仿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软件编程有所帮助。

android win8风格布局,Android仿Win8界面开发相关推荐

  1. Android 二维码扫描(仿微信界面),根据Google zxing

    Android 二维码扫描(仿微信界面),根据Google zxing Android项目开发中经常会用到二维码扫描,例如登陆.支付等谷歌方面已经有了一个开源库(地址: https://github. ...

  2. android 微信布局 字体,【Android】底部Tab+ViewPager(仿微信界面)

    感谢 github的作者:wuyexiong 效果图(图片和文字都有渐变效果) 实现 主要用到自定义一个LinearLayout和ImageView 1.BottomIconView继承自ImageV ...

  3. android 平台 列表布局,Android 设计指南 - 风格

    构建在任何设备上都引人注目的应用. Android 驱动了数百万计的手机.平板和其他设备,囊括了各种不同的屏幕尺寸和比例.利用 Android 灵活的布局系统,你可以创造出在各种设备上看起来都很优雅的 ...

  4. android登陆页布局,Android布局Skype登录界面实例

    郑州app开发Android布局Skype登录界面,下面是布局的代码: {?xml version="1.0" encoding="utf-8"?} {Line ...

  5. android 模板 ui布局,Android UI布局

    一.线性布局-LinearLayout(至上而下布局) 其中 android:orientation="vertical"意思为垂直 方向的线性布局,此处的"vertic ...

  6. android系统五大布局,android 五大布局文件

    android中为了适应各种布局的格式,提供了5种布局格式: LinearLayout(线性布局)FrameLayout(帧布局)RelativeLayout(相对布局)TableLayout(表格布 ...

  7. android 动态绘制布局,Android代码和绘制曲线中按钮和绘图板的动态布局

    时间: 2019年1月11日 本文向您介绍Android代码中的按钮和绘图板的动态布局和绘制曲线,主要包括示例android 动态绘制曲线,应用技巧,基本知识和知识android 动态绘制曲线,包括A ...

  8. android博学谷布局,Android项目实战系列—基于博学谷(四)我的模块(下)

    image 由于这个模块内容较多,篇幅较长,请耐心阅读. "我"的模块分为四个部分 一.修改密码 1.创建修改密码界面 在com.boxuegu.activity包中,创建一个ja ...

  9. android 自定义输入法布局,Android InputMethodService|KeyboardView 自定义输入法和键盘 01...

    如何自定义 安卓输入法 和 键盘 1.首先有几个关键类 1.InputMethodService 2.Keyboard 3.KeyboardView 1.1 InputMethodService 看下 ...

最新文章

  1. Ubuntu18.04 + Nvida GTX 1660ti显卡 驱动安装
  2. 关于SQL 数据库表中的聚集索引和非聚集索引等
  3. 在PowerShell中创建对象并添加属性成员
  4. oracle定时任务可以备份么,Linux下Oracle设置定时任务备份数据库的教程
  5. 130. Surrounded Regions 被围绕的区域
  6. Objective-C中的@property和@synthesize用法
  7. springboot+vue+element+mybatisplus项目(前端)
  8. js解析网址获取需要的数据
  9. AR技术介绍(Located in Android)
  10. 学校计算机教师事迹材料,中学信息技术优秀教师事迹材料:信念在“用心”中闪光...
  11. 软件工程 - 个人博客系统 - 可行性分析与需求分析文档
  12. 怎么使用quicktime
  13. 什么是直方图,如何使用它来改善照片?
  14. Learning ImageMagick 1: Lomo效果
  15. ureport2报错/by zero的解决方法
  16. 黑马程序员SpringBoot基础篇SSMP整合案例
  17. Python小白的飞桨之旅
  18. android夜间切换失败,android夜间模式切换
  19. Elasticsearch学习之的delimited_payloads使用
  20. 自如网杭州市租房数据分析(1)

热门文章

  1. 记一次阿里面试题:都有哪些进程间通信方式?麻烦你不要再背了
  2. 2019 秋招提前批蘑菇街一面面经(带答案)
  3. 美团技术:复杂环境下落地 Service Mesh 的挑战与实践
  4. 支付宝研究员兼OceanBase总架构师杨传辉:我在数据库梦之队的十年成长路
  5. 【参与开源】J2EE开源项目JEECG快速开发平台,欢迎广大技术爱好者参与,第三期招募新成员
  6. SAP JCo的Server/Client编程实例
  7. JMail 应用实践(一)--- 简介用Java程序发送email
  8. 简单实现Popup弹出框添加数据
  9. [Jobdu] 题目1527:首尾相连数组的最大子数组和
  10. Swift字符串转换成类