View的滑动
View的滑动主要有三种方式:
- 通过view本身提供的scrollTo/scrollBy方法来实现滑动
(该方法只能改变view内容的位置) - 通过动画给view施加平移效果来实现滑动
- 通过改变view的layoutparams使得view重新布局从而实现滑动
1.使用scrollTo/scrollBy
scrollTo实现了基于所传递参数的绝对滑动
scrollBy实现了基于当前位置的相对滑动
需要注意的是,scrollTo和scrollBy都只能改变view中的内容的位置而不能改变view在布局中的位置。
举个例子,下图中一个viewgroup包裹一个view,view中显示text。
如果我们调用
myview.scrollBy(-50, -50);
则表示将myview中的内容向右下各移动50,而并非将myview移动,结果如下图
若我们需要将myview移动,则需调用
myviewgroup.scrollBy(-50, -50);
即:将myviewgroup中的内容向右下各移动50,因为myview属于myviewgroup的内容,则结果如下图
2.使用动画
ObjectAnimator.ofFloat(myview, "translationX", 0, 120).setDuration(5000).start();
表示将myview在5000ms内向右平移120像素
3.改变布局参数
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) myview.getLayoutParams();
params.leftMargin += 50;
params.topMargin += 50;
myview.requestLayout();
表示将myview向右下各移动50
三种滑动方式的对比
- scrollTo/scrollBy : 操作简单,适合对view内容的滑动
- 动画 : 操作简单,适用于实现复杂的动画效果
- 改变布局参数 : 操作稍微复杂,适用于有交互的view
弹性滑动
知道了view的滑动,我们还要知道如何实现view的弹性滑动,比较生硬地滑动过去,用户体验太差了,因此我们要实现渐进式滑动。
1.使用Scroller
Scroller scroller = new Scroller(context);
//缓慢滑动到指定位置
public void smoothScrollTo(int x, int y){
scroller.startScroll(getScrollX(), getScrollY(), x-getScrollX(), y-getScrollY(), 1000);
invalidate();
}
//缓慢滑动到指定位置
public void smoothScrollBy(int x, int y){
scroller.startScroll(getScrollX(), getScrollY(), x, y, 1000);//整个滑动过程需要1000ms
invalidate();
}
@Override
public void computeScroll() {
if (scroller.computeScrollOffset()){
scrollTo(scroller.getCurrX(), scroller.getCurrY());
postInvalidate();
}
}
上面是Scroller的典型的使用方法。
这里描述下它的工作原理:
当我们调用startScroll方法时,Scroller只是保存了几个参数,从源码中我们可以看出
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;
}
调用Scroller的startScroll方法后,我们这里调用了view的invalidate方法,此时view会重绘,则会调用view的draw方法,而draw方法中又会去调用computeScroll方法,computeScroll方法在view中是个空实现,这里我们重写这个方法,在方法中调用了Scroller的computeScrollOffset方法,而computeScrollOffset方法中会根据时间的流逝计算出当前的mCurrX/mCurrY的值,我们来看下源码
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;
...
}
}
else {
mCurrX = mFinalX;
mCurrY = mFinalY;
mFinished = true;
}
return true;
}
计算出mCurrX/mCurrY的值后,调用scrollTo进行滑动,之后又调用postInvalidate通知view重绘,重复前面的行为。直到timePassed < mDuration条件不成立后,将mFinished=true,下次执行computeScrollOffset方法时会返回false,滑动结束。
2.通过动画
动画本身就是一种渐近的过程,因此通过它来实现的滑动天然就具有弹性效果
ObjectAnimator.ofFloat(myview, "translationX", 0, 120).setDuration(5000).start();
3.使用延时策略
其实就是类似Scroller的实现思想:将一次大的滑动分成若干此小的滑动,并在一个时间段内完成
这里我们采用handler来完成:
private static final int HANDLER_SCROLL = 0;
private static final int SCROLL_COUNT = 50; //分50次滑动
private static final int SCROLL_TIME = 500; //滑动总耗时500ms
private Handler mHandler = new Handler(){
int mCount = 0;
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case HANDLER_SCROLL:
if (mCount++ < SCROLL_COUNT){
int diffX = msg.arg1 / SCROLL_COUNT;
int diffY = msg.arg2 / SCROLL_COUNT;
scrollBy(diffX, diffY);
Message message = Message.obtain();
message.what = HANDLER_SCROLL;
message.arg1 = msg.arg1;
message.arg2 = msg.arg2;
sendMessageDelayed(message, SCROLL_TIME / SCROLL_COUNT);
}else {
mCount = 0;
}
break;
}
}
};
//缓慢滑动到指定位置
public void slowScrollTo(int x, int y){
int scrollX = getScrollX();
int scrollY = getScrollY();
int offsetX = x - scrollX;
int offsetY = y - scrollY;
Message message = Message.obtain();
message.what = HANDLER_SCROLL;
message.arg1 = offsetX;
message.arg2 = offsetY;
mHandler.sendMessage(message);
}
//缓慢滑动到指定位置
public void slowScrollBy(int x, int y){
Message message = Message.obtain();
message.what = HANDLER_SCROLL;
message.arg1 = x;
message.arg2 = y;
mHandler.sendMessage(message);
}