android 引导页作用,android引导页实现

引导页效果

1 引导页布局(activity_guide.xml)

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/guide_view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_alignParentTop="true" />

android:id="@+id/dots_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="36dp"

android:orientation="horizontal">

android:layout_width="16dp"

android:layout_height="8dp"

android:layout_gravity="center_vertical"

android:layout_marginRight="8dp"

android:clickable="true"

android:scaleType="centerInside" />

android:layout_width="16dp"

android:layout_height="8dp"

android:layout_gravity="center_vertical"

android:layout_marginRight="8dp"

android:clickable="true"

android:scaleType="centerInside" />

android:layout_width="16dp"

android:layout_height="8dp"

android:layout_gravity="center_vertical"

android:clickable="true"

android:scaleType="centerInside" />

tips: 游标采用在布局里面直接写好几个的好处在于不用硬编码布局的宽高、间距等属性，缺点就是不够灵活，如果需求预先知道需要加载几个ViewPager页面时，建议采用这种方式，节省时间，快速迭代。

2 底部圆角游标drawable

(1) 选中状态(ic_rect_dot.xml)

android:shape="rectangle">

android:bottomLeftRadius="4dp"

android:bottomRightRadius="4dp"

android:topLeftRadius="4dp"

android:topRightRadius="4dp" />

android:width="16dp"

android:height="8dp" />

(2) 不可用状态(ic_circle_dot.xml)

android:shape="oval">

android:width="8dp"

android:height="8dp" />

3 代码逻辑实现

(1) 初始化游标

private void initDots() {

dots = new ImageView[mFragments.size()];

for (int i = 0; i < mFragments.size(); i++) {

dots[i] = (ImageView) mDotLayout.getChildAt(i);

if (i != 0) {

dots[i].setImageResource(R.drawable.ic_circle_dot);

}

}

currentIndex = 0;

dots[currentIndex].setImageResource(R.drawable.ic_rect_dot);

}

(2) 设置当前选中游标

private void setCurrentDot(int position) {

if (position < 0 || position > mFragments.size() - 1

|| currentIndex == position) {

return;

}

dots[position].setImageDrawable(null);

dots[position].setImageResource(R.drawable.ic_rect_dot);

dots[currentIndex].setImageDrawable(null);

dots[currentIndex].setImageResource(R.drawable.ic_circle_dot);

currentIndex = position;

}

(3) OnPageChangeListener监听实现

// 当前页面被滑动时调用

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

// 当新的页面被选中时调用

@Override

public void onPageSelected(int position) {

// 设置底部小点选中状态

setCurrentDot(position);

}

// 当滑动状态改变时调用

@Override

public void onPageScrollStateChanged(int state) {

}

4 GitHub演示Demo

点击下载 源码，期待您的宝贵意见，持续改进中，如果觉得不错，不要忘了在github上给我加星哦，谢谢！