android仿win8

在 eoe上偶然发现已经有人实现了这个功能的源码（地址：http://www.eoeandroid.com /forum.php?mod=viewthread&tid=327557），马上下载跑了一下，效果很炫，但是有些bug，比如点击速度特别 快时图像会被放大，以及点击时会触发两次点击事件。

本例子基于eoe中这位大神的实现，做了一些简化，和bug的修复。

效果：

首先普及一个小知识点：

我们在项目中有时候需要一个缓慢的梯度数据，例如：控件的宽度以一定的比例增加，然后以相同的比例还原到原来的长度。

[java] view plain copy

  1. package com.zhy._01;
  2. public class Test2
  3. {
  4. public static void main(String[] args)
  5. {
  6. float val = 1;
  7. float s = 0.85f;
  8. int i = 0;
  9. s = (float) Math.sqrt(1 / s);

[java] view plain copy

  1. System.out.println(val);
  2. while (i < 5)
  3. {
  4. val = val *s ;
  5. System.out.println(val);
  6. i++;
  7. }
  8. s = 0.85f;
  9. i = 0;
  10. s = (float) Math.sqrt(s);
  11. while (i < 5)
  12. {
  13. val = val *s ;
  14. System.out.println(val);
  15. i++;
  16. }
  17. }

输出结果：

[java] view plain copy

  1. 1.0
  2. 1.0846523
  3. 1.1764706
  4. 1.2760615
  5. 1.384083
  6. 1.5012488
  7. 1.384083
  8. 1.2760615
  9. 1.1764706
  10. 1.0846523
  11. 1.0

很完美吧，基本是个对称的梯度数据，梯度的幅度由代码中的s觉得，越接近1幅度越小，反之则反之。

好了下面开始代码：

1、布局文件

[html] view plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:background="@drawable/bkg_img_default"
  6. android:gravity="center"
  7. android:orientation="vertical" >
  8. <LinearLayout
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:orientation="vertical" >
  12. <LinearLayout
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:orientation="horizontal" >
  16. <LinearLayout
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:orientation="vertical" >
  20. <com.ljp.ani01.MyImageView
  21. android:id="@+id/c_joke"
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:layout_margin="2dp"
  25. android:scaleType="matrix"
  26. android:src="@drawable/left_top" />
  27. <com.ljp.ani01.MyImageView
  28. android:id="@+id/c_idea"
  29. android:layout_width="wrap_content"
  30. android:layout_height="wrap_content"
  31. android:layout_margin="2dp"
  32. android:scaleType="matrix"
  33. android:src="@drawable/left_bottom" />
  34. </LinearLayout>
  35. <com.ljp.ani01.MyImageView
  36. android:id="@+id/c_constellation"
  37. android:layout_width="wrap_content"
  38. android:layout_height="wrap_content"
  39. android:layout_margin="2dp"
  40. android:scaleType="matrix"
  41. android:src="@drawable/right" />
  42. </LinearLayout>
  43. <com.ljp.ani01.MyImageView
  44. android:id="@+id/c_recommend"
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:layout_margin="2dp"
  48. android:scaleType="matrix"
  49. android:src="@drawable/bottom" />
  50. </LinearLayout>
  51. </LinearLayout>

布局文件，完成了上面效果图的静态效果，如果你不需要添加点击动画，或者只需要很简单的点击效果，那么就已经完成这样的菜单的编写，再添加个backgroud自定义下点击效果就好了。当然，我们这里有个比较柔和的点击动画，有自定义的ImageView完成。

2、MyImageView.Java

[java] view plain copy

  1. package com.ljp.ani01;
  2. import android.content.Context;
  3. import android.graphics.Matrix;
  4. import android.graphics.drawable.BitmapDrawable;
  5. import android.graphics.drawable.Drawable;
  6. import android.os.Handler;
  7. import android.util.AttributeSet;
  8. import android.util.Log;
  9. import android.view.MotionEvent;
  10. import android.widget.ImageView;
  11. public class MyImageView extends ImageView
  12. {
  13. private static final String TAG = "MyImageView";
  14. private static final int SCALE_REDUCE_INIT = 0;
  15. private static final int SCALING = 1;
  16. private static final int SCALE_ADD_INIT = 6;
  17. /**
  18. * 控件的宽
  19. */
  20. private int mWidth;
  21. /**
  22. * 控件的高
  23. */
  24. private int mHeight;
  25. /**
  26. * 控件的宽1/2
  27. */
  28. private int mCenterWidth;
  29. /**
  30. * 控件的高 1/2
  31. */
  32. private int mCenterHeight;
  33. /**
  34. * 设置一个缩放的常量
  35. */
  36. private float mMinScale = 0.85f;
  37. /**
  38. * 缩放是否结束
  39. */
  40. private boolean isFinish = true;
  41. public MyImageView(Context context)
  42. {
  43. this(context, null);
  44. }
  45. public MyImageView(Context context, AttributeSet attrs)
  46. {
  47. this(context, attrs, 0);
  48. }
  49. public MyImageView(Context context, AttributeSet attrs, int defStyle)
  50. {
  51. super(context, attrs, defStyle);
  52. }
  53. /**
  54. * 必要的初始化
  55. */
  56. @Override
  57. protected void onLayout(boolean changed, int left, int top, int right, int bottom)
  58. {
  59. super.onLayout(changed, left, top, right, bottom);
  60. if (changed)
  61. {
  62. mWidth = getWidth() - getPaddingLeft() - getPaddingRight();
  63. mHeight = getHeight() - getPaddingTop() - getPaddingBottom();
  64. mCenterWidth = mWidth / 2;
  65. mCenterHeight = mHeight / 2;
  66. Drawable drawable = getDrawable();
  67. BitmapDrawable bd = (BitmapDrawable) drawable;
  68. bd.setAntiAlias(true);
  69. }
  70. }
  71. @Override
  72. public boolean onTouchEvent(MotionEvent event)
  73. {
  74. switch (event.getAction())
  75. {
  76. case MotionEvent.ACTION_DOWN:
  77. float X = event.getX();
  78. float Y = event.getY();
  79. mScaleHandler.sendEmptyMessage(SCALE_REDUCE_INIT);
  80. break;
  81. case MotionEvent.ACTION_UP:
  82. mScaleHandler.sendEmptyMessage(SCALE_ADD_INIT);
  83. break;
  84. }
  85. return true;
  86. }
  87. /**
  88. * 控制缩放的Handler
  89. */
  90. private Handler mScaleHandler = new Handler()
  91. {
  92. private Matrix matrix = new Matrix();
  93. private int count = 0;
  94. private float s;
  95. /**
  96. * 是否已经调用了点击事件
  97. */
  98. private boolean isClicked;
  99. public void handleMessage(android.os.Message msg)
  100. {
  101. matrix.set(getImageMatrix());
  102. switch (msg.what)
  103. {
  104. case SCALE_REDUCE_INIT:
  105. if (!isFinish)
  106. {
  107. mScaleHandler.sendEmptyMessage(SCALE_REDUCE_INIT);
  108. } else
  109. {
  110. isFinish = false;
  111. count = 0;
  112. s = (float) Math.sqrt(Math.sqrt(mMinScale));
  113. beginScale(matrix, s);
  114. mScaleHandler.sendEmptyMessage(SCALING);
  115. }
  116. break;
  117. case SCALING:
  118. beginScale(matrix, s);
  119. if (count < 4)
  120. {
  121. mScaleHandler.sendEmptyMessage(SCALING);
  122. } else
  123. {
  124. isFinish = true;
  125. if (MyImageView.this.mOnViewClickListener != null && !isClicked)
  126. {
  127. isClicked = true;
  128. MyImageView.this.mOnViewClickListener.onViewClick(MyImageView.this);
  129. } else
  130. {
  131. isClicked = false;
  132. }
  133. }
  134. count++;
  135. break;
  136. case 6:
  137. if (!isFinish)
  138. {
  139. mScaleHandler.sendEmptyMessage(SCALE_ADD_INIT);
  140. } else
  141. {
  142. isFinish = false;
  143. count = 0;
  144. s = (float) Math.sqrt(Math.sqrt(1.0f / mMinScale));
  145. beginScale(matrix, s);
  146. mScaleHandler.sendEmptyMessage(SCALING);
  147. }
  148. break;
  149. }
  150. }
  151. };
  152. protected void sleep(int i)
  153. {
  154. try
  155. {
  156. Thread.sleep(i);
  157. } catch (InterruptedException e)
  158. {
  159. e.printStackTrace();
  160. }
  161. }
  162. /**
  163. * 缩放
  164. *
  165. * @param matrix
  166. * @param scale
  167. */
  168. private synchronized void beginScale(Matrix matrix, float scale)
  169. {
  170. matrix.postScale(scale, scale, mCenterWidth, mCenterHeight);
  171. setImageMatrix(matrix);
  172. }
  173. /**
  174. * 回调接口
  175. */
  176. private OnViewClickListener mOnViewClickListener;
  177. public void setOnClickIntent(OnViewClickListener onViewClickListener)
  178. {
  179. this.mOnViewClickListener = onViewClickListener;
  180. }
  181. public interface OnViewClickListener
  182. {
  183. void onViewClick(MyImageView view);
  184. }
  185. }

代码不算复杂，主要就是对onTouchEvent的Action_Down和Action_Up的监听，然后通过Handler结合matrix完成缩放的效果。这里简单说一个mScaleHandler里面代码的逻辑，当检测到ACTION_DOWN事件，会判断当前缩放是否完成，如果完成了则添加缩小的效果，如果没有，则一直检测。ACTION_UP也是同样的过程。缩放的梯度就用到了文章开始介绍的小知识点。

有人会觉得使用Handler比较麻烦，这里一直使用Handler.sendMsg的原因是，利用了这个消息队列，队列先进先出，保证动画效果的流畅。因为ACTION_DOWN_与ACTION_UP一瞬点完成的，其实动画还在进行。如果你在onTouchEvent中用while集合sleep完成动画，会出现卡死，监听不到Up事件等问题。

3、主Activity

[java] view plain copy

  1. package com.ljp.ani01;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.view.View.OnClickListener;
  6. import android.widget.Toast;
  7. public class TestRolateAnimActivity extends Activity
  8. {
  9. MyImageView joke;
  10. @Override
  11. public void onCreate(Bundle savedInstanceState)
  12. {
  13. super.onCreate(savedInstanceState);
  14. setContentView(R.layout.main);
  15. joke = (MyImageView) findViewById(R.id.c_joke);
  16. joke.setOnClickIntent(new MyImageView.OnViewClickListener()
  17. {
  18. @Override
  19. public void onViewClick(MyImageView view)
  20. {
  21. Toast.makeText(TestRolateAnimActivity.this, "Joke", 1000).show();
  22. }
  23. });
  24. }
  25. }

利用提供的回调接口注册了点击事件。这里说明一下，现在为ImageView设置OnClickLIstener是没有作用的，因为自定义的ImageView的onTouchEvent直接返回了true,不会往下执行click事件，如果你希望通过OnClickLIstener进行注册，你可以把ontouchevent里面返回值改成super.ontouchevent(event)，并且需要将ImageView的clickable设置为true。这些都是Ontouch事件的传播机制，不了解的google下，还是很有必要的。

时间： 2024-08-09 00:03:00

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仿Win8界面开发

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文将要模仿Win8界面的一个设计,一个一个的方块.方法很简单.这里自己把图片改改就可以成为自己想要的界面了. 先来看看效果: 1.首先来看看自定义的MyImageView: package com.example.win8test; import android.annotation.SuppressLint; import android.content.Context; import

Android仿Win8界面的button点击

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

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

android仿win8 metro磁贴布局

代码下载     //更新代码,   这里是更新后的代码 //////////////////////// 1,含一个图片无限滚动的控件,自己实现的 2.可新增删除每个磁贴 3.来个图片吧 ////*********************////// 本来去年都已经做完了大部分代码,今天来更新了. 1.实现了块的随意移动,并记录位置. 2.坐标自动计算, 3.没有实现METRO的沉下去的效果,改用了一个假3D的效果 4.实现了改变块的大小并自动记录

【Android分享】仿WIN8系统磁贴点击效果

[Android分享]仿WIN8系统磁贴点击效果 功能分类:特效 支持平台:Android 运行环境:Eclipse 开发语言:Java 开发工具:Eclipse 源码大小:188.47KB 下载地址:http://www.dwz.cn/xslIw 源码简介 Demo源自http://www.apkbus.com/forum.php?mod=viewthread&tid=84631,利用自定义ImageView+View点击事件+动画实现的效果,因为原Demo无注释,所以本人在主要部分加入了代码

Android第八期 - 高仿 WIN8系统 磁贴点击下沉倾斜效果源码

效果图, Android第八期 - 高仿 WIN8系统 磁贴点击下沉倾斜效果源码

仿win8磁贴界面以及功能

做移动产品界面占很大的一部分,同时也是决定一款产品好的的重要因素,最近看见有人放win8的界面效果,搜了两款,一款是只是仿界面没有特效,另一款是自定义组件能够实现反转效果,今天分析一下这两类界面. 仿win8界面 win8磁贴类似九宫格效果,实现这种效果基本上有三种方式实现:LinearLayout,使用其属性layout_weight实现等分:TableLayout,做过计算器的人可能会用到过这个,也可以实现,还有一种就是GridView,自己实现适配器,我找到的仿win8界面使用Linear

Android仿京东首页轮播文字(又名垂直跑马灯)

Android仿京东首页轮播文字(又名垂直跑马灯) 京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个