`
chriszeng87
  • 浏览: 741314 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Android横向滚动屏幕特效分析

阅读更多

转自: http://mobile.51cto.com/design-375889.htm

 

今天教大家写一个类似于Android桌面的launcher效果的自定义控件,在开始写之前大家需要熟悉几个类和它们的方法,下面我分别列出来:

一.VelocityTracker 速度追踪器

顾名思义这个类的作用主要是追踪用户手指在屏幕上的滑动速度。当你要跟踪一个touch事件的时候,使用obtain()方法得到这个类的实 例,然后 用addMovement(MotionEvent)函数将你接受到的motion event加入到VelocityTracker类实例中。当你使用到速率时,使用computeCurrentVelocity(int)初始化速率的 单位,并获得当前的事件的速率,然后使用getXVelocity() 或getXVelocity()获得横向和竖向的速率。

二.ViewConfiguration

这个类里面定义了android的许多标准的常量(UI的超时、大小和距离等)。

三.GestureDetector 手势识别器

这个类主要是追踪用户手指在屏幕上的滑动方向,这个类在我们马上要实现的类中没有使用,但是使用的原理和它差不多,所以顺便提一下,而且在以后的开发中,这个类也是经常使用的。

四.Scroller

这个类主要是支持view控件滑动,其实android很多可滑动的控件里面默认隐藏的就是这个类。而且这个类没有进行实际的视图移动,当调用它的 startScroll()方法实际上只是为了在父类调用computeScroll()方法前开始动画,也就是说这个类实际上就是相当于一个代理,值是 为了给后面视图移动添加一些动画效果。所以单独调用startScroll()而不重写computeScroll()方法是不会看到任何效果的。这两者 必须配合使用,才能有移动的时候的动画效果。

其中Scroller.computeScrollOffset()方法是判断scroller的移动动画是否完成,当你调用startScroll()方法的时候这个方法返回的值一直都为true,如果采用其它方式移动视图比如:scrollTo()或 scrollBy时那么这个方法返回false。

现在来讲讲startScroll(int startX, int startY, int dx, int dy, int duration)方法的四个参数的意思:

  • startX表示当前视图的x坐标值
  • startY表示当前视图的y坐标值
  • dx表示在当前视图的x坐标基础上横向移动的距离
  • dy表示在当前视图的y坐标基础上纵向移动的距离
  • duration表示视图移动的操作在多少时间内执行完场,也就是动画的持续时间(单位:毫秒)

五.ViewGroup

这是个特殊的View,它继承于Android.view.View,它的功能就是装载和管理下一层的View对象或ViewGroup对象,也就说他是一个容纳其它元素的的容器。

下面我们来分别分析我们要使用这5个类的那些方法,首先我们来看ViewGroup类,因为我们自定义的控件就是继承至这个类,我们会重写这个类中的5个方法如下:

1.onLayout(boolean changed, int l, int t, int r, int b)

这个方法是在onMeasure()方法执行后调用,作用是父类为子类在屏幕上分配实际的宽度和高度。里面的四个参数分别表示,布局是否发生改变,布局左 上右下的边距。

2.onMeasure(int widthMeasureSpec, int heightMeasureSpec)

这个方法在控件的父元素正要放置它的子控件时调用。然后传入两个参数——widthMeasureSpec和 heightMeasureSpec。它们指明控件可获得的空间以及关于这个空间描述的元数据。比返回一个结果要好的方法是你传递View的高度和宽度到 setMeasuredDimension方法里。widthMeasureSpec和heightMeasureSpec参数在它们使用之前,首先要做 的是使用MeasureSpec类的静态方法getMode和getSize来译解。一个MeasureSpec包含一个尺寸和模式。

有三种可能的模式:

  • UNSPECIFIED:父布局没有给子布局任何限制,子布局可以任意大小。
  • EXACTLY:父布局决定子布局的确切大小。不论子布局多大,它都必须限制在这个界限里。(当布局定义为一个固定像素或者fill_parent时就是EXACTLY模式)
  • AT_MOST:子布局可以根据自己的大小选择任意大小。(当布局定义为wrap_content时就是AT_MOST模式)

3.computeScroll()

这个方法主要是父类要求它的子类滚动的时候调用。在这个方法里,我们可以实现 view的滚动操作,这里滚动并不是view的滚动而是布局的滚动。当调用scroller的startScroll()方法后父类就会调用这个方法实现 滚动视图滚动操作。

4.onTouchEvent(MotionEvent event)

处理传递到view 的手势事件。手势事件类型包括ACTION_DOWN,ACTION_MOVE,ACTION_UP,ACTION_CANCEL等事件。Layout里 的onTouch默认返回值是false, View里的onTouch默认返回值是true,当我们手指点击屏幕时候,先调用ACTION_DOWN事件,当onTouch里返回值是true的时 候,onTouch回继续调用ACTION_UP事件,如果onTouch里返回值是false,那么onTouch只会调用ACTION_DOWN而不调用ACTION_UP.

5.onInterceptTouchEvent(MotionEvent ev)

用于拦截手势事件的,每个手势事件都会先调用这个方法。Layout里的onInterceptTouchEvent默认返回值是false,这样touch事件会传递到View控件。

下面再将几个大家可能比较混乱的方法说明一下:

Invalidate()和PostInvalidate(),这两个方法作用都一样,就是呼叫ui线程重新绘制 界面也就是刷新界面。那为什么要两个方法呢,这是因为android是多线程应用,大家应该都知道在非UI线程中是不能直接操作界面控件的,所以第2个方 法就帮助大家在子线程中刷行界面,第一个方法则是在UI线程中刷新界面。

getX()和getRawX()这两个方法的左右都是获取当前点在屏幕上的坐标,getX()是获取当前点相对于当前视图左上角的坐标,getRawX()则是获取当前点相对于手机屏幕左上角的坐标。

上面已经把我们要用到的类和方法做了详细描述,下面就是实现的源码:

  1. import android.content.Context; 
  2. import android.util.AttributeSet; 
  3. import android.view.MotionEvent; 
  4. import android.view.VelocityTracker; 
  5. import android.view.View; 
  6. import android.view.ViewConfiguration; 
  7. import android.view.ViewGroup; 
  8. import android.widget.Scroller; 
  9.  
  10. /** 
  11. * @author 
  12. */ 
  13. public class ScrollLayout extends ViewGroup { 
  14.  
  15. private Scroller mScroller; 
  16. private VelocityTracker mVelocityTracker; 
  17.  
  18. /** 
  19. * 当前的屏幕位置 
  20. */ 
  21. private int mCurScreen; 
  22.  
  23. /** 
  24. * 设置默认屏幕的属性,0表示第一个屏幕 
  25. */ 
  26. private int mDefaultScreen = 0
  27.  
  28. /** 
  29. * 标识滚动操作已结束 
  30. */ 
  31. private static final int TOUCH_STATE_REST = 0
  32. /** 
  33. * 标识正在执行滑动操作 
  34. */ 
  35. private static final int TOUCH_STATE_SCROLLING = 1
  36.  
  37. /** 
  38. * 标识滑动速率 
  39. */ 
  40. private static final int SNAP_VELOCITY = 600
  41.  
  42. /** 
  43. * 当前滑动状态 
  44. */ 
  45. private int mTouchState = TOUCH_STATE_REST; 
  46.  
  47. /** 
  48. * 在用户触发ontouch事件之前,我们认为用户能够使view滑动的距离(像素) 
  49. */ 
  50. private int mTouchSlop; 
  51.  
  52. /** 
  53. * 手指触碰屏幕的最后一次x坐标 
  54. */ 
  55. private float mLastMotionX; 
  56.  
  57. /** 
  58. * 手指触碰屏幕的最后一次y坐标 
  59. */ 
  60. @SuppressWarnings("unused"
  61. private float mLastMotionY; 
  62.  
  63. public ScrollLayout(Context context) { 
  64. super(context); 
  65. mScroller = new Scroller(context); 
  66. mCurScreen = mDefaultScreen; 
  67. mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); 
  68.  
  69. public ScrollLayout(Context context, AttributeSet attrs) { 
  70. super(context, attrs); 
  71. mScroller = new Scroller(context); 
  72. mCurScreen = mDefaultScreen; 
  73. mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); 
  74.  
  75. public ScrollLayout(Context context, AttributeSet attrs, int defStyle) { 
  76. super(context, attrs, defStyle); 
  77. mScroller = new Scroller(context); 
  78. mCurScreen = mDefaultScreen; 
  79. mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); 
  80.  
  81. @Override 
  82. protected void onLayout(boolean changed, int l, int t, int r, int b) { 
  83. if (changed) { 
  84. int childLeft = 0
  85. final int childCount = getChildCount(); 
  86.  
  87. for (int i = 0; i < childCount; i++) { 
  88. final View childView = getChildAt(i); 
  89. if (childView.getVisibility() != View.GONE) { 
  90. final int childWidth = childView.getMeasuredWidth(); 
  91. childView.layout(childLeft, 0, childLeft + childWidth, 
  92. childView.getMeasuredHeight()); 
  93. childLeft += childWidth; 
  94.  
  95. @Override 
  96. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  97. super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
  98.  
  99. final int width = MeasureSpec.getSize(widthMeasureSpec); 
  100. final int widthMode = MeasureSpec.getMode(widthMeasureSpec); 
  101. if (widthMode != MeasureSpec.EXACTLY) { 
  102. throw new IllegalStateException( 
  103. "ScrollLayout only canmCurScreen run at EXACTLY mode!"); 
  104.  
  105. final int heightMode = MeasureSpec.getMode(heightMeasureSpec); 
  106. if (heightMode != MeasureSpec.EXACTLY) { 
  107. throw new IllegalStateException( 
  108. "ScrollLayout only can run at EXACTLY mode!"); 
  109.  
  110. final int count = getChildCount(); 
  111. for (int i = 0; i < count; i++) { 
  112. getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec); 
  113. // 初始化视图的位置 
  114. scrollTo(mCurScreen * width, 0); 
  115.  
  116. /** 
  117. * 根据滑动的距离判断移动到第几个视图 
  118. */ 
  119. public void snapToDestination() { 
  120. final int screenWidth = getWidth(); 
  121. final int destScreen = (getScrollX() + screenWidth / 2) / screenWidth; 
  122. snapToScreen(destScreen); 
  123.  
  124. /** 
  125. * 滚动到制定的视图 
  126. * 
  127. * @param whichScreen 
  128. * 视图下标 
  129. */ 
  130. public void snapToScreen(int whichScreen) { 
  131. whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1)); 
  132. if (getScrollX() != (whichScreen * getWidth())) { 
  133.  
  134. final int delta = whichScreen * getWidth() - getScrollX(); 
  135. mScroller.startScroll(getScrollX(), 0, delta, 01000); 
  136. mCurScreen = whichScreen; 
  137. invalidate(); 
  138.  
  139. public void setToScreen(int whichScreen) { 
  140. whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1)); 
  141. mCurScreen = whichScreen; 
  142. scrollTo(whichScreen * getWidth(), 0); 
  143.  
  144. public int getCurScreen() { 
  145. return mCurScreen; 
  146.  
  147. @Override 
  148. public void computeScroll() { 
  149. if (mScroller.computeScrollOffset()) { 
  150. scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); 
  151. postInvalidate(); 
  152.  
  153. @Override 
  154. public boolean onTouchEvent(MotionEvent event) { 
  155. if (mVelocityTracker == null) { 
  156. mVelocityTracker = VelocityTracker.obtain(); 
  157. mVelocityTracker.addMovement(event); 
  158.  
  159. final int action = event.getAction(); 
  160. final float x = event.getX(); 
  161.  
  162. switch (action) { 
  163. case MotionEvent.ACTION_DOWN: 
  164. if (!mScroller.isFinished()) { 
  165. mScroller.abortAnimation(); 
  166. mLastMotionX = x; 
  167. break
  168.  
  169. case MotionEvent.ACTION_MOVE: 
  170. int deltaX = (int) (mLastMotionX - x); 
  171. mLastMotionX = x; 
  172.  
  173. scrollBy(deltaX, 0); 
  174. break
  175.  
  176. case MotionEvent.ACTION_UP: 
  177. final VelocityTracker velocityTracker = mVelocityTracker; 
  178. velocityTracker.computeCurrentVelocity(1000); 
  179. int velocityX = (int) velocityTracker.getXVelocity(); 
  180.  
  181. if (velocityX > SNAP_VELOCITY && mCurScreen > 0) { 
  182. // 向左移动 
  183. snapToScreen(mCurScreen - 1); 
  184. else if (velocityX < -SNAP_VELOCITY 
  185. && mCurScreen < getChildCount() - 1) { 
  186. // 向右移动 
  187. snapToScreen(mCurScreen + 1); 
  188. else { 
  189. snapToDestination(); 
  190. if (mVelocityTracker != null) { 
  191. mVelocityTracker.recycle(); 
  192. mVelocityTracker = null
  193. mTouchState = TOUCH_STATE_REST; 
  194. break
  195. case MotionEvent.ACTION_CANCEL: 
  196. mTouchState = TOUCH_STATE_REST; 
  197. break
  198.  
  199. return true
  200.  
  201. @Override 
  202. public boolean onInterceptTouchEvent(MotionEvent ev) { 
  203. final int action = ev.getAction(); 
  204. if ((action == MotionEvent.ACTION_MOVE) 
  205. && (mTouchState != TOUCH_STATE_REST)) { 
  206. return true
  207.  
  208. final float x = ev.getX(); 
  209. final float y = ev.getY(); 
  210.  
  211. switch (action) { 
  212. case MotionEvent.ACTION_MOVE: 
  213. final int xDiff = (int) Math.abs(mLastMotionX - x); 
  214. if (xDiff > mTouchSlop) { 
  215. mTouchState = TOUCH_STATE_SCROLLING; 
  216. break
  217.  
  218. case MotionEvent.ACTION_DOWN: 
  219. mLastMotionX = x; 
  220. mLastMotionY = y; 
  221. mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST 
  222. : TOUCH_STATE_SCROLLING; 
  223. break
  224.  
  225. case MotionEvent.ACTION_CANCEL: 
  226. case MotionEvent.ACTION_UP: 
  227. mTouchState = TOUCH_STATE_REST; 
  228. break
  229.  
  230. return mTouchState != TOUCH_STATE_REST; 
  231.  
  232. }
分享到:
评论

相关推荐

    Android特效——数字滚动条

    总的来说,实现Android的数字滚动条特效需要扎实的Android基础知识,包括自定义View、绘图、动画以及事件处理。通过实践这个项目,你不仅能掌握这些技能,还能提高解决复杂问题的能力,为今后的Android开发积累宝贵...

    Android垂直滚动TextView跑马灯Demo

    然而,原生的TextView默认只支持水平滚动,若要实现垂直滚动,我们需要对TextView进行一定的定制。这个Demo中的VerticalScrollTextView可能是对原生TextView的一个子类,添加了垂直滚动的功能。 要实现垂直滚动,...

    Android 切换游戏场景特效的实现

    在Android游戏开发中,切换场景特效的实现是一个关键的环节,它不仅关乎用户体验,也直接影响到游戏的整体流畅度和视觉效果。本篇文章将深入探讨如何在Android平台上实现游戏场景之间的平滑过渡,以及如何添加各种...

    Android Gallery 特效

    总之,`FlingGallery`为开发者提供了一种实现高级滚动特效的途径,它弥补了原生`Gallery`组件的不足,让开发者能够在Android应用中创建出更加生动、吸引人的用户界面。在实际开发中,理解并熟练运用`FlingGallery`,...

    Android循环滚动广告banner

    在Android应用开发中,循环滚动广告Banner是一种常见的组件,它用于展示一系列的广告图片或内容,通常具有自动轮播和用户交互功能。本项目基于Android Studio进行开发,提供了丰富的动画效果,如横向切换、翻页切换...

    ListView - 视差特效

    在ListView中实现视差特效,首先需要理解Android的滚动事件处理机制。当ListView滚动时,会触发OnScrollListener的onScroll()方法。开发者可以在此处捕获滚动事件,并根据滚动距离调整背景元素的位置或缩放,以此...

    Android 文字跑马灯文字水平自动滚动控件及效果演示.rar

    Android 文字跑马灯文字水平自动滚动控件及效果演示,文字左右移动特效,文字滚动速度可调、文本颜色也可以自定义,可以用手触屏来控制是否停止文字滚动,控制点击停止或者继续运行,在开始滚动前,对文字样式做以下...

    Android 特效合辑

    - **NestedScrollView**:支持嵌套滑动,可以在垂直滚动中包含水平滚动视图。 3. 交互设计: - **手势识别**:通过识别用户的触摸动作,如滑动、点击、长按等,实现特定功能。 - **悬浮按钮...

    Androidgallery重叠特效源码+注释.zip

    首先,`Androidgallery`通常指的是Android中的`Gallery`视图,这是一个可以水平滚动的视图组件,用户可以通过左右滑动来选择不同的项目。然而,`Androidgallery`在API 16(Android 4.1)之后已被废弃,取而代之的是`...

    基于Android的gallery重叠特效源码+注释.zip

    Gallery组件是Android SDK中的一个控件,它允许用户通过水平滚动来浏览一系列的图片或视图。然而,这里的“重叠特效”指的是对默认Gallery功能的一种扩展,通过编程实现了元素之间的部分重叠,增加了动态过渡的效果...

    ScrollView之阻尼特效

    在Android开发中,ScrollView是一个非常常见的布局控件,它允许用户滚动查看超出屏幕范围的内容。在本主题"ScrollView之阻尼特效"中,我们将探讨如何为ScrollView添加一种特殊的动画效果,这种效果通常被称为“阻尼...

    android 安卓TextView 特效

    3. `scrollHorizontally`:设置为true,使文本能水平滚动。 4. `marqueeRepeatLimit`:可选,设置滚动次数,默认为-1,表示无限循环。 示例代码: ```xml android:text="这是跑马灯效果的示例文本" android:...

    安卓Gallery照片墙画廊图库相关-android-image-slide-panel图片照片墙的加载和滑动特效.rar

    它允许用户水平滚动浏览一系列图像,但自Android 3.0(API级别11)起,`Gallery`已被弃用,开发者被推荐使用`HorizontalScrollView`或`ViewPager`来实现类似的功能。本项目中的“android-image-slide-panel”可能是...

    Android的移动应用页面特效集合源码.rar

    "Android的移动应用页面特效集合源码.rar"这个压缩包文件提供了一组用于构建Android应用的页面特效源代码,对于开发者来说,这是一个宝贵的资源库,可以帮助他们快速实现各种酷炫的效果,提升应用程序的视觉吸引力。...

    Android图片拖动、点击放大效果

    首先,Gallery组件是Android SDK中的一个特殊视图,它允许用户水平滚动一系列的视图,类似于iOS的Carousel控件。在本项目中,Gallery被用作图片展示的容器,用户可以通过左右滑动来浏览多张图片,实现了图片的拖动...

    android 自定义ListView实现动画特效

    在Android开发中,ListView是常用的数据展示控件,它可以显示大量的数据并支持滚动操作。然而,为了提升用户体验,开发者往往需要对ListView进行自定义,添加各种动态效果,使其更具吸引力。本篇将深入探讨如何通过...

    仿京东app分类特效

    它允许用户水平滚动内容,是实现这一特效的基础组件。 3. **PagerAdapter** 和 **ViewPager**:为了实现标签间的平滑滑动,开发者可能会使用ViewPager配合PagerAdapter。ViewPager可以承载多个页面,并提供左右滑动...

    安卓Android源码——gallery重叠特效源码+注释.zip

    在安卓开发中,"gallery"组件是早期Android SDK中用于展示可滚动图片或视图的控件,类似于iOS中的carousel效果。然而,随着Android版本的更新,Gallery组件在API Level 17(Android 4.2)后已被弃用,取而代之的是更...

    Android应用源码gallery重叠特效源码+注释.zip

    1. **Gallery控件**:Gallery是Android 2.x版本的一个视图组件,它可以水平滚动展示多个项目,每个项目通常是一个ImageView或其他视图。在后来的版本中,Gallery被替换为更现代的ViewPager。 2. **自定义布局**:...

Global site tag (gtag.js) - Google Analytics