Andoird 自定義ViewGroup實現豎向引導界面

轉載請表明出處：http://write.blog.csdn.net/postedit/23692439

一般進入APP都有歡迎界面，基本都是水平滾動的，今天和大家分享一個垂直滾動的例子。

先來看看效果把：

1、首先是佈局文件：

<com.example.verticallinearlayout.VerticalLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_main_ly"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#fff" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w02" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w03" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="#fff"
            android:text="hello" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w04" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="hello" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w05" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="hello" />
    </RelativeLayout>

</com.example.verticallinearlayout.VerticalLinearLayout>

在自定義的ViewGroup中放入了4個RelativeLayout，每個RelativeLayout都設置了背景圖片，背景圖片來自微信~

2、主要看自定義的Layout了

package com.example.verticallinearlayout;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.Scroller;

public class VerticalLinearLayout extends ViewGroup
{
    /**
     * 屏幕的高度
     */
    private int mScreenHeight;
    /**
     * 手指按下時的getScrollY
     */
    private int mScrollStart;
    /**
     * 手指擡起時的getScrollY
     */
    private int mScrollEnd;
    /**
     * 記錄移動時的Y
     */
    private int mLastY;
    /**
     * 滾動的輔助類
     */
    private Scroller mScroller;
    /**
     * 是否正在滾動
     */
    private boolean isScrolling;
    /**
     * 加速度檢測
     */
    private VelocityTracker mVelocityTracker;
    /**
     * 記錄當前頁
     */
    private int currentPage = 0;

    private OnPageChangeListener mOnPageChangeListener;

    public VerticalLinearLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        /**
         * 獲得屏幕的高度
         */
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        mScreenHeight = outMetrics.heightPixels;
        // 初始化
        mScroller = new Scroller(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int count = getChildCount();
        for (int i = 0; i < count; ++i)
        {
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec,mScreenHeight);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b)
    {
        if (changed)
        {
            int childCount = getChildCount();
            // 設置主佈局的高度
            MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
            lp.height = mScreenHeight * childCount;
            setLayoutParams(lp);

            for (int i = 0; i < childCount; i++)
            {
                View child = getChildAt(i);
                if (child.getVisibility() != View.GONE)
                {
                    child.layout(l, i * mScreenHeight, r, (i + 1) * mScreenHeight);// 調用每個自佈局的layout
                }
            }

        }

    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        // 如果當前正在滾動，調用父類的onTouchEvent
        if (isScrolling)
            return super.onTouchEvent(event);

        int action = event.getAction();
        int y = (int) event.getY();

        obtainVelocity(event);
        switch (action)
        {
        case MotionEvent.ACTION_DOWN:

            mScrollStart = getScrollY();
            mLastY = y;
            break;
        case MotionEvent.ACTION_MOVE:

            if (!mScroller.isFinished())
            {
                mScroller.abortAnimation();
            }

            int dy = mLastY - y;
            // 邊界值檢查
            int scrollY = getScrollY();
            // 已經到達頂端，下拉多少，就往上滾動多少
            if (dy < 0 && scrollY + dy < 0)
            {
                dy = -scrollY;
            }
            // 已經到達底部，上拉多少，就往下滾動多少
            if (dy > 0 && scrollY + dy > getHeight() - mScreenHeight)
            {
                dy = getHeight() - mScreenHeight - scrollY;
            }

            scrollBy(0, dy);
            mLastY = y;
            break;
        case MotionEvent.ACTION_UP:

            mScrollEnd = getScrollY();

            int dScrollY = mScrollEnd - mScrollStart;

            if (wantScrollToNext())// 往上滑動
            {
                if (shouldScrollToNext())
                {
                    mScroller.startScroll(0, getScrollY(), 0, mScreenHeight - dScrollY);

                } else
                {
                    mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
                }

            }

            if (wantScrollToPre())// 往下滑動
            {
                if (shouldScrollToPre())
                {
                    mScroller.startScroll(0, getScrollY(), 0, -mScreenHeight - dScrollY);

                } else
                {
                    mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
                }
            }
            isScrolling = true;
            postInvalidate();
            recycleVelocity();
            break;
        }

        return true;
    }

