上一章墨香带你学Launcher之（四）-应用安装、更新、卸载时的数据加载介绍了应用的安装、更新、卸载时的数据加载和图标绘制流程，本章我们来介绍承载图标、小部件等的Workspace的布局和滑动操作。
在第一章墨香带你学Launcher之（一）--概述中我们讲过Workspace包含多个CellLayout，每个CellLayout是一个页面，多个CellLayout可以通过滑动切换，这样就可以找到不同的图标，那么Workspace中的CellLayout是如何布局到Workspace中的，Workspace中滑动又是如何处理的，我们按照这两个步骤进行分析。
1.Workspace布局：
首先我们先看一下Workspace的继承逻辑：
launcher01.png
Workspace继承PagedView，而PagedView又继承ViewGroup，由名字我们可以猜出，PagedView是分页的自定义View，谈到自定义View，我们应该比较熟悉自定义View的原理，此处不再详细讲解，不熟的可以看看我的这篇博客中的详解Android知识梳理。我们直接看Workspace是如何布局的，其实，workspace的布局是在PagedView里面处理的，首先是onMeasure方法，我们看下源码：
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 如果没有子View则按照父类的尺寸进行测量
if (getChildCount() == 0) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
return;
}
// We measure the dimensions of the PagedView to be larger than the pages so that when we
// zoom out (and scale down), the view is still contained in the parent
//上面这句话是说我们在测量尺寸时要比我们正常状态下的尺寸要大，为什么要
//大，我们在第一章概述中讲过，当你长按桌面时，桌面的workspace会缩小，
//此时弹出菜单，CellLayout缩小，然后你可以拖动CellLayout改变顺序，
//如果你没有放大PagedView的尺寸，你在缩小时，在整个屏幕上的
//workspace就不会沾满整个屏幕，导致你拖动困难。
...
//这里将最大尺寸放大了两倍
int parentWidthSize = (int) (2f * maxSize);
int parentHeightSize = (int) (2f * maxSize);
int scaledWidthSize, scaledHeightSize;
...
mViewport.set(0, 0, widthSize, heightSize);
...
setMeasuredDimension(scaledWidthSize, scaledHeightSize);
}
需要注意的地方已经在上面代码注释了，省略的代码是找到测量尺寸和测量模式，最后将相应的尺寸和模式放置到父View和子View中。
测量完成后就开始布局，也就是回调onLayout函数：
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
if (getChildCount() == 0) {
return;
}
...
// 此处用到一个mIsRtl,这个是判断手机布局是从左到右还是从右到左，我们正常的习惯
// 是从左到右，一些国家，比如阿拉伯语情况下是从右到左，因此此处要进行处理。
final int startIndex = mIsRtl ? childCount - 1 : 0;
final int endIndex = mIsRtl ? -1 : childCount;
final int delta = mIsRtl ? -1 : 1;
...
for (int i = startIndex; i != endIndex; i += delta) {
final View child = getPageAt(i);
if (child.getVisibility() != View.GONE) {
lp = (LayoutParams) child.getLayoutParams();
int childTop;
if (lp.isFullScreenPage) {
childTop = offsetY;
} else {
childTop = offsetY + getPaddingTop() + mInsets.top;
if (mCenterPagesVertically) {
childTop += (getViewportHeight() - mInsets.top - mInsets.bottom - verticalPadding - child.getMeasuredHeight()) / 2;
}
}
final int childWidth = child.getMeasuredWidth();
final int childHeight = child.getMeasuredHeight();
child.layout(childLeft, childTop,
childLeft + child.getMeasuredWidth(), childTop + childHeight);
...
childLeft += childWidth + pageGap + getChildGap();
}
}
...
}
上面代码是个for循环，就是从第一个CellLayout到最后一个进行设置位置参数，然后进行布局，Workspace是横向滑动的，因此布局时，所有的CellLayout的顶部和底部距离是一样的，只是要考虑顶部状态栏的高度，横向上，从第一个开始由左向右或者由右向左进行排布即可，（由左向右举例：）也就是固定第一个CellLayout后调整左边距的位置即可，每增加一个CellLayout，后一个的左侧到Workspace左侧边距就增加一个CellLayout的作站用的宽度，依次类推，就可以将所有CellLayout布局完成。这段代码并不难，主要是自定义View的知识。
2.Workspace滑动：
workspace滑动就是onTouchEvent事件，关键代码也在这个方法里面，workspace继承PagedView，因此他的onTouchEvent事件是在PagedView中实现的，我们看一下代码：
public boolean onTouchEvent(MotionEvent ev) {
super.onTouchEvent(ev);
// Skip touch handling if there are no pages to swipe
if (getChildCount() <= 0) return super.onTouchEvent(ev);
acquireVelocityTrackerAndAddMovement(ev);
final int action = ev.getAction();
switch (action & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
...
if (mTouchState == TOUCH_STATE_SCROLLING) {
...
}
break;
case MotionEvent.ACTION_MOVE:
if (mTouchState == TOUCH_STATE_SCROLLING) {//滚动
...
} else if (mTouchState == TOUCH_STATE_REORDERING) {//拖动重新排序
...
} else {
determineScrollingStart(ev);
}
break;
case MotionEvent.ACTION_UP:
if (mTouchState == TOUCH_STATE_SCROLLING) {
...
} else if (mTouchState == TOUCH_STATE_PREV_PAGE) {
...
} else if (mTouchState == TOUCH_STATE_NEXT_PAGE) {
...
} else if (mTouchState == TOUCH_STATE_REORDERING) {
...
} else {
...
}
...
break;
case MotionEvent.ACTION_CANCEL:
...
break;
case MotionEvent.ACTION_POINTER_UP:
...
break;
}
return true;
}
上面代码只是一个onTouchEvent事件的一个框架，在这个框架中有完整的ACTION_DOWN、ACTION_MOVE、ACTION_UP事件，每个事件中都有一个mTouchState的判断，我们看一下，mTouchState有五种状态：
protected final static int TOUCH_STATE_REST = 0;
protected final static int TOUCH_STATE_SCROLLING = 1;
protected final static int TOUCH_STATE_PREV_PAGE = 2;
protected final static int TOUCH_STATE_NEXT_PAGE = 3;
protected final static int TOUCH_STATE_REORDERING = 4;
第一个是初始状态，第二个是滚动状态，第三个是向前翻页状态，第四个是向后翻页状态，最后一个是排序状态，前四个都好理解，那么最后一个是怎么回事呢？我们知道，在长按桌面的情况下，workspace缩小，此时你可以长按CellLayout拖动进行排序，因此出现了这个排序状态，如果只是滑动，则为滚动状态。
（一）ACTION_DOWN事件：
if (!mScroller.isFinished()) {
abortScrollerAnimation(false);
}
// Remember where the motion event started
mDownMotionX = mLastMotionX = ev.getX();
mDownMotionY = mLastMotionY = ev.getY();
mDownScrollX = getScrollX();
float[] p = mapPointFromViewToParent(this, mLastMotionX, mLastMotionY);
mParentDownMotionX = p[0];
mParentDownMotionY = p[1];
mLastMotionXRemainder = 0;
mTotalMotionX = 0;
mActivePointerId = ev.getPointerId(0);
if (mTouchState == TOUCH_STATE_SCROLLING) {
onScrollInteractionBegin();
pageBeginMoving();
}
触摸事件的起始事件，首先判断如果桌面滑动过程还没有完成，则终止滑动动画（abortScrollerAnimation），然后记录起始x、y的坐标位置，如果是滚动状态，则调用开始滚动方法，onScrollInteractionBegin和pageBeginMoving方法为空方法，你可以做一些准备工作。这个事件主要是记录起始位置。
（二）ACTION_MOVE事件，在这个事件中，分为三种状态：
（1）TOUCH_STATE_SCROLLING状态：
// Scroll to follow the motion event
final int pointerIndex = ev.findPointerIndex(mActivePointerId);
if (pointerIndex == -1) return true;
final float x = ev.getX(pointerIndex);
final float deltaX = mLastMotionX + mLastMotionXRemainder - x;
mTotalMotionX += Math.abs(deltaX);
if (Math.abs(deltaX) >= 1.0f) {
mTouchX += deltaX;
mSmoothingTime = System.nanoTime() / NANOTIME_DIV;
scrollBy((int) deltaX, 0);
mLastMotionX = x;
mLastMotionXRemainder = deltaX - (int) deltaX;
} else {
awakenScrollBars();
}
在这段代码中，首先获取有效手指的Index，然后获取有效手指的x坐标位置，因为是横向滑动，所以只需要x坐标即可，根据位置计算滑动距离，然后根据滑动距离调用scrollBy方法滑动workspace，这个方法，我们下面再看。
（2）TOUCH_STATE_REORDERING（排序）事件：
// 记录移动过程中的位置
mLastMotionX = ev.getX();
mLastMotionY = ev.getY();
...
// 更新你正在拖动排序的View的位置
updateDragViewTranslationDuringDrag();
// 查找距离手指最近的CellLayout的Index
final int dragViewIndex = indexOfChild(mDragView);
//查找手指移动到的位置所在的CellLayoutIndex,这个CellLayout是拖动过程中手指到达的位置处的CellLayout，没用动的
final int pageUnderPointIndex = getNearestHoverOverPageIndex();
if (pageUnderPointIndex > -1 && pageUnderPointIndex != indexOfChild(mDragView)) {
...
if (mTempVisiblePagesRange[0] <= pageUnderPointIndex &&
pageUnderPointIndex <= mTempVisiblePagesRange[1] &&
pageUnderPointIndex != mSidePageHoverIndex && mScroller.isFinished()) {
mSidePageHoverIndex = pageUnderPointIndex;
mSidePageHoverRunnable = new Runnable() {
@Override
public void run() {
// 在交换位置前先滑动到手指所在的那个CellLayout位置
snapToPage(pageUnderPointIndex);
// 获取CellLayout的变化值，如果拖动的view的index小于手指位置处未动的view的index，则需要-1，也就是向前移动，反之向后移动，index+1
int shiftDelta = (dragViewIndex < pageUnderPointIndex) ? -1 : 1;
int lowerIndex = (dragViewIndex < pageUnderPointIndex) ?
dragViewIndex + 1 : pageUnderPointIndex;
int upperIndex = (dragViewIndex > pageUnderPointIndex) ?
dragViewIndex - 1 : pageUnderPointIndex;
for (int i = lowerIndex; i <= upperIndex; ++i) {
View v = getChildAt(i);
int oldX = getViewportOffsetX() + getChildOffset(i);
int newX = getViewportOffsetX() + getChildOffset(i + shiftDelta);
v.setTranslationX(oldX - newX);
...
}
//移除拖动的View
removeView(mDragView);
//添加被拖动view到新的位置
addView(mDragView, pageUnderPointIndex);
mSidePageHoverIndex = -1;
if (mPageIndicator != null) {
mPageIndicator.setActiveMarker(getNextPage());
}
}
};
postDelayed(mSidePageHoverRunnable, REORDERING_SIDE_PAGE_HOVER_TIMEOUT);
}
} else {
...
}
shiftDelta, lowerIndex, upperIndex这三个值就是确定交换的位置，也就是如果从前向后拖动CellLayout，那么被拖动的Index要变大，反之变小，后两个参数来计算拖动CellLayout的跨度，如果向后拖动，那么中间被跨过的几个Celllayout就要顺序向前移动，反之向后移动，上面for循环就是移动的过程。
（三）ACTION_UP事件，这个事件中分为五种情况：
（1）TOUCH_STATE_SCROLLING事件：
...
//是否是有效事件，也就是滑动位置是否超过了pagedView的40%，
boolean isSignificantMove = Math.abs(deltaX) > pageWidth *
SIGNIFICANT_MOVE_THRESHOLD;
boolean isFling = mTotalMotionX > MIN_LENGTH_FOR_FLING &&
Math.abs(velocityX) > mFlingThresholdVelocity;
if (!mFreeScroll) {
boolean returnToOriginalPage = false;
if (Math.abs(deltaX) > pageWidth * RETURN_TO_ORIGINAL_PAGE_THRESHOLD &&
Math.signum(velocityX) != Math.signum(deltaX) && isFling) {
returnToOriginalPage = true;
}
...
if (((isSignificantMove && !isDeltaXLeft && !isFling) ||
(isFling && !isVelocityXLeft)) && mCurrentPage > 0) {
inalPage = returnToOriginalPage ? mCurrentPage : mCurrentPage - 1;
snapToPageWithVelocity(finalPage, velocityX);
} else if (((isSignificantMove && isDeltaXLeft && !isFling) ||
(isFling && isVelocityXLeft)) &&
mCurrentPage < getChildCount() - 1) {
finalPage = returnToOriginalPage ? mCurrentPage : mCurrentPage + 1;
snapToPageWithVelocity(finalPage, velocityX);
} else {
snapToDestination();
}
} else {
...
mScroller.fling(initialScrollX,
getScrollY(), vX, 0, Integer.MIN_VALUE, Integer.MAX_VALUE, 0, 0);
invalidate();
}
onScrollInteractionEnd();
此处判断比较多，我解释一下，我们在左右滑动时，有个有效值，也就是手指滑动距离超过了该值，则认为是有效的，到你超过这个值然后抬起手指，则认为你滑动了一屏，剩下的距离根据惯性自动完成，如果你滑动没有超过这个值，则认为你切换屏幕是无效的，抬起手指后屏幕会返回到初始的屏幕位置。
（2）TOUCH_STATE_PREV_PAGE事件：
如果不是第一屏，滑动到前一屏，代码很简单，不再贴代码
（3）TOUCH_STATE_NEXT_PAGE事件：
如果不是最后一屏，滑动到下一屏
（4）TOUCH_STATE_REORDERING：
排序，也就是调用updateDragViewTranslationDuringDrag方法，移动拖拽的View到相应的位置。
（四）滑动方法：
（1）scrollBy方法：这个方法其实很简单最终调用的是scrollTo方法，也就是移动到相应的位置，最后调用View的scrollTo方法；
（2）snapToPage方法：这个方法最终调用mScroller.startScroll(),计算出最终位置，然后滑动到相应位置即可。
最后
Github地址：https://github.com/yuchuangu85/Launcher3_mx
微信公众账号：Code-MX
注：本文原创，转载请注明出处，多谢。
网友评论