Andoird 自定义ViewGroup实现竖向引导界面

转载请表明出处：http://write.blog.csdn.net/postedit/23692439

一般进入APP都有欢迎界面，基本都是水平滚动的，今天和大家分享一个垂直滚动的例子。

先来看看效果把：

1、首先是布局文件：

[html] view plain copy

print ?

1. <com.example.verticallinearlayout.VerticalLinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
2.     xmlns:tools=“http://schemas.android.com/tools”  
3.     android:id=“@+id/id_main_ly”  
4.     android:layout_width=“match_parent”  
5.     android:layout_height=“fill_parent”  
6.     android:orientation=“vertical”  
7.     android:background=“#fff” >  
8.   
9.     <RelativeLayout  
10.         android:layout_width=“fill_parent”  
11.         android:layout_height=“fill_parent”  
12.         android:background=“@drawable/w02” >  
13.   
14.         <Button  
15.             android:layout_width=“wrap_content”  
16.             android:layout_height=“wrap_content”  
17.             android:text=“hello” />  
18.     </RelativeLayout>  
19.   
20.     <RelativeLayout  
21.         android:layout_width=“fill_parent”  
22.         android:layout_height=“fill_parent”  
23.         android:background=“@drawable/w03” >  
24.   
25.         <Button  
26.             android:layout_width=“wrap_content”  
27.             android:layout_height=“wrap_content”  
28.             android:layout_centerInParent=“true”  
29.             android:background=“#fff”  
30.             android:text=“hello” />  
31.     </RelativeLayout>  
32.   
33.     <RelativeLayout  
34.         android:layout_width=“fill_parent”  
35.         android:layout_height=“fill_parent”  
36.         android:background=“@drawable/w04” >  
37.   
38.         <Button  
39.             android:layout_width=“wrap_content”  
40.             android:layout_height=“wrap_content”  
41.             android:layout_centerInParent=“true”  
42.             android:text=“hello” />  
43.     </RelativeLayout>  
44.   
45.     <RelativeLayout  
46.         android:layout_width=“fill_parent”  
47.         android:layout_height=“fill_parent”  
48.         android:background=“@drawable/w05” >  
49.   
50.         <Button  
51.             android:layout_width=“wrap_content”  
52.             android:layout_height=“wrap_content”  
53.             android:layout_centerInParent=“true”  
54.             android:text=“hello” />  
55.     </RelativeLayout>  
56.   
57. </com.example.verticallinearlayout.VerticalLinearLayout>  

<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了

[java] view plain copy

print ?