    /**
     * 根據滾動距離判斷是否能夠滾動到下一頁
     *
     * @return
     */
    private boolean shouldScrollToNext()
    {
        return mScrollEnd - mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
    }

    /**
     * 根據用戶滑動，判斷用戶的意圖是否是滾動到下一頁
     *
     * @return
     */
    private boolean wantScrollToNext()
    {
        return mScrollEnd > mScrollStart;
    }

    /**
     * 根據滾動距離判斷是否能夠滾動到上一頁
     *
     * @return
     */
    private boolean shouldScrollToPre()
    {
        return -mScrollEnd + mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
    }

    /**
     * 根據用戶滑動，判斷用戶的意圖是否是滾動到上一頁
     *
     * @return
     */
    private boolean wantScrollToPre()
    {
        return mScrollEnd < mScrollStart;
    }

    @Override
    public void computeScroll()
    {
        super.computeScroll();
        if (mScroller.computeScrollOffset())
        {
            scrollTo(0, mScroller.getCurrY());
            postInvalidate();
        } else
        {

            int position = getScrollY() / mScreenHeight;

            Log.e("xxx", position + "," + currentPage);
            if (position != currentPage)
            {
                if (mOnPageChangeListener != null)
                {
                    currentPage = position;
                    mOnPageChangeListener.onPageChange(currentPage);
                }
            }

            isScrolling = false;
        }

    }

    /**
     * 獲取y方向的加速度
     *
     * @return
     */
    private int getVelocity()
    {
        mVelocityTracker.computeCurrentVelocity(1000);
        return (int) mVelocityTracker.getYVelocity();
    }

    /**
     * 釋放資源
     */
    private void recycleVelocity()
    {
        if (mVelocityTracker != null)
        {
            mVelocityTracker.recycle();
            mVelocityTracker = null;
        }
    }

    /**
     * 初始化加速度檢測器
     *
     * @param event
     */
    private void obtainVelocity(MotionEvent event)
    {
        if (mVelocityTracker == null)
        {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.addMovement(event);
    }

    /**
     * 設置回調接口
     *
     * @param onPageChangeListener
     */
    public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener)
    {
        mOnPageChangeListener = onPageChangeListener;
    }

    /**
     * 回調接口
     *
     * @author zhy
     *
     */
    public interface OnPageChangeListener
    {
        void onPageChange(int currentPage);
    }
}

註釋還是相當詳細的，我簡單描述一下，Action_down時獲得當前的scrollY,然後Action_move時，根據移動的距離不斷scrollby就行了，當前處理了一下邊界判斷，在Action_up中再次獲得scrollY，兩個的scrollY進行對比，然後根據移動的距離與方向決定最後的動作。

3、主Activity

package com.example.verticallinearlayout;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.example.verticallinearlayout.VerticalLinearLayout.OnPageChangeListener;

public class MainActivity extends Activity
{
    private VerticalLinearLayout mMianLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mMianLayout = (VerticalLinearLayout) findViewById(R.id.id_main_ly);
        mMianLayout.setOnPageChangeListener(new OnPageChangeListener()
        {
            @Override
            public void onPageChange(int currentPage)
            {
//              mMianLayout.getChildAt(currentPage);
                Toast.makeText(MainActivity.this, "第"+(currentPage+1)+"頁", Toast.LENGTH_SHORT).show();
            }
        });
    }

}

爲了提供可擴展性，還是定義了回調接口，完全可以把這個當成一個垂直的ViewPager使用。

總結下：

Scroller這個輔助類還是相當好用的，原理我簡單說一下：每次滾動時，讓Scroller進行滾動，然後調用postInvalidate方法，這個方法會引發調用onDraw方法，onDraw方法中會去調用computeScroll方法，然後我們在computScroll中判斷，Scroller的滾動是否結束，沒有的話，把當前的View滾動到現在Scroller的位置，然後繼續調用postInvalidate，這樣一個循環的過程。

畫張圖方便大家理解，ps:沒找到什麼好的畫圖工具，那rose隨便畫了，莫計較。