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软件编程有所帮助。
android win8风格布局,Android仿Win8界面开发相关推荐
- Android 二维码扫描(仿微信界面),根据Google zxing
Android 二维码扫描(仿微信界面),根据Google zxing Android项目开发中经常会用到二维码扫描,例如登陆.支付等谷歌方面已经有了一个开源库(地址: https://github. ...
- android 微信布局 字体,【Android】底部Tab+ViewPager(仿微信界面)
感谢 github的作者:wuyexiong 效果图(图片和文字都有渐变效果) 实现 主要用到自定义一个LinearLayout和ImageView 1.BottomIconView继承自ImageV ...
- android 平台 列表布局,Android 设计指南 - 风格
构建在任何设备上都引人注目的应用. Android 驱动了数百万计的手机.平板和其他设备,囊括了各种不同的屏幕尺寸和比例.利用 Android 灵活的布局系统,你可以创造出在各种设备上看起来都很优雅的 ...
- android登陆页布局,Android布局Skype登录界面实例
郑州app开发Android布局Skype登录界面,下面是布局的代码: {?xml version="1.0" encoding="utf-8"?} {Line ...
- android 模板 ui布局,Android UI布局
一.线性布局-LinearLayout(至上而下布局) 其中 android:orientation="vertical"意思为垂直 方向的线性布局,此处的"vertic ...
- android系统五大布局,android 五大布局文件
android中为了适应各种布局的格式,提供了5种布局格式: LinearLayout(线性布局)FrameLayout(帧布局)RelativeLayout(相对布局)TableLayout(表格布 ...
- android 动态绘制布局,Android代码和绘制曲线中按钮和绘图板的动态布局
时间: 2019年1月11日 本文向您介绍Android代码中的按钮和绘图板的动态布局和绘制曲线,主要包括示例android 动态绘制曲线,应用技巧,基本知识和知识android 动态绘制曲线,包括A ...
- android博学谷布局,Android项目实战系列—基于博学谷(四)我的模块(下)
image 由于这个模块内容较多,篇幅较长,请耐心阅读. "我"的模块分为四个部分 一.修改密码 1.创建修改密码界面 在com.boxuegu.activity包中,创建一个ja ...
- android 自定义输入法布局,Android InputMethodService|KeyboardView 自定义输入法和键盘 01...
如何自定义 安卓输入法 和 键盘 1.首先有几个关键类 1.InputMethodService 2.Keyboard 3.KeyboardView 1.1 InputMethodService 看下 ...
最新文章
- Ubuntu18.04 + Nvida GTX 1660ti显卡 驱动安装
- 关于SQL 数据库表中的聚集索引和非聚集索引等
- 在PowerShell中创建对象并添加属性成员
- oracle定时任务可以备份么,Linux下Oracle设置定时任务备份数据库的教程
- 130. Surrounded Regions 被围绕的区域
- Objective-C中的@property和@synthesize用法
- springboot+vue+element+mybatisplus项目(前端)
- js解析网址获取需要的数据
- AR技术介绍(Located in Android)
- 学校计算机教师事迹材料,中学信息技术优秀教师事迹材料:信念在“用心”中闪光...
- 软件工程 - 个人博客系统 - 可行性分析与需求分析文档
- 怎么使用quicktime
- 什么是直方图,如何使用它来改善照片?
- Learning ImageMagick 1: Lomo效果
- ureport2报错/by zero的解决方法
- 黑马程序员SpringBoot基础篇SSMP整合案例
- Python小白的飞桨之旅
- android夜间切换失败,android夜间模式切换
- Elasticsearch学习之的delimited_payloads使用
- 自如网杭州市租房数据分析(1)
热门文章
- 记一次阿里面试题:都有哪些进程间通信方式?麻烦你不要再背了
- 2019 秋招提前批蘑菇街一面面经(带答案)
- 美团技术:复杂环境下落地 Service Mesh 的挑战与实践
- 支付宝研究员兼OceanBase总架构师杨传辉:我在数据库梦之队的十年成长路
- 【参与开源】J2EE开源项目JEECG快速开发平台,欢迎广大技术爱好者参与,第三期招募新成员
- SAP JCo的Server/Client编程实例
- JMail 应用实践(一)--- 简介用Java程序发送email
- 简单实现Popup弹出框添加数据
- [Jobdu] 题目1527:首尾相连数组的最大子数组和
- Swift字符串转换成类