使用ViewPage實現類launcher屏幕滑動

http://blog.csdn.net/aomandeshangxiao/article/details/7395526

在去年11月份的時候，自己寫過一篇launcher左右滑動的源碼分析的文章，launcher修改--左右滑動屏幕切換源碼追蹤，今年1月份的時候，看到一份有意思的代碼，又簡單的解析了下代碼，寫成頁面滑動切換（類Launcher滑動屏幕實現），今天又看到一篇使用ViewPage來實現頁面滑動，感覺不錯，有需要這方面資料的大家可以看下：使用ViewPager實現高仿launcher拖動效果。只不過只提供了代碼，沒有多少分析，關於ViewPage的資料，大家可以百度下，

下面幾個資料，個人都感覺不錯：

ViewPager example -實現左右兩個屏幕的切換Android的 ViewPager 學習筆記，

viewpager循環拖動，

(android控件)ViewPager介紹和使用說明

，感興趣的童鞋都可以看下，另外，有兩篇word的文檔，大家也可以下下來看下：

http://download.csdn.net/detail/aomandeshangxiao/4173947

            祝大家快樂！他山之石可以攻玉，好好學習天天向上！

          網友下面留言給出一個官方更好的demo，大家可以去好好學習下：http://developer.android.com/reference/android/support/v4/view/ViewPager.html

頁面滑動切換（類Launcher滑動屏幕實現）

http://blog.csdn.net/aomandeshangxiao/article/details/7196921

   下面的這個例子也是從網上找來的，不是自己寫的，一直想學習下，但是一直沒有寫，以前也研究研究的是launcher的頁面跳轉，launcher修改--左右滑動屏幕切換源碼追蹤說實話，那個代碼有點複雜，所以理解的也不是很透徹。看到這個例子，比較簡單些，再這裏學習下：

       首先，看下效果圖吧：雖然很花哨，都是背景圖片。

       看下他的佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <com.genius.scroll.MyScrollLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/ScrollLayout"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
      <FrameLayout
        android:background="@drawable/guide01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
      </FrameLayout>
      <FrameLayout
        android:background="@drawable/guide02"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
      </FrameLayout>
      <FrameLayout
        android:background="@drawable/guide03"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
      </FrameLayout>
      <FrameLayout
        android:background="@drawable/guide04"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
      </FrameLayout>
      <FrameLayout
        android:background="@drawable/guide05"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
      </FrameLayout>
    </com.genius.scroll.MyScrollLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:id="@+id/llayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24.0dip"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <ImageView android:clickable="true"
            android:padding="15.0dip"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"
            android:padding="15.0dip"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"
            android:padding="15.0dip"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"
            android:padding="15.0dip"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/guide_round" />
        <ImageView android:clickable="true"
            android:padding="15.0dip"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/guide_round" />
    </LinearLayout>
</RelativeLayout>

        底部的LinearLayout是放了5個按鈕，上面使用到了一個自定義的控件：MyScrollLayout下面再看下這個自定義控件：裏面使用frameLayout放了5張圖片。

public class MyScrollLayout extends ViewGroup{

    private static final String TAG = "ScrollLayout";
    private VelocityTracker mVelocityTracker;           // 用於判斷甩動手勢
    private static final int SNAP_VELOCITY = 600;
    private Scroller  mScroller;                        // 滑動控制器
    private int mCurScreen;
    private int mDefaultScreen = 0;
    private float mLastMotionX;