1. package com.example.verticallinearlayout;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.util.DisplayMetrics;  
6. import android.util.Log;  
7. import android.view.MotionEvent;  
8. import android.view.VelocityTracker;  
9. import android.view.View;  
10. import android.view.ViewGroup;  
11. import android.view.WindowManager;  
12. import android.widget.Scroller;  
13.   
14. public class VerticalLinearLayout extends ViewGroup  
15. {  
16.     /** 
17.      * 屏幕的高度 
18.      */  
19.     private int mScreenHeight;  
20.     /** 
21.      * 手指按下时的getScrollY 
22.      */  
23.     private int mScrollStart;  
24.     /** 
25.      * 手指抬起时的getScrollY 
26.      */  
27.     private int mScrollEnd;  
28.     /** 
29.      * 记录移动时的Y 
30.      */  
31.     private int mLastY;  
32.     /** 
33.      * 滚动的辅助类 
34.      */  
35.     private Scroller mScroller;  
36.     /** 
37.      * 是否正在滚动 
38.      */  
39.     private boolean isScrolling;  
40.     /** 
41.      * 加速度检测 
42.      */  
43.     private VelocityTracker mVelocityTracker;  
44.     /** 
45.      * 记录当前页 
46.      */  
47.     private int currentPage = 0;  
48.   
49.     private OnPageChangeListener mOnPageChangeListener;  
50.   
51.     public VerticalLinearLayout(Context context, AttributeSet attrs)  
52.     {  
53.         super(context, attrs);  
54.   
55.         /** 
56.          * 获得屏幕的高度 
57.          */  
58.         WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);  
59.         DisplayMetrics outMetrics = new DisplayMetrics();  
60.         wm.getDefaultDisplay().getMetrics(outMetrics);  
61.         mScreenHeight = outMetrics.heightPixels;  
62.         // 初始化  
63.         mScroller = new Scroller(context);  
64.     }  
65.   
66.     @Override  
67.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
68.     {  
69.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
70.         int count = getChildCount();  
71.         for (int i = 0; i < count; ++i)  
72.         {  
73.             View childView = getChildAt(i);  
74.             measureChild(childView, widthMeasureSpec,mScreenHeight);  
75.         }  
76.     }  
77.   
78.     @Override  
79.     protected void onLayout(boolean changed, int l, int t, int r, int b)  
80.     {  
81.         if (changed)  
82.         {  
83.             int childCount = getChildCount();  
84.             // 设置主布局的高度  
85.             MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();  
86.             lp.height = mScreenHeight * childCount;  
87.             setLayoutParams(lp);  
88.   
89.             for (int i = 0; i < childCount; i++)  
90.             {  
91.                 View child = getChildAt(i);  
92.                 if (child.getVisibility() != View.GONE)  
93.                 {  
94.                     child.layout(l, i * mScreenHeight, r, (i + 1) * mScreenHeight);// 调用每个自布局的layout  
95.                 }  
96.             }  
97.   
98.         }  
99.   
100.     }  
101.   
102.     @Override  
103.     public boolean onTouchEvent(MotionEvent event)  
104.     {  
105.         // 如果当前正在滚动，调用父类的onTouchEvent  
106.         if (isScrolling)  
107.             return super.onTouchEvent(event);  
108.   
109.         int action = event.getAction();  
110.         int y = (int) event.getY();  
111.   
112.         obtainVelocity(event);  
113.         switch (action)  
114.         {  
115.         case MotionEvent.ACTION_DOWN:  
116.   
117.             mScrollStart = getScrollY();  
118.             mLastY = y;  
119.             break;  
120.         case MotionEvent.ACTION_MOVE:  
121.   
122.             if (!mScroller.isFinished())  
123.             {  
124.                 mScroller.abortAnimation();  
125.             }  
126.   
127.             int dy = mLastY - y;  
128.             // 边界值检查  
129.             int scrollY = getScrollY();  
130.             // 已经到达顶端，下拉多少，就往上滚动多少  
131.             if (dy < 0 && scrollY + dy < 0)  
132.             {  
133.                 dy = -scrollY;  
134.             }  
135.             // 已经到达底部，上拉多少，就往下滚动多少  
136.             if (dy > 0 && scrollY + dy > getHeight() - mScreenHeight)  
137.             {  
138.                 dy = getHeight() - mScreenHeight - scrollY;  
139.             }  
140.   
141.             scrollBy(0, dy);  
142.             mLastY = y;  
143.             break;  
144.         case MotionEvent.ACTION_UP:  
145.   
146.             mScrollEnd = getScrollY();  
147.   
148.             int dScrollY = mScrollEnd - mScrollStart;  
149.   
150.             if (wantScrollToNext())// 往上滑动  
151.             {  
152.                 if (shouldScrollToNext())  
153.                 {  
154.                     mScroller.startScroll(0, getScrollY(), 0, mScreenHeight - dScrollY);  
155.   
156.                 } else  
157.                 {  
158.                     mScroller.startScroll(0, getScrollY(), 0, -dScrollY);  
159.                 }  
160.   
161.             }  
162.   
163.             if (wantScrollToPre())// 往下滑动  
164.             {  
165.                 if (shouldScrollToPre())  
166.                 {  
167.                     mScroller.startScroll(0, getScrollY(), 0, -mScreenHeight - dScrollY);  
168.   
169.                 } else  
170.                 {  
171.                     mScroller.startScroll(0, getScrollY(), 0, -dScrollY);  
172.                 }  
173.             }  
174.             isScrolling = true;  
175.             postInvalidate();  
176.             recycleVelocity();  
177.             break;  
178.         }  
179.   
180.         return true;  
181.     }  
182.   
183.     /** 
184.      * 根据滚动距离判断是否能够滚动到下一页 
185.      *  
186.      * @return 
187.      */  
188.     private boolean shouldScrollToNext()  
189.     {  
190.         return mScrollEnd - mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;  
191.     }  
192.   
193.     /** 
194.      * 根据用户滑动，判断用户的意图是否是滚动到下一页 
195.      *  
196.      * @return 
197.      */  
198.     private boolean wantScrollToNext()  
199.     {  
200.         return mScrollEnd > mScrollStart;  
201.     }  
202.   
203.     /** 
204.      * 根据滚动距离判断是否能够滚动到上一页 
205.      *  
206.      * @return 
207.      */  
208.     private boolean shouldScrollToPre()  
209.     {  
210.         return -mScrollEnd + mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;  
211.     }  
212.   
213.     /** 
214.      * 根据用户滑动，判断用户的意图是否是滚动到上一页 
215.      *  
216.      * @return 
217.      */  
218.     private boolean wantScrollToPre()  
219.     {  
220.         return mScrollEnd < mScrollStart;  
221.     }  
222.   
223.     @Override  
224.     public void computeScroll()  
225.     {  
226.         super.computeScroll();  
227.         if (mScroller.computeScrollOffset())  
228.         {  
229.             scrollTo(0, mScroller.getCurrY());  
230.             postInvalidate();  
231.         } else  
232.         {  
233.   
234.             int position = getScrollY() / mScreenHeight;  
235.   
236.             Log.e(”xxx”, position + “,” + currentPage);  
237.             if (position != currentPage)  
238.             {  
239.                 if (mOnPageChangeListener != null)  
240.                 {  
241.                     currentPage = position;  
242.                     mOnPageChangeListener.onPageChange(currentPage);  
243.                 }  
244.             }  
245.   
246.             isScrolling = false;  
247.         }  
248.   
249.     }  
250.   
251.     /** 
252.      * 获取y方向的加速度 
253.      *  
254.      * @return 
255.      */  
256.     private int getVelocity()  
257.     {  
258.         mVelocityTracker.computeCurrentVelocity(1000);  
259.         return (int) mVelocityTracker.getYVelocity();  
260.     }  
261.   
262.     /** 
263.      * 释放资源 
264.      */  
265.     private void recycleVelocity()  
266.     {  
267.         if (mVelocityTracker != null)  
268.         {  
269.             mVelocityTracker.recycle();  
270.             mVelocityTracker = null;  
271.         }  
272.     }  
273.   
274.     /** 
275.      * 初始化加速度检测器 
276.      *  
277.      * @param event 
278.      */  
279.     private void obtainVelocity(MotionEvent event)  
280.     {  
281.         if (mVelocityTracker == null)  
282.         {  
283.             mVelocityTracker = VelocityTracker.obtain();  
284.         }  
285.         mVelocityTracker.addMovement(event);  
286.     }  
287.   
288.     /** 
289.      * 设置回调接口 
290.      *  
291.      * @param onPageChangeListener 
292.      */  
293.     public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener)  
294.     {  
295.         mOnPageChangeListener = onPageChangeListener;  
296.     }  
297.   
298.     /** 
299.      * 回调接口 
300.      *  
301.      * @author zhy 
302.      *  
303.      */  
304.     public interface OnPageChangeListener  
305.     {  
306.         void onPageChange(int currentPage);  
307.     }  
308. }  

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

[java] view plain copy

print ?

1. package com.example.verticallinearlayout;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.Toast;  
6.   
7. import com.example.verticallinearlayout.VerticalLinearLayout.OnPageChangeListener;  
8.   
9. public class MainActivity extends Activity  
10. {  
11.     private VerticalLinearLayout mMianLayout;  
12.   
13.     @Override  
14.     protected void onCreate(Bundle savedInstanceState)  
15.     {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.activity_main);  
18.   
19.         mMianLayout = (VerticalLinearLayout) findViewById(R.id.id_main_ly);  
20.         mMianLayout.setOnPageChangeListener(new OnPageChangeListener()  
21.         {  
22.             @Override  
23.             public void onPageChange(int currentPage)  
24.             {  
25. //              mMianLayout.getChildAt(currentPage);  
26.                 Toast.makeText(MainActivity.this, “第”+(currentPage+1)+“页”, Toast.LENGTH_SHORT).show();  
27.             }  
28.         });  
29.     }  
30.   
31. }  

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随便画了，莫计较。

源码点击此处下载

转自:http://blog.csdn.net/lmj623565791/article/details/23692439