Android实现多页左右滑动效果，支持子view动态创建和cache

要实现多页滑动效果，主要是需要处理onTouchEvent和onInterceptTouchEvent，要处理好touch事件的子控件和父控件的传递问题。

滚动控制可以利用android的Scroller来实现。

 

这里提供两种做法：

1、自定义MFlipper控件，从ViewGroup继承，利用Scroller实现滚动，重点是onTouchEvent和onInterceptTouchEvent的重写，

要注意什么时候该返回true，什么时候false。否则会导致界面滑动和界面内按钮点击事件相冲突。

由于采用了ViewGroup来管理子view，只适合于页面数较少而且较固定的情况，因为viewgroup需要一开始就调用addView，把所有view都加进去并layout，

太多页面会有内存问题。如果是页面很多，而且随时动态增长的话，就需要考虑对view做cache和动态创建，动态layout，具体做法参考下面的方法二;

 

2、从AdapterView继承，参考Android自带ListView的实现，实现子view动态创建和cache，滑动效果等。

源码如下：

 

import android.content.Context;

import android.util.AttributeSet;

import android.util.Log;

import android.util.SparseArray;

import android.view.MotionEvent;

import android.view.VelocityTracker;

import android.view.View;

import android.view.ViewConfiguration;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.Scroller;

/**

 * 自定义一个横向滚动的AdapterView，类似与全屏的Gallery，但是一次只滚动一屏，而且每一屏支持子view的点击处理

 * @author weibinke

 *

 */

public class MultiPageSwitcher extends AdapterView<BaseAdapter> {

private BaseAdapter mAdapter = null;

private Scroller mScroller;

private int mTouchSlop;

private float mTouchStartX;

private float mLastMotionX;

private final static String TAG = "MultiPageSwitcher";

private int mLastScrolledOffset = 0;

/** User is not touching the list */

    private static final int TOUCH_STATE_RESTING = 0;

    /** User is scrolling the list */

private static final int TOUCH_STATE_SCROLL = 2;

private int mTouchState = TOUCH_STATE_RESTING;

private int mHeightMeasureSpec;

private int mWidthMeasureSpec;

private int mSelectedPosition;

private int mFirstPosition;                                //第一个可见view的position

private int mCurrentSelectedPosition;

private VelocityTracker mVelocityTracker;

private static final int SNAP_VELOCITY = 600;

protected RecycleBin mRecycler = new RecycleBin();

private OnPostionChangeListener mOnPostionChangeListener = null;

public MultiPageSwitcher(Context context, AttributeSet attrs) {

super(context, attrs);

mScroller = new Scroller(context);

mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();

}

@Override

protected void onLayout(boolean changed, int left, int top, int right,

int bottom) {

// TODO Auto-generated method stub

MLog.d("MultiPageSwitcher.onlayout start");

super.onLayout(changed, left, top, right, bottom);

if (mAdapter == null) {

return ;

}

recycleAllViews();

detachAllViewsFromParent();

mRecycler.clear();

fillAllViews();

MLog.d("MultiPageSwitcher.onlayout end");

}

/**

 * 从当前可见的view向左边填充

 */

private void fillToGalleryLeft() {

        int itemSpacing = 0;

        int galleryLeft = 0;

        // Set state for initial iteration

        View prevIterationView = getChildAt(0);

        int curPosition;

        int curRightEdge;

        if (prevIterationView != null) {
            curPosition = mFirstPosition - 1;
            curRightEdge = prevIterationView.getLeft() - itemSpacing;
        } else {
            // No children available!
            curPosition = 0;
            curRightEdge = getRight() - getLeft();
        }

        while (curRightEdge > galleryLeft && curPosition >= 0) {

            prevIterationView = makeAndAddView(curPosition, curPosition - mSelectedPosition,

                    curRightEdge, false);

            // Remember some state

            mFirstPosition = curPosition;

            // Set state for next iteration

            curRightEdge = prevIterationView.getLeft() - itemSpacing;

            curPosition--;

        }

    }

