Scroller是一个专门用于处理滚动效果的工具类,可能在大多数情况下,我们直接使用Scroller的场景并不多,但是很多大家所熟知的控件在内部都是使用Scroller来实现的,如ViewPager、ListView等。而如果能够把Scroller的用法熟练掌握的话,我们自己也可以轻松实现出类似于ViewPager这样的功能。
先撇开Scroller类不谈,其实任何一个控件都是可以滚动的,因为在View类当中有scrollTo()和scrollBy()这两个方法
scrollToBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
layout.scrollTo(-60, -100);
}
});
scrollByBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
layout.scrollBy(-60, -100);
}
});
没错,代码就是这么简单。当点击了scrollTo按钮时,我们调用了LinearLayout的scrollTo()方法,当点击了scrollBy按钮时,调用了LinearLayout的scrollBy()方法。那有的朋友可能会问了,为什么都是调用的LinearLayout中的scroll方法?这里一定要注意,不管是scrollTo()还是scrollBy()方法,滚动的都是该View内部的内容,而LinearLayout中的内容就是我们的两个Button,如果你直接调用button的scroll方法的话,那结果一定不是你想看到的。
注意scrollTo和scrollBy都是滚动的view内部的内容,切记.
scrollTo()方法是让View相对于初始的位置滚动某段距离,由于View的初始位置是不变的,因此不管我们点击多少次scrollTo按钮滚动到的都将是同一个位置。而scrollBy()方法则是让View相对于当前的位置滚动某段距离,那每当我们点击一次scrollBy按钮,View的当前位置都进行了变动,因此不停点击会一直向右下方移动。
目前使用这两个方法完成的滚动效果是跳跃式的,没有任何平滑滚动的效果。没错,只靠scrollTo()和scrollBy()这两个方法是很难完成ViewPager这样的效果的,因此我们还需要借助另外一个关键性的工具,也就我们今天的主角Scroller
Scroller的基本用法其实还是比较简单的,主要可以分为以下几个步骤:
创建Scroller的实例
调用startScroll()方法来初始化滚动数据并刷新界面
重写computeScroll()方法,并在其内部完成平滑滚动的逻辑
那么下面我们就按照上述的步骤,通过一个模仿ViewPager的简易例子来学习和理解一下Scroller的用法。
新建一个ScrollerLayout并让它继承自ViewGroup来作为我们的简易ViewPager布局,代码如下所示:
package com.example.viewpager2test.ScrollerTest;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Scroller;
public class ScrollerLayout extends ViewGroup {
private static final String TAG = "ScrollerLayout";
private Scroller mScroller;
private int leftBorder;
private int rightBorder;
private int mTouchSlop;
private float mXDown;
private float mXMove;
private float mXLastMove;
public ScrollerLayout(Context context) {
this(context, null);
}
public ScrollerLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ScrollerLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mScroller = new Scroller(context);
ViewConfiguration configuration = ViewConfiguration.get(context);
mTouchSlop = configuration.getScaledPagingTouchSlop();
Log.d(TAG, "ScrollerLayout: mTouchSlop:"+mTouchSlop);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
int childCount = this.getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = this.getChildAt(i);
childView.layout(i * childView.getMeasuredWidth(), 0
, (i + 1) * childView.getMeasuredWidth(), childView.getMeasuredHeight());
}
leftBorder = getChildAt(0).getLeft();
rightBorder = getChildAt(getChildCount() - 1).getRight();
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int childCount = this.getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = this.getChildAt(i);
this.measureChild(childView, widthMeasureSpec, heightMeasureSpec);
}
}
/**
* 事件拦截,当手指移动超过touchSlop,就拦截事件,不让他传给子控件,
* @param ev
* @return
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
mXDown = ev.getRawX();
Log.d(TAG, "onInterceptTouchEvent: mXDown:"+mXDown);
mXLastMove = mXDown;
break;
case MotionEvent.ACTION_MOVE:
mXMove = ev.getRawX();
Log.d(TAG, "onInterceptTouchEvent: mXMove:"+mXMove);
float diff = Math.abs(mXMove - mXDown);
mXLastMove = mXMove;
if (diff > mTouchSlop) {
return true;
}
break;
}
return super.onInterceptTouchEvent(ev);
}
/**
* 精华
* 用scrollto和scrollby实现丝滑滚动,就像smoothscrollTo和smoothscrollBy
* 实现原理:不断的调用scrollBy(dx),dx的值只要足够小,调用的次数足够多,就能看起来很丝滑
* @param event
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_MOVE:
mXMove = event.getRawX();
Log.d(TAG, "onTouchEvent: mXMove:"+mXMove);
int scrolledX = (int) ( mXLastMove-mXMove );
Log.d(TAG, "onTouchEvent: scrolledX:"+scrolledX);
if (this.getScrollX() + scrolledX < leftBorder) {
scrollTo(leftBorder, 0);
Log.d(TAG, "onTouchEvent: 已到左边界");
return true;
} else if (getScrollX() + getWidth() + scrolledX > rightBorder) {
scrollTo(rightBorder - getWidth(), 0);
Log.d(TAG, "onTouchEvent: 已到右边界");
return true;
}
scrollBy(scrolledX, 0);
mXLastMove = mXMove;
Log.d(TAG, "onTouchEvent: mXLastMove:"+mXLastMove);
break;
case MotionEvent.ACTION_UP:
int targetIndex = (this.getScrollX() + getWidth() / 2) / getWidth();
int dx = targetIndex * getWidth() - getScrollX();
mScroller.startScroll(getScrollX(), 0, dx, 0);
invalidate();
}
return super.onTouchEvent(event);
}
@Override
public void computeScroll() {
// 第三步,重写computeScroll()方法,并在其内部完成平滑滚动的逻辑
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
invalidate();
}
}
}