APP大多数在引导页都是一些炫图加导航小圆点,在最后一页直接滑动进入主界面。
首先介绍小圆点的添加:
XML布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewPager
android:id="@+id/viewpage"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp">
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"></LinearLayout>
<View
android:id="@+id/view_select_point"
android:layout_width="16px"
android:layout_height="16px"
android:background="@drawable/shape_point_white" />
</RelativeLayout>
</RelativeLayout>
功能代码:
private void addPoints() {
// 初始化引导页的灰色圆点
for (int i = 0; i < list.size(); i++) {
View point = new View(this);
point.setBackgroundResource(R.drawable.shape_point_gray);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(16, 16);
if (i > 0) {
// 设置圆点间隔
params.leftMargin = 16;
}
// 设置圆点的大小
point.setLayoutParams(params);
// 将圆点添加给布局容器
llPointGroup.addView(point);
}
// 获取视图树, 对事件进行监听
llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
// 当layout事件执行结束后回调此方法
@Override
public void onGlobalLayout() {
llPointGroup.getViewTreeObserver().removeGlobalOnLayoutListener(this);
mPointWidth = llPointGroup.getChildAt(1).getLeft() - llPointGroup.getChildAt(0).getLeft();
}
});
}
在viewpager的滑动监听中设置选中页面小白点的位置
viewpage.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
ZLog.d("onPageScrolled", "position:" + position + " positionOffset:" +
positionOffset + " positionOffsetPixels:" + positionOffsetPixels);
int len = (int) (mPointWidth * positionOffset) + position * mPointWidth;
// 获取当前白点(选中)的布局参数
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) view_select_point.getLayoutParams();
params.leftMargin = len;// 设置左边距
view_select_point.setLayoutParams(params);
curItem = position;
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
以上就完成了引导页导航点的添加,下面来实现滑动进入主界面的功能。通过手势的监听来实现:
mGestureDetector = new GestureDetector(this,
new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2,
float velocityX, float velocityY) {
if (curItem == 3) {//这个地方根据自己引导页的页数设置,我的是4页,所以索引是3
if ((e1.getRawX() - e2.getRawX()) >= flaggingWidth) {
goSlpash();
return true;
}
}
return false;
}
});
需要手势监听类一定要调用其onTouchEvent()方法,否则滑动事件无法监听。
@Override
public boolean onTouchEvent(MotionEvent event) {
mGestureDetector.onTouchEvent(event);
return super.onTouchEvent(event);
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
if (mGestureDetector.onTouchEvent(event)) {
event.setAction(MotionEvent.ACTION_CANCEL);
}
return super.dispatchTouchEvent(event);
}
以上就完成了滑动进入主见面的功能。