    private void fillToGalleryRight() {

        int itemSpacing = 0;

        int galleryRight = getRight() - getLeft();

        int numChildren = getChildCount();

        int numItems = mAdapter.getCount();

        // Set state for initial iteration

        View prevIterationView = getChildAt(numChildren - 1);

        int curPosition;

        int curLeftEdge;

        if (prevIterationView != null) {

            curPosition = mFirstPosition + numChildren;

            curLeftEdge = prevIterationView.getRight() + itemSpacing;

        } else {

            mFirstPosition = curPosition = numItems - 1;

            curLeftEdge = 0;

        }

        while (curLeftEdge < galleryRight && curPosition < numItems) {

            prevIterationView = makeAndAddView(curPosition, curPosition - mSelectedPosition,

                    curLeftEdge, true);

            // Set state for next iteration

            curLeftEdge = prevIterationView.getRight() + itemSpacing;

            curPosition++;

        }

    }

/**

 *填充view

 */

private void fillAllViews(){

//先创建第一个view，使其居中显示

if (mSelectedPosition >= mAdapter.getCount()&& mSelectedPosition > 0) {

//处理被记录被删除导致当前选中位置超出记录数的情况

mSelectedPosition = mAdapter.getCount() - 1;

if(mOnPostionChangeListener != null){

mCurrentSelectedPosition = mSelectedPosition;

mOnPostionChangeListener.onPostionChange(this, mCurrentSelectedPosition);

}

}



mFirstPosition = mSelectedPosition;

mCurrentSelectedPosition = mSelectedPosition;



View child = makeAndAddView(mSelectedPosition, 0, 0, true);

int offset = getWidth() / 2 - (child.getLeft() + child.getWidth() / 2);

child.offsetLeftAndRight(offset);

fillToGalleryLeft();

fillToGalleryRight();
}

/**

     * Obtain a view, either by pulling an existing view from the recycler or by

     * getting a new one from the adapter. If we are animating, make sure there

     * is enough information in the view's layout parameters to animate from the

     * old to new positions.

     *

     * @param position Position in the gallery for the view to obtain

     * @param offset Offset from the selected position

     * @param x X-coordintate indicating where this view should be placed. This

     *        will either be the left or right edge of the view, depending on

     *        the fromLeft paramter

     * @param fromLeft Are we posiitoning views based on the left edge? (i.e.,

     *        building from left to right)?

     * @return A view that has been added to the gallery

     */

    private View makeAndAddView(int position, int offset, int x,

            boolean fromLeft) {

        View child;

        //ask the adapter for a view

        child = mAdapter.getView(position, null, this);

        // Position the view

        setUpChild(child, offset, x, fromLeft);

        return child;

    }

    @Override

    protected ViewGroup.LayoutParams generateDefaultLayoutParams() {

        /*

         * Gallery expects Gallery.LayoutParams.

         */

        return new Gallery.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

                ViewGroup.LayoutParams.WRAP_CONTENT);

    }

    /**

     * Helper for makeAndAddView to set the position of a view and fill out its

     * layout paramters.

     *

     * @param child The view to position

     * @param offset Offset from the selected position

     * @param x X-coordintate indicating where this view should be placed. This

     *        will either be the left or right edge of the view, depending on

     *        the fromLeft paramter

     * @param fromLeft Are we posiitoning views based on the left edge? (i.e.,

     *        building from left to right)?

     */

    private void setUpChild(View child, int offset, int x, boolean fromLeft) {

        // Respect layout params that are already in the view. Otherwise

        // make some up...

        Gallery.LayoutParams lp = (Gallery.LayoutParams)

            child.getLayoutParams();

        if (lp == null) {

            lp = (Gallery.LayoutParams) generateDefaultLayoutParams();

        }

        addViewInLayout(child, fromLeft ? -1 : 0, lp);

        child.setSelected(offset == 0);

        // Get measure specs

        int childHeightSpec = ViewGroup.getChildMeasureSpec(mHeightMeasureSpec,

                0, lp.height);

        int childWidthSpec = ViewGroup.getChildMeasureSpec(mWidthMeasureSpec,

                0, lp.width);

        // Measure child

        child.measure(childWidthSpec, childHeightSpec);

        int childLeft;

        int childRight;

        // Position vertically based on gravity setting

        int childTop = 0;

        int childBottom = childTop + child.getMeasuredHeight();

        int width = child.getMeasuredWidth();

        if (fromLeft) {

            childLeft = x;

            childRight = childLeft + width;

        } else {

            childLeft = x - width;

            childRight = x;

        }

        child.layout(childLeft, childTop, childRight, childBottom);

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

            // TODO Auto-generated method stub

            super.onMeasure(widthMeasureSpec, heightMeasureSpec);

            mWidthMeasureSpec = widthMeasureSpec;

            mHeightMeasureSpec = heightMeasureSpec;

    }

    @Override

    public int getCount() {

            // TODO Auto-generated method stub

            return mAdapter.getCount();

    }

@Override

public BaseAdapter getAdapter() {

// TODO Auto-generated method stub

return mAdapter;

}



@Override

public void setAdapter(BaseAdapter adapter) {

// TODO Auto-generated method stub

mAdapter = adapter;

removeAllViewsInLayout();

requestLayout();

}

@Override

public View getSelectedView() {

// TODO Auto-generated method stub

return null;

}



@Override

public void setSelection(int position) {

// TODO Auto-generated method stub

}

@Override

