首页手记 Android View的弹性滑动

Android View的弹性滑动

标签：

Android

滑动是Android开发中非常重要的UI效果，几乎所有应用都包含了滑动效果，而本文将对滑动的使用以及原理进行介绍。

一、scrollTo与ScrollBy

View提供了专门的方法用于实现滑动效果，分别为scrollTo与scrollBy。先来看看它们的源码：

[代码]java代码：

/**

* Set the scrolled position of your view. This will cause a call to

* {@link #onScrollChanged(int, int, int, int)} and the view will be

* invalidated.

* @param x the x position to scroll to

* @param y the y position to scroll to

*/

public void scrollTo(int x, int y) {

if (mScrollX != x || mScrollY != y) {

int oldX = mScrollX;

int oldY = mScrollY;

mScrollX = x;

mScrollY = y;

invalidateParentCaches();

onScrollChanged(mScrollX, mScrollY, oldX, oldY);

if (!awakenScrollBars()) {

postInvalidateOnAnimation();

}

/**

* Move the scrolled position of your view. This will cause a call to

* {@link #onScrollChanged(int, int, int, int)} and the view will be

* invalidated.

* @param x the amount of pixels to scroll by horizontally

* @param y the amount of pixels to scroll by vertically

*/

public void scrollBy(int x, int y) {

scrollTo(mScrollX + x, mScrollY + y);

}

从源码中可以看出scrollBy实际上是调用了scrollTo函数来实现它的功能。scrollBy实现的是输入参数的相对滑动，而scrollTo是绝对滑动。需要说明的是mScrollX、mScrollY这两个View的属性，这两个属性可以通过getScrollX、getScrollY获得。

· mScrollX : View的左边缘在View内容的左边缘的右边时，为正值，反之为负值。

· mScrollY : View的上边缘在View内容的上边缘的下边时，为正值，反之为负值。

下面我们来实现一个滑动的效果：

[代码]java代码：

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

public class HorizontalScroller extends ViewGroup {

private int mTouchSlop;

private float mLastXIntercept=0;

private float mLastYIntercept=0;

private float mLastX=0;

private float mLastY=0;

private int leftBorder;

private int rightBorder;

public HorizontalScroller(Context context) {

super(context);

init(context);

}

public HorizontalScroller(Context context, AttributeSet attrs) {

super(context, attrs);

init(context);

}

public HorizontalScroller(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init(context);

}

private void init(Context context){

ViewConfiguration configuration = ViewConfiguration.get(context);

// 获取TouchSlop值

mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);

}

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

boolean intercept = false;

float xIntercept = ev.getX();

float yIntercept = ev.getY();

switch (ev.getAction()) {

case MotionEvent.ACTION_DOWN:

intercept = false;

break;

case MotionEvent.ACTION_MOVE:

float deltaX = xIntercept-mLastXIntercept;

float deltaY = yIntercept-mLastYIntercept;

// 当水平方向的滑动距离大于竖直方向的滑动距离，且手指拖动值大于TouchSlop值时，拦截事件

if (Math.abs(deltaX)>Math.abs(deltaY) && Math.abs(deltaX)>mTouchSlop) {

intercept=true;

}else {

intercept = false;

}

break;

case MotionEvent.ACTION_UP:

intercept = false;

break;

default:

break;

}

mLastX = xIntercept;

mLastY = yIntercept;

mLastXIntercept = xIntercept;

mLastYIntercept = yIntercept;

return intercept;

}

@Override

public boolean onTouchEvent(MotionEvent event) {

float xTouch = event.getX();

float yTouch = event.getY();

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

break;

case MotionEvent.ACTION_MOVE:

float deltaX = xTouch-mLastX;

float deltaY = yTouch-mLastY;

float scrollByStart = deltaX;

if (getScrollX() - deltaX < leftBorder) {

scrollByStart = getScrollX()-leftBorder;

} else if (getScrollX() + getWidth() - deltaX > rightBorder) {

scrollByStart = rightBorder-getWidth()-getScrollX();

}

scrollBy((int) -scrollByStart, 0);

break;

case MotionEvent.ACTION_UP:

// 当手指抬起时，根据当前的滚动值来判定应该滚动到哪个子控件的界面

int targetIndex = (getScrollX() + getWidth() / 2) / getWidth();

int dx = targetIndex * getWidth() - getScrollX();

scrollTo(getScrollX()+dx,0);

break;

default:

break;

}

mLastX = xTouch;

mLastY = yTouch;

return super.onTouchEvent(event);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int childCount = getChildCount();

for (int i = 0; i < childCount; i++) {

View childView = getChildAt(i);

// 测量每一个子控件的大小

measureChild(childView, widthMeasureSpec, heightMeasureSpec);

}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

@Override

protected void onLayout(boolean changed, int l, int t, int r, int b) {

if (changed) {

int childCount = getChildCount();

for (int i = 0; i < childCount; i++) {

View childView = getChildAt(i);

// 在水平方向上对子控件进行布局

childView.layout(i * getMeasuredWidth(), 0, i * getMeasuredWidth()+childView.getMeasuredWidth()+getPaddingLeft(), childView.getMeasuredHeight());

}

// 初始化左右边界值

leftBorder = 0;

rightBorder = getChildCount()*getMeasuredWidth();

}

现在我们来分析下这段代码:

· 首先在构造函数中获取了最小滑动距离TouchSlop。

· 重写onInterceptTouchEvent拦截事件，记录当前坐标。点下时，默认不拦截，只有当滑动还未完成的情况下，才继续拦截。在移动时，对滑动冲突进行了处理，当水平方向的移动距离大于竖直方向的移动距离，并且移动距离大于最小滑动距离时，我们判断此时为水平滑动，拦截事件自己处理；否则不拦截，交由子View处理。提起手指时，同样不拦截事件。

· 重写onTouchEvent处理事件，记录当前坐标。在手指按下时，与拦截事件时做相似处理。在ACTION_MOVE时，向左滑动，如果滑动距离超过左边界，则对滑动距离进行处理，相对的滑动距离超出又边界，也是一样处理，之后把滑动的距离交给scrollBy进行处理。当手指抬起时，根据当前的滚动值来判定应该滚动到哪个子控件的界面，然后使用scrollTo滑动到那个子控件。

· 重写了onMeasure和onLayout方法，在onMeasure中测量每一个子控件的大小值，在onLayout中对每一个子view在水平方向上进行布局。子view的layout的right增加父类的paddingLeft参数，来处理设置padding的情况。这两个函数的流程分析将会放在之后的文章中详细说明。

这个类的使用方法如下 :

[代码]xml代码：

<?xml version="1.0" encoding="utf-8"?>

<com.idtk.customscroll.HorizontalScroller

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="10dp"

tools:context="com.idtk.customscroll.MainActivity">

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/zhiqinchun"

android:clickable="true"/>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:clickable="true"/>

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clickable="true"/>

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clickable="true"/>

</com.idtk.customscroll.HorizontalScroller>

HorizontalScroller设置全屏，padding为10dp。使用4个ImageView作为子View，并且都设置为可点击状态。示例效果图如下:

二、Scroller

可以看到上面使用scrollTo与ScrollBy方法的滑动都是瞬时完成的，这有些无法满足我们在切换子view时的需求。我们希望切换子View时，可以拥有滑动过程的效果，而Scroller正好可以完成这一点。
Scroller的使用方法：
* 1、创建Scroller实例
* 2、使用startScroll方法，对其进行初始化
* 3、重写computeScroll()方法，在其内部调用scrollTo或ScrollBy方法，完成滑动过程。

[代码]java代码：

//创建实例

mScroller = new Scroller(context);

public void smoothScrollTo(){

int ScrollX = getScrollX();

int ScrollY = getScrollY();

//初始化，1000ms内缓慢滑动到deltaX

mScroller.startScroll(ScrollX, 0, 0, deltaX, 1000);

invalidate();

}

@Override

public void computeScroll() {

if(mScroller.computeScrollOffset()){

int currX = mScroller.getCurrX();

int currY = mScroller.getCurrY();

scrollTo(currX, currY);

postInvalidate();

}

上面的代码是Scroller的典型用法，也就是传说中的套路。当时Scroller使用startScroll方法时，只是对一系列参数进行了初始化。我们从下面的源码中可以看出。

[代码]java代码：

public void startScroll(int startX, int startY, int dx, int dy, int duration) {

mMode = SCROLL_MODE;

mFinished = false;

mDuration = duration;

mStartTime = AnimationUtils.currentAnimationTimeMillis();

mStartX = startX;

mStartY = startY;

mFinalX = startX + dx;

mFinalY = startY + dy;

mDeltaX = dx;

mDeltaY = dy;

mDurationReciprocal = 1.0f / (float) mDuration;

}

参数中，startX、startY是滑动的起点，dx、dy是滑动的距离，duration是滑动的时间系统设置为250ms。我们可以看到startScroll只是进行了滑动时间、是否滑动完成、起点、终点、滑动距离等的参数的设置，那么是如何调用computeScroll()函数的呢？其实computeScroll()的调用是由之后的invalidate()函数来完成的，invalidate可以请求View重绘，在View重绘时会调用draw方法，draw方法又会去调用computeScroll函数。但computeScroll()函数在view中是一个空的函数，需要我们去实现它。
computeScroll()函数的实现已经在上面给出了，有了computeScroll方法之后，就可以实现View的弹性滑动了。来看下computeScroll()的实现过程，首先要进行computeScrollOffset()的判断，来看下它的源码 :

[代码]java代码：

public boolean computeScrollOffset() {

if (mFinished) {

return false;

}

int timePassed = (int)(AnimationUtils.currentAnimationTimeMillis() - mStartTime);

if (timePassed < mDuration) {

switch (mMode) {

case SCROLL_MODE:

final float x = mInterpolator.getInterpolation(timePassed * mDurationReciprocal);

mCurrX = mStartX + Math.round(x * mDeltaX);

mCurrY = mStartY + Math.round(x * mDeltaY);

break;

case FLING_MODE:

final float t = (float) timePassed / mDuration;

final int index = (int) (NB_SAMPLES * t);

float distanceCoef = 1.f;

float velocityCoef = 0.f;

if (index < NB_SAMPLES) {

final float t_inf = (float) index / NB_SAMPLES;

final float t_sup = (float) (index + 1) / NB_SAMPLES;

final float d_inf = SPLINE_POSITION[index];

final float d_sup = SPLINE_POSITION[index + 1];

velocityCoef = (d_sup - d_inf) / (t_sup - t_inf);

distanceCoef = d_inf + (t - t_inf) * velocityCoef;

}

mCurrVelocity = velocityCoef * mDistance / mDuration * 1000.0f;

mCurrX = mStartX + Math.round(distanceCoef * (mFinalX - mStartX));

// Pin to mMinX <= mCurrX <= mMaxX

mCurrX = Math.min(mCurrX, mMaxX);

mCurrX = Math.max(mCurrX, mMinX);

mCurrY = mStartY + Math.round(distanceCoef * (mFinalY - mStartY));

// Pin to mMinY <= mCurrY <= mMaxY

mCurrY = Math.min(mCurrY, mMaxY);

mCurrY = Math.max(mCurrY, mMinY);

if (mCurrX == mFinalX && mCurrY == mFinalY) {

mFinished = true;

}

break;

}

else {

mCurrX = mFinalX;

mCurrY = mFinalY;

mFinished = true;

}

return true;

}

computeScrollOffset()首先检测scroller是否完成滑动，完成则返回false，未完成则继续AnimationUtils.currentAnimationTimeMillis获取当前的毫秒值，减去之前startScroll方法时获得毫秒值，就是当前滑动的执行时间。之后判断执行时间是否小于设置的总时间，如果小于，根据startScroll时设置的模式SCROLL_MODE，然后根据Interpolator计算出当前滑动的mcurrX、mcurrY（顺便提一下在实例化scroller的时候，是可以设置动画插值器。）；如果执行时间大于或者等于设置的总时间，则直接设置mcurrX、mcurrY为终点值，并且设置mFinished，表示动画已经完成。
Scroller弹性滑动的流程如下

现在使用Scroller方法来更改一下上面的代码，当ACTION_UP时，子View的滑动可以有一个过程，而不是瞬时完成。

[代码]java代码：

private Scroller mScroller;

...

private void init(Context context){

// 第一步，创建Scroller的实例

mScroller = new Scroller(context);

...

}

@Override

public boolean onTouchEvent(MotionEvent event) {

float xTouch = event.getX();

float yTouch = event.getY();

switch (event.getAction()) {

...

case MotionEvent.ACTION_UP:

// 当手指抬起时，根据当前的滚动值来判定应该滚动到哪个子控件的界面

int targetIndex = (getScrollX() + getWidth() / 2) / getWidth();

int dx = targetIndex * getWidth() - getScrollX();

// 第二步，使用startScroll方法，对其进行初始化

mScroller.startScroll(getScrollX(), 0, dx, 0);

invalidate();

break;

default:

break;

}

mLastX = xTouch;

mLastY = yTouch;

return super.onTouchEvent(event);

}

...

@Override

public void computeScroll() {

// 第三步，重写computeScroll()方法，在其内部调用scrollTo或ScrollBy方法，完成滑动过程

if (mScroller.computeScrollOffset()) {

scrollTo(mScroller.getCurrX(), mScroller.getCurrY());

postInvalidate();

}

上面就是代码中需要增加和修改的部分，我们来简单分析下。

· 在构造函数中增加对Scroller进行了实例化。

· 替换onTouchEvent中手指抬起后的方法，改为使用startScroll方法，对mScroller进行初始化，之后invalidate请求重绘。

· 增加重写的computeScroll()方法，在其内部调用scrollTo或ScrollBy方法，完成滑动过程，之后使用postInvalidate()请求view重绘。

示例效果图如下 :

三、回弹效果

从上面的效果图可以看出，我们已经实现了view的平滑滚动，滑动位置超过当前view的1/2时，松手之后变会自动滑出此item的View。可是如果想要在首位两端实现回弹效果，该如何做呢？其实只要修改onTouchEvent方法即可。

[代码]java代码：

@Override

public boolean onTouchEvent(MotionEvent event) {

float xTouch = event.getX();

float yTouch = event.getY();

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

if (!mScroller.isFinished())

mScroller.abortAnimation();

break;

case MotionEvent.ACTION_MOVE:

float deltaX = xTouch-mLastX;

float deltaY = yTouch-mLastY;

float scrollByStart = deltaX;

//如果超出边界，则把滑动距离缩小到1/3

if (getScrollX() - deltaX < leftBorder) {

scrollByStart = deltaX/3;

} else if (getScrollX() + getWidth() - deltaX > rightBorder) {

scrollByStart = deltaX/3;

}

scrollBy((int) -scrollByStart, 0);

break;

case MotionEvent.ACTION_UP:

// 当手指抬起时，根据当前的滚动值来判定应该滚动到哪个子控件的界面

int targetIndex = (getScrollX() + getWidth() / 2) / getWidth();

//如果超过右边界，则回弹到最后一个View

if (targetIndex>getChildCount()-1){

targetIndex = getChildCount()-1;

//如果超过左边界，则回弹到第一个View

}else if (targetIndex<0){

targetIndex =0;

}

int dx = targetIndex * getWidth() - getScrollX();

// 第二步，使用startScroll方法，对其进行初始化

mScroller.startScroll(getScrollX(), 0, dx, 0);

invalidate();

break;

default:

break;

}

mLastX = xTouch;

mLastY = yTouch;

return super.onTouchEvent(event);

}

来简单分析下修改的onTouchEvent方法:

在滑动的过程中，如果滑动的位置超过了试图的左、右边界，则缩小View的滑动距离，使之为手指滑动距离的1/3。当手指离开时，如果通过view宽度获得的当前inder小与0，则index为第一个View；如果获得的当前index超过了子View的数量-1，则index为最后一个View。View的回弹效果如下:

四、小结

本文介绍弹性滑动的实现方法，并对弹性滑动的过程进行了详细分析。在之后通过例子实现了view的弹性滑动以及回弹效果，但最后还留有两个问题，即invalidate与postInvalidate的区别又在哪里呢？invalidate是如何调用computeScroll()函数的呢？，这些问题我将在下一篇文章中进行详细的分析。

原文链接：http://www.apkbus.com/blog-705730-61802.html

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

不负相思意

手记
篇

粉丝

12

获赞与收藏

69

关注作者，订阅最新文章

相关文章推荐

Android 解决 View 的滑动冲突

Android 解决 View 的滑动冲突

一文解决Android View滑动冲突

jQuery弹性滑动导航菜单

写了个移动端可滑动（惯性滑动&amp;回弹）Vue导航栏组件 ly-tab

阅读免费教程

Android 入门教程

59个小节 43414 461

Android Studio 编辑器教程

40个小节 11795 242

后端通用面试教程

41个小节 30429 343

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Android View的弹性滑动

一、scrollTo与ScrollBy

[代码]java代码：

[代码]java代码：

[代码]xml代码：

二、Scroller

[代码]java代码：

[代码]java代码：

[代码]java代码：

[代码]java代码：

三、回弹效果

[代码]java代码：

四、小结

相关文章推荐

阅读免费教程