    private OnViewChangeListener mOnViewChangeListener;
    public MyScrollLayout(Context context) {
        super(context);
        init(context);
    }
    public MyScrollLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    public MyScrollLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }
    private void init(Context context)
    {
        mCurScreen = mDefaultScreen;
        mScroller = new Scroller(context);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // TODO Auto-generated method stub
         if (changed) {
                int childLeft = 0;
                final int childCount = getChildCount();
                for (int i=0; i<childCount; i++) {
                    final View childView = getChildAt(i);
                    if (childView.getVisibility() != View.GONE) {
                        final int childWidth = childView.getMeasuredWidth();
                        childView.layout(childLeft, 0,
                                childLeft+childWidth, childView.getMeasuredHeight());
                        childLeft += childWidth;
                    }
                }
            }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        final int width = MeasureSpec.getSize(widthMeasureSpec);
        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
        }
        scrollTo(mCurScreen * width, 0);
    }

     public void snapToDestination() {
            final int screenWidth = getWidth();
            final int destScreen = (getScrollX()+ screenWidth/2)/screenWidth;
            snapToScreen(destScreen);
     }

     public void snapToScreen(int whichScreen) {
            // get the valid layout page
            whichScreen = Math.max(0, Math.min(whichScreen, getChildCount()-1));
            if (getScrollX() != (whichScreen*getWidth())) {
                final int delta = whichScreen*getWidth()-getScrollX();
                        mScroller.startScroll(getScrollX(), 0,
                        delta, 0, Math.abs(delta)*2);
                mCurScreen = whichScreen;
                invalidate();       // Redraw the layout
                if (mOnViewChangeListener != null)
                {
                    mOnViewChangeListener.OnViewChange(mCurScreen);
                }
            }
        }

    @Override
    public void computeScroll() {
        // TODO Auto-generated method stub
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
            final int action = event.getAction();
            final float x = event.getX();
            final float y = event.getY();
            switch (action) {
            case MotionEvent.ACTION_DOWN:
                  Log.i("", "onTouchEvent  ACTION_DOWN");
                if (mVelocityTracker == null) {
                        mVelocityTracker = VelocityTracker.obtain();
                        mVelocityTracker.addMovement(event);
                }
                if (!mScroller.isFinished()){
                    mScroller.abortAnimation();
                }
                mLastMotionX = x;
                break;
            case MotionEvent.ACTION_MOVE:
               int deltaX = (int)(mLastMotionX - x);
               if (IsCanMove(deltaX)){
                 if (mVelocityTracker != null){
                        mVelocityTracker.addMovement(event);
                 }
                mLastMotionX = x;
                scrollBy(deltaX, 0);
               }
               break;
            case MotionEvent.ACTION_UP:
                int velocityX = 0;
                if (mVelocityTracker != null){
                    mVelocityTracker.addMovement(event);
                    mVelocityTracker.computeCurrentVelocity(1000);
                    velocityX = (int) mVelocityTracker.getXVelocity();
                }
                if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {
                    Log.e(TAG, "snap left");
                    snapToScreen(mCurScreen - 1);
                } else if (velocityX < -SNAP_VELOCITY
                        && mCurScreen < getChildCount() - 1) {
                    Log.e(TAG, "snap right");
                    snapToScreen(mCurScreen + 1);
                } else {
                    snapToDestination();
                }
                if (mVelocityTracker != null) {
                    mVelocityTracker.recycle();
                    mVelocityTracker = null;
                }
                break;
            }
            return true;
    }

    private boolean IsCanMove(int deltaX)
    {
        if (getScrollX() <= 0 && deltaX < 0 ){
            return false;
        }
        if  (getScrollX() >=  (getChildCount() - 1) * getWidth() && deltaX > 0){
            return false;
        }
        return true;
    }

    public void SetOnViewChangeListener(OnViewChangeListener listener)
    {
        mOnViewChangeListener = listener;
    }
}

首先注意，他繼承了ViewGroup類，在這裏面主要重寫了onMeasure()、onTouchEvent()等方法，在這裏使用了一個自定義的接口private OnViewChangeListener mOnViewChangeListener。看下它的定義：

public interface OnViewChangeListener {
    public void OnViewChange(int view);
}

這個接口裏之定義了一個回調方法：OnViewChange()這個方法的具體實現，是在主Activity中：

public class SwitchViewDemoActivity extends Activity implements OnViewChangeListener, OnClickListener{
    /** Called when the activity is first created. */

