学步园

今天第三篇，模仿UCWEB的首页，做一个可以左右滑动的双屏。

其实要实现这个效果在Android中并非难事，因为官方的Launcher已经有现成的源代码放在那儿了，就是那个Workspace.java。大家可以去http://android.git.kernel.org/ 下载。

而我们要做的事情就是分析它并精简它（毕竟我们只是打算左右滑动罢了，并不需要能创建快捷方式文件夹之类的东西，更不需要在上面拖放图标）。

public class Workspace extends ViewGroup<br /> implements DropTarget, DragSource, DragScroller {</p> <p>}</p> <p>

因此，不管是Drop还是Drag，统统不需要了：

public class Workspace extends ViewGroup {</p> <p>}</p> <p>

同时，把那些个接口所要求实现的方法，以及那些与Drag/Drop相关的成员变量都去掉吧。
看看我精简后剩下什么成员变量：

private static final int INVALID_SCREEN = -1;</p> <p> private int mDefaultScreen;</p> <p> private boolean mFirstLayout = true;</p> <p> private int mCurrentScreen;<br /> private int mNextScreen = INVALID_SCREEN;<br /> private Scroller mScroller;</p> <p> private float mLastMotionX;<br /> private float mLastMotionY;</p> <p> private final static int TOUCH_STATE_REST = 0;<br /> private final static int TOUCH_STATE_SCROLLING = 1;</p> <p> private int mTouchState = TOUCH_STATE_REST;</p> <p> private int mTouchSlop;</p> <p>

以上足矣。

然后在Eclipse中会有大量的错误，没关系，删吧。

addView 是用来在代码中添加新的子view的方法，不需要，我们只需要在layout xml中直接指定就好了。
getOpenFolder/getOpenFolders 文件夹相关的，当然不需要了。
addInCurrentScreen/addWidget 都没什么用处了，可以删掉。
与Cell相关的那些也可以删掉。

因为我们的代码不能直接访问mScrollX，所以需要换成getScrollX()。这一点是需要特别注意的。

看看我精简后都剩下些什么方法：

最后只要不报错，就OK了。

我们来分析一下几个关键的方法，其一是 onTouchEvent:

@Override<br /> public boolean onTouchEvent(MotionEvent ev) {</p> <p> final int action = ev.getAction();<br /> final float x = ev.getX();</p> <p> switch (action) {<br /> case MotionEvent.ACTION_DOWN:</p> <p> if (!mScroller.isFinished()) {<br /> mScroller.abortAnimation();<br /> }</p> <p> // Remember where the motion event started<br /> mLastMotionX = x;<br /> break;<br /> case MotionEvent.ACTION_MOVE:<br /> //跟着手指拖动屏幕的处理。<br /> if (mTouchState == TOUCH_STATE_SCROLLING) {<br /> // Scroll to follow the motion event<br /> final int deltaX = (int) (mLastMotionX - x);<br /> mLastMotionX = x;</p> <p> if (deltaX < 0) {<br /> if (getScrollX() > 0) {<br /> scrollBy(Math.max(-1*getScrollX(), deltaX), 0);<br /> }<br /> } else if (deltaX > 0) {<br /> final int availableToScroll = getChildAt(getChildCount() - 1).getRight() -<br /> getScrollX() - getWidth();<br /> if (availableToScroll > 0) {<br /> scrollBy(Math.min(availableToScroll, deltaX), 0);<br /> }<br /> }<br /> }<br /> break;<br /> case MotionEvent.ACTION_UP:<br /> //抬起手指后，切换屏幕的处理<br /> if (mTouchState == TOUCH_STATE_SCROLLING) {<br /> snapToDestination();<br /> }<br /> mTouchState = TOUCH_STATE_REST;<br /> break;<br /> case MotionEvent.ACTION_CANCEL:<br /> mTouchState = TOUCH_STATE_REST;<br /> }</p> <p> return true;<br /> }</p> <p>

其二 snapToDestination和snapToScreen:

private void snapToDestination() {<br /> //计算应该去哪个屏<br /> final int screenWidth = getWidth();<br /> final int whichScreen = (getScrollX() + (screenWidth / 2)) / screenWidth;<br /> //切换<br /> snapToScreen(whichScreen);<br /> }</p> <p> void snapToScreen(int whichScreen) {<br /> if (!mScroller.isFinished()) return;</p> <p> whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));<br /> boolean changingScreens = whichScreen != mCurrentScreen;</p> <p> mNextScreen = whichScreen;</p> <p> View focusedChild = getFocusedChild();<br /> if (focusedChild != null && changingScreens && focusedChild == getChildAt(mCurrentScreen)) {<br /> focusedChild.clearFocus();<br /> }</p> <p> //让mScroller启动滚动<br /> final int cx = getScrollX();<br /> final int newX = whichScreen * getWidth();<br /> final int delta = newX - cx;<br /> mScroller.startScroll(cx, 0, delta, 0, Math.abs(delta) * 4);<br /> invalidate();<br /> }</p> <p>

其三 computeScroll，让Workspace滚动到合适的位置:

@Override<br /> public void computeScroll() {<br /> if (mScroller.computeScrollOffset()) {<br /> scrollTo(mScroller.getCurrX(),mScroller.getCurrY());<br /> postInvalidate();<br /> } else if (mNextScreen != INVALID_SCREEN) {<br /> mCurrentScreen = Math.max(0, Math.min(mNextScreen, getChildCount() - 1));<br /> mNextScreen = INVALID_SCREEN;<br /> }</p> <p> }</p> <p>

基本上就是这些了，其它方法都是辅助的，很好理解。

其实有一个问题，我们发现UCWeb主页下面有三个点指示当前所处的位置，这个指示器我的想法是可以放在Workspace外面来做，利用Workspace当前的mCurrentScreen值显示出当前正处于哪个屏。

给出我的layout xml描述：

<cn.sharetop.demo.ui.Workspace<br /> android:id="@id/friends_switcher"<br /> android:layout_width="fill_parent"<br /> android:layout_height="640.0dip"<br /> android:layout_weight="1.0"<br /> xmessenger:defaultScreen="0"<br /> ><br /> <include layout="@layout/screen1" /><br /> <include layout="@layout/screen2" /></p> <p> </cn.sharetop.demo.ui.Workspace><br /> <TextView<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:textColor="#000000"<br /> android:background="@android:color/transparent"<br /> android:gravity="center"<br /> android:text="[1]2" /></p> <p>

就这样了。这个分页指示器就留给你自己去发挥了。