public boolean onInterceptTouchEvent(MotionEvent event) {

if (!mScroller.isFinished()) {

return true;

}

final int action = event.getAction();

MLog.d("onInterceptTouchEvent action = "+event.getAction());

if (MotionEvent.ACTION_DOWN == action) {

startTouch(event);

return false;

}else if (MotionEvent.ACTION_MOVE == action) {

return startScrollIfNeeded(event);

}else if (MotionEvent.ACTION_UP == action || MotionEvent.ACTION_CANCEL == action) {

mTouchState = TOUCH_STATE_RESTING;

return false;

}

return false;

}

@Override

public boolean onTouchEvent(MotionEvent event) {

if (!mScroller.isFinished()) {

return true;

}

if (mVelocityTracker == null) {

mVelocityTracker = VelocityTracker.obtain();

}

mVelocityTracker.addMovement(event);

MLog.d("onTouchEvent action = "+event.getAction());

final int action = event.getAction();

final float x = event.getX();

if (MotionEvent.ACTION_DOWN == action) {

startTouch(event);

}else if (MotionEvent.ACTION_MOVE == action) {

if (mTouchState == TOUCH_STATE_RESTING) {

startScrollIfNeeded(event);

}else if (mTouchState == TOUCH_STATE_SCROLL) {

int deltaX = (int)(x - mLastMotionX);

mLastMotionX = x;

scrollDeltaX(deltaX);

}

}else if (MotionEvent.ACTION_UP == action || MotionEvent.ACTION_CANCEL == action) {

if (mTouchState == TOUCH_STATE_SCROLL) {

onUp(event);

}

}

return true;

}

private void scrollDeltaX(int deltaX){

//先把现有的view坐标移动

for (int i = 0; i < getChildCount(); i++) {

getChildAt(i).offsetLeftAndRight(deltaX);

}

boolean toLeft = (deltaX < 0);

detachOffScreenChildren(toLeft);

if (deltaX < 0) {

//sroll to right

fillToGalleryRight();

}else {

fillToGalleryLeft();

}

invalidate();

int position = calculteCenterItem() + mFirstPosition;

if (mCurrentSelectedPosition != position) {

mCurrentSelectedPosition = position;

if (mOnPostionChangeListener != null) {

mOnPostionChangeListener.onPostionChange(this, mCurrentSelectedPosition);

}

}

}

private void onUp(MotionEvent event){

final VelocityTracker velocityTracker = mVelocityTracker;

velocityTracker.computeCurrentVelocity(1000);

int velocityX = (int) velocityTracker.getXVelocity();

MLog.d( "onUp velocityX:"+velocityX);

if (velocityX < -SNAP_VELOCITY && mSelectedPosition < mAdapter.getCount() - 1) {

if (scrollToChild(mSelectedPosition + 1)) {

mSelectedPosition ++;

}

}else if (velocityX > SNAP_VELOCITY && mSelectedPosition > 0) {

if (scrollToChild(mSelectedPosition - 1)) {

mSelectedPosition --;

}

}else{

int position = calculteCenterItem();

int newpostion = mFirstPosition + position;

if (scrollToChild(newpostion)) {

mSelectedPosition = newpostion;

}

}

if (mVelocityTracker != null) {

            mVelocityTracker.recycle();

            mVelocityTracker = null;

        }

mTouchState = TOUCH_STATE_RESTING;

}

/**

 * 计算最接近中心点的view

 * @return

 */

private int calculteCenterItem(){

View child = null;

int lastpostion = 0;

int lastclosestDistance = 0;

int viewCenter = getLeft() + getWidth() / 2;

for (int i = 0; i < getChildCount(); i++) {

child = getChildAt(i);

if (child.getLeft() < viewCenter && child.getRight() > viewCenter ) {

lastpostion = i;

break;

}else {

int childClosestDistance = Math.min(Math.abs(child.getLeft() - viewCenter), Math.abs(child.getRight() - viewCenter));

if (childClosestDistance < lastclosestDistance) {

lastclosestDistance = childClosestDistance;

lastpostion = i;

}

}

}

return lastpostion;

}

public void moveNext(){

if (!mScroller.isFinished()) {

return;

}

if (0 <= mSelectedPosition && mSelectedPosition < mAdapter.getCount() - 1) {

if (scrollToChild(mSelectedPosition + 1)) {

mSelectedPosition ++;

}else {

makeAndAddView(mSelectedPosition + 1, 1, getWidth(), true);

if (scrollToChild(mSelectedPosition + 1)) {

mSelectedPosition ++;

}

}

}

}

public void movePrevious(){

if (!mScroller.isFinished()) {

return;

}

if (0 < mSelectedPosition && mSelectedPosition < mAdapter.getCount()) {

if (scrollToChild(mSelectedPosition -1)) {

mSelectedPosition --;

}else {

makeAndAddView(mSelectedPosition - 1, -1, 0, false);

mFirstPosition = mSelectedPosition - 1;

if (scrollToChild(mSelectedPosition - 1)) {

mSelectedPosition --;

}

}

}

}

