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);    }}

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

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

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

更多相关文章

随机推荐