    private MyScrollLayout mScrollLayout;
    private ImageView[] mImageViews;
    private int mViewCount;
    private int mCurSel;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        init();
    }

    private void init()
    {
        mScrollLayout = (MyScrollLayout) findViewById(R.id.ScrollLayout);
        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.llayout);
        mViewCount = mScrollLayout.getChildCount();
        mImageViews = new ImageView[mViewCount];
        for(int i = 0; i < mViewCount; i++)      {
            mImageViews[i] = (ImageView) linearLayout.getChildAt(i);
            mImageViews[i].setEnabled(true);
            mImageViews[i].setOnClickListener(this);
            mImageViews[i].setTag(i);
        }
        mCurSel = 0;
        mImageViews[mCurSel].setEnabled(false);
        mScrollLayout.SetOnViewChangeListener(this);
    }

    private void setCurPoint(int index)
    {
        if (index < 0 || index > mViewCount - 1 || mCurSel == index)      {
            return ;
        }
        mImageViews[mCurSel].setEnabled(true);
        mImageViews[index].setEnabled(false);
        mCurSel = index;
    }

    @Override
    public void OnViewChange(int view) {
        // TODO Auto-generated method stub
        setCurPoint(view);
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        int pos = (Integer)(v.getTag());
        setCurPoint(pos);
        mScrollLayout.snapToScreen(pos);
    }
}

這個OnViewChange()方法，主要調用了setCurPoint()方法，就是完成界面的跳轉。在MyScrollLayout中的snapToScreen()方法中就是典型的回調方法：

public void snapToScreen(int whichScreen) {
            // get the valid layout page
            whichScreen = Math.max(0, Math.min(whichScreen, getChildCount()-1));
            if (getScrollX() != (whichScreen*getWidth())) {
                final int delta = whichScreen*getWidth()-getScrollX();
                        mScroller.startScroll(getScrollX(), 0,
                        delta, 0, Math.abs(delta)*2);
                mCurScreen = whichScreen;
                invalidate();       // Redraw the layout
                if (mOnViewChangeListener != null)
                {
                    mOnViewChangeListener.OnViewChange(mCurScreen);
                }
            }
        }

mOnViewChangeListener.OnViewChange(mCurScreen);

這句代碼就是典型的回調。

在MyScrollLayout的onTouchEvent()的方法裏面是對觸屏事件做出的響應：

final int action = event.getAction();
            final float x = event.getX();
            final float y = event.getY();
            switch (action) {
            case MotionEvent.ACTION_DOWN:
                  Log.i("", "onTouchEvent  ACTION_DOWN");
                if (mVelocityTracker == null) {
                        mVelocityTracker = VelocityTracker.obtain();
                        mVelocityTracker.addMovement(event);
                }
                if (!mScroller.isFinished()){
                    mScroller.abortAnimation();
                }
                mLastMotionX = x;
                break;
            case MotionEvent.ACTION_MOVE:
               int deltaX = (int)(mLastMotionX - x);
               if (IsCanMove(deltaX)){
                 if (mVelocityTracker != null){
                        mVelocityTracker.addMovement(event);
                 }
                mLastMotionX = x;
                scrollBy(deltaX, 0);
               }
               break;
            case MotionEvent.ACTION_UP:
                int velocityX = 0;
                if (mVelocityTracker != null){
                    mVelocityTracker.addMovement(event);
                    mVelocityTracker.computeCurrentVelocity(1000);
                    velocityX = (int) mVelocityTracker.getXVelocity();
                }
                if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {
                    Log.e(TAG, "snap left");
                    snapToScreen(mCurScreen - 1);
                } else if (velocityX < -SNAP_VELOCITY
                        && mCurScreen < getChildCount() - 1) {
                    Log.e(TAG, "snap right");
                    snapToScreen(mCurScreen + 1);
                } else {
                    snapToDestination();
                }
                if (mVelocityTracker != null) {
                    mVelocityTracker.recycle();
                    mVelocityTracker = null;
                }
                break;
            }

通過判斷移動距離和移動方向做出不同的響應。

其他的代碼都比較好懂了，有什麼問題歡迎大家討論，下面是代碼的下載地址：

http://download.csdn.net/detail/aomandeshangxiao/4017928