private boolean scrollToChild(int position){

MLog.d( "scrollToChild positionm,FirstPosition,childcount:"+position + "," + mFirstPosition+ "," + getChildCount());

View child = getChildAt(position - mFirstPosition );

if (child != null) {

int distance = getWidth() / 2 - (child.getLeft() + child.getWidth() / 2);

mLastScrolledOffset = 0;

mScroller.startScroll(0, 0, distance, 0,200);

invalidate();

return true;

}

MLog.d( "scrollToChild some error happened");

return false;

}

@Override

public void computeScroll() {

if (mScroller.computeScrollOffset()) {

int scrollX = mScroller.getCurrX();

scrollDeltaX(scrollX - mLastScrolledOffset);

mLastScrolledOffset = scrollX;

postInvalidate();

}

}

private void startTouch(MotionEvent event){

mTouchStartX = event.getX();

mTouchState = mScroller.isFinished()? TOUCH_STATE_RESTING : TOUCH_STATE_SCROLL;

mLastMotionX = mTouchStartX;

}

private boolean startScrollIfNeeded(MotionEvent event){

final int xPos = (int)event.getX();

        mLastMotionX = event.getX();

        if (xPos < mTouchStartX - mTouchSlop

                || xPos > mTouchStartX + mTouchSlop

              ) {

            // we've moved far enough for this to be a scroll

            mTouchState = TOUCH_STATE_SCROLL;

            return true;

        }

        return false;

}

/**

     * Detaches children that are off the screen (i.e.: Gallery bounds).

     *

     * @param toLeft Whether to detach children to the left of the Gallery, or

     *            to the right.

     */

    private void detachOffScreenChildren(boolean toLeft) {

        int numChildren = getChildCount();

        int start = 0;

        int count = 0;

        int firstPosition = mFirstPosition;

        if (toLeft) {

            final int galleryLeft = 0;

            for (int i = 0; i < numChildren; i++) {

                final View child = getChildAt(i);

                if (child.getRight() >= galleryLeft) {

                    break;

                } else {

                    count++;

                    mRecycler.put(firstPosition + i, child);

                }

            }

        } else {

            final int galleryRight = getWidth();

            for (int i = numChildren - 1; i >= 0; i--) {

                final View child = getChildAt(i);

                if (child.getLeft() <= galleryRight) {

                    break;

                } else {

                    start = i;

                    count++;

                    mRecycler.put(firstPosition + i, child);

                }

            }

        }

        detachViewsFromParent(start, count);

        if (toLeft) {

            mFirstPosition += count;

        }

        mRecycler.clear();

    }

    public void setOnPositionChangeListen(OnPostionChangeListener onPostionChangeListener){

            mOnPostionChangeListener = onPostionChangeListener;

    }

    public int getCurrentSelectedPosition(){

            return mCurrentSelectedPosition;

    }

    /**

     * 刷新数据，本来想用AdapterView.AdapterDataSetObserver机制来实现的，但是整个逻辑移植比较麻烦，就暂时用这个替代了

     */

    public void updateData(){

            requestLayout();

    }

    private void recycleAllViews() {

        int childCount = getChildCount();

        final RecycleBin recycleBin = mRecycler;

        // All views go in recycler

        for (int i=0; i<childCount; i++) {

            View v = getChildAt(i);

            int index = mFirstPosition + i;

            recycleBin.put(index, v);

        }

    }

    class RecycleBin {

        private SparseArray<View> mScrapHeap = new SparseArray<View>();

        public void put(int position, View v) {

             if (mScrapHeap.get(position) != null) {

             Log.e(TAG,"RecycleBin put error.");

            }

            mScrapHeap.put(position, v);

        }

        View get(int position) {

            // System.out.print("Looking for " + position);

            View result = mScrapHeap.get(position);

            if (result != null) {

                    MLog.d("RecycleBin get hit.");

                mScrapHeap.delete(position);

            } else {

                    MLog.d("RecycleBin get Miss.");

            }

            return result;

        }

        View peek(int position) {

            // System.out.print("Looking for " + position);

            return mScrapHeap.get(position);

        }

        void clear() {

            final SparseArray<View> scrapHeap = mScrapHeap;

            final int count = scrapHeap.size();

            for (int i = 0; i < count; i++) {

                final View view = scrapHeap.valueAt(i);

                if (view != null) {

                    removeDetachedView(view, true);

                }

            }

            scrapHeap.clear();

        }

    }

    public interface OnPostionChangeListener{

            abstract public void onPostionChange(View v,int position);

    }

}