设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

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

2017-2-7 13:38| 发布者: zhangjf| 查看: 487| 评论: 0

摘要: 转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/23441455 昨晚没事手机下载了一些APP，发现现在仿win8的主界面越来越多，在大家见惯了类GridView或者类Tab后，给人一种耳目一新的感觉。今天 ...

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/23441455

昨晚没事手机下载了一些APP，发现现在仿win8的主界面越来越多，在大家见惯了类GridView或者类Tab后，给人一种耳目一新的感觉。今天在eoe上偶然发现已经有人实现了这个功能的源码（地址：http://www.eoeandroid.com/forum.php?mod=viewthread&tid=327557），马上下载跑了一下，效果很炫，但是有些bug，比如点击速度特别快时图像会被放大，以及点击时会触发两次点击事件。

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

效果：

首先普及一个小知识点：

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

  1. package com.zhy._01;
  3. public class Test2
  4. {
  5. public static void main(String[] args)
  6. {
  7. float val = 1;
  8. float s = 0.85f;
  9. int i = 0;
  10. s = (float) Math.sqrt(1 / s);
复制代码
  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. }
  18. }
  19. }
复制代码

输出结果：

  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、布局文件

  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" >
  9. <LinearLayout
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:orientation="vertical" >
  14. <LinearLayout
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:orientation="horizontal" >
  19. <LinearLayout
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:orientation="vertical" >
  24. <com.ljp.ani01.MyImageView
  25. android:id="@+id/c_joke"
  26. android:layout_width="wrap_content"
  27. android:layout_height="wrap_content"
  28. android:layout_margin="2dp"
  29. android:scaleType="matrix"
  30. android:src="@drawable/left_top" />
  32. <com.ljp.ani01.MyImageView
  33. android:id="@+id/c_idea"
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:layout_margin="2dp"
  37. android:scaleType="matrix"
  38. android:src="@drawable/left_bottom" />
  39. </LinearLayout>
  41. <com.ljp.ani01.MyImageView
  42. android:id="@+id/c_constellation"
  43. android:layout_width="wrap_content"
  44. android:layout_height="wrap_content"
  45. android:layout_margin="2dp"
  46. android:scaleType="matrix"
  47. android:src="@drawable/right" />
  48. </LinearLayout>
  50. <com.ljp.ani01.MyImageView
  51. android:id="@+id/c_recommend"
  52. android:layout_width="wrap_content"
  53. android:layout_height="wrap_content"
  54. android:layout_margin="2dp"
  55. android:scaleType="matrix"
  56. android:src="@drawable/bottom" />
  57. </LinearLayout>
  59. </LinearLayout>
复制代码

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

2、MyImageView.java

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

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

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


如果你觉得这篇文章对你有用，可以顶一个~~


源码下载点击此处






来自： http://blog.csdn.net//lmj623565791/article/details/23441455

收藏 邀请
上一篇：storm topology优化之lib库分离下一篇：EmailToolWithoutWeb - 一个普通的Java发送邮件的小工具

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-7-8 19:55

Copyright 2015-2025 djqfx

返回顶部