大家好,当你看到一些购物类App的商品详情页时,是不是对它的分页处理感到眼前一亮呢,是不是对该情景下的逻辑想的十分清楚呢,那么今天我就简单的来谈谈如何优雅的实现这一功能。
实现的原理:我会定义一个Viewgroup,这个容器将装载着两个ScrollView,分别表示着第一页和第二页。其中我还将ScrollView进行了封装,留有监听滑动到顶部和底部的监听。之后,我们将对事件进行拦截处理,下面代码会仔细讲。
1.重写ScrollView,得到滑动到顶部和底部的时机
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (state == null) return;
//当ScrollView的子Layout的测量高度==ScrollView的高度加上滑动的距离,这时候就到达了底部
if (getChildAt(0).getMeasuredHeight() <= getMeasuredHeight() + getScrollY()) {
state.aliBottom(MyScrollView.this);
return;
}
if (getScrollY() == 0) {
//当滑动距离为0时,就说明ScrolView到达了顶部
state.aliTop(MyScrollView.this);
return;
}
//否则就认为在中间状态
state.center(this);
}
//监听
public interface PositionState {
//顶部
void aliTop(ScrollView v);
/底部
void aliBottom(ScrollView v);
//中部
void center(ScrollView v);
}
2.定义ScrollView容器,处理事件的拦截和滑动
/*
* 一般在 onSizeChanged()方法中获取高度,还能实时的获得实际的大小,很方便
**/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = getMeasuredWidth();
height = getMeasuredHeight();
}
/*
* 这里将容器的高度设置为first的高度
**/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec, heightMeasureSpec);
int h = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), h);
//设置边界
topBorder = getMeasuredHeight();
}
/*
* 这里跟Linearlayout有点像,就是first在second的上面,叠加的过程
**/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int h = firstView.getMeasuredHeight();
firstView.layout(0, 0, width, h);
secondView.layout(0, h, width, h + secondView.getMeasuredHeight());
}
/*
* 在进行事件拦截的时候,一般是这样的:Down时间是默认不拦截的,move是选择性拦截的,up时间是默认拦截的(能接受到up事件就就说明容器自己要处理该事件了)
**/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
//默认不拦截
touchY = ev.getRawY();
touchFistTime = ev.getRawY();
isIntercept = false;
break;
case MotionEvent.ACTION_MOVE:
float move = ev.getRawY() - touchFistTime;
//当first在底部时我们将拦截所有的move时间
if (move > 0 && secondState == TOP && firstState == UN_VISIABLE) {
isIntercept = true;
break;
}
//当second在顶部时,我们将拦截所有的move事件
if (move < 0 && firstState == BOTTOM && secondState == UN_VISIABLE) {
isIntercept = true;
break;
}
isIntercept = false;
break;
case MotionEvent.ACTION_UP:
isIntercept = true;
break;
}
return isIntercept;
}
/*
* 在该方法中进行滑动的处理,这里有四种情况
**/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
//条件判断,当小于最小滑动距离就不做处理
float hasScroll = touchFistTime - event.getRawY();
if (Math.abs(hasScroll) < mineScroll) break;
float scroll = getScrollY() + touchY - event.getRawY();
//该容器的滑动的数字不可能为负数,只可能在0-topBorder 之间
if (scroll < 0) {
scrollTo(0, 0);
//监听的回调
if (pageChangeListener != null) {
pageChangeListener.pageChange(0);
pageChangeListener.firstPageScrollChange(0);
}
//也不能超过最大边界
} else if (scroll > topBorder) {
scrollTo(0, topBorder);
//监听回调
if (pageChangeListener != null) {
pageChangeListener.pageChange(1);
pageChangeListener.secondPageScrollChange(1);
}
} else {
//这里就是正常范围了
scrollTo(0, (int) scroll);
if (firstState != UN_VISIABLE && pageChangeListener != null) {
pageChangeListener.pageChange(0);
pageChangeListener.firstPageScrollChange(Math.abs(event.getRawY() - touchFistTime) / (MIN_DISTANCE * 1.0));
}
if (secondState != UN_VISIABLE && pageChangeListener != null) {
pageChangeListener.pageChange(1);
pageChangeListener.secondPageScrollChange(Math.abs(event.getRawY() - touchFistTime) / (MIN_DISTANCE * 1.0));
}
}
touchY = event.getRawY();
break;
case MotionEvent.ACTION_UP:
if (sAnimator == null) return true;
if (firstState == BOTTOM) {
//这里滑动到第二页
if (touchFistTime - event.getRawY() > MIN_DISTANCE) {
sAnimator.setDuration(LONG_TIME);
sAnimator.setIntValues(getScrollY(), topBorder);
sAnimator.start();
} else {
//这里回弹到第一页
sAnimator.setIntValues(getScrollY(), 0);
sAnimator.setDuration(SHORT_TIME);
sAnimator.start();
}
}
if (secondState == TOP) {
//这里滑动到第一页
if (event.getRawY() - touchFistTime > MIN_DISTANCE) {
sAnimator.setIntValues(getScrollY(), 0);
sAnimator.setDuration(LONG_TIME);
sAnimator.start();
} else {
//这里回弹到第二页
sAnimator.setIntValues(getScrollY(), topBorder);
sAnimator.start();
sAnimator.setDuration(SHORT_TIME);
}
}
break;
}
return true;
}
//当动画完成后就要,改变各个ScrollView的状态。
@Override
public void onAnimationEnd(Animator animation) {
if (firstState == BOTTOM && getScrollY() == topBorder) {
firstState = UN_VISIABLE;
secondState = TOP;
if (pageChangeListener != null) {
pageChangeListener.pageChange(1);
}
}
if (firstState == BOTTOM && getScrollY() == 0) {
firstState = BOTTOM;
secondState = UN_VISIABLE;
if (pageChangeListener != null) {
pageChangeListener.pageChange(0);
}
}
if (secondState == TOP && getScrollY() == topBorder) {
firstState = UN_VISIABLE;
secondState = TOP;
if (pageChangeListener != null) {
pageChangeListener.pageChange(1);
}
}
if (secondState == TOP && getScrollY() == 0) {
firstState = BOTTOM;
secondState = UN_VISIABLE;
if (pageChangeListener != null) {
pageChangeListener.pageChange(0);
}
}
invalidate();
requestLayout();
}
好了,就这两步就完成了,这种分页的效果,是不是很简单,很优雅呢。