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);
}
}
整个效果的实现就这么几行代码,怎么样,是不是很简单。