android引导页实现

引导页效果

1 引导页布局（activity_guide.xml）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        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" />

    <LinearLayout
        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">

        <ImageView
            android:layout_width="16dp"
            android:layout_height="8dp"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="8dp"
            android:clickable="true"
            android:scaleType="centerInside" />

        <ImageView
            android:layout_width="16dp"
            android:layout_height="8dp"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="8dp"
            android:clickable="true"
            android:scaleType="centerInside" />

        <ImageView
            android:layout_width="16dp"
            android:layout_height="8dp"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:scaleType="centerInside" />

    </LinearLayout>

</RelativeLayout>

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

2 底部圆角游标drawable

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

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!--圆角-->
    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="4dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="4dp" />

    <size
        android:width="16dp"
        android:height="8dp" />

    <!--填充-->
    <solid android:color="@android:color/white" />

</shape>

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

  <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <!--圆角-->
    <corners android:radius="4dp" />

    <size
        android:width="8dp"
        android:height="8dp" />

    <!--填充-->
    <solid android:color="@android:color/white" />

</shape>

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上给我加星哦，谢谢！