Android之自定义最简单的竖向引导页

Android之最简单的竖向引导页实现

一般的APP都是实现的横向的引导页，今天我们就来另辟蹊径，实现竖向引导页。

首先来看效果图

实现的原理非常简单，创建一个VerticalGuidePage继承自ScrollView，在加上一些小小的处理就可以实现上述效果

• 首先是我们的布局

<?xml version="1.0" encoding="utf-8"?>
<com.leavessilent.lesson.widget.VerticalGuidePage
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#e91111"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="第一页"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#216df9"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="第二页"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#7a14ed"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="第三页"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#36e730"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="第四页"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </LinearLayout>

    </LinearLayout>
</com.leavessilent.lesson.widget.VerticalGuidePage>

布局非常简单，最外部的容器是我们自定义的VerticalGuidePage，里面是一个LinearLayout，里面包含四个子布局(本次示例用的是四个页面，按你的需求定义)。

• 定义我们VerticalPageGuidePage

public class VerticalGuidePage extends ScrollView {

    private static final String TAG = VerticalGuidePage.class.getSimpleName();
    private int mScreenHeight;

    public VerticalGuidePage(Context context) {
        super(context);
    }

    public VerticalGuidePage(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 默认会掉用此构造，所以在这里我们获取屏幕的高
        mScreenHeight = context.getResources().getDisplayMetrics().heightPixels;
    }

    public VerticalGuidePage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        //首先获取到LinearLayout
        LinearLayout parent = (LinearLayout) getChildAt(0);
        // 依次获取到我们的引导页界面，并设置他们的高为屏幕的height
        View view01 = parent.getChildAt(0);
        view01.getLayoutParams().height = mScreenHeight;
        View view02 = parent.getChildAt(1);
        view02.getLayoutParams().height = mScreenHeight;
        View view03 = parent.getChildAt(2);
        view03.getLayoutParams().height = mScreenHeight;
        View view04 = parent.getChildAt(3);
        view04.getLayoutParams().height = mScreenHeight;
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            // 在这里我们只需要监听ACTION_UP动作即可
            case MotionEvent.ACTION_UP:
                // 获取到我们手指在竖直方向上的偏移量, 因为获取到的scrollY范围是
                // 0~4*mScreenWidth,所以需要对mScreenWidth进行取余
                int height = getScrollY() % mScreenHeight;
                // 当滑动的距离小于屏幕的 三分之一，则回滚到原处，否则滚到下一个页面
                if (height <= mScreenHeight / 3) {
                    smoothScrollBy(0, -height);
                } else {
                    smoothScrollBy(0, mScreenHeight - height);
                }
                // 这里一定要返回true，代表我们消费当前事件
                return true;
        }
        return super.onTouchEvent(ev);
    }
}

整个效果的实现就这么几行代码，怎么样，是不是很简单。