Android引导页制作及ViewPager知识总结（三）

实现底部指示点及OnPageChangeListener总结

---

---

问题：通过前面的ViewPager已经实现很炫酷的翻页效果了，但我经常在进入App的时候还看到底部有小点可以提示到了第几页，并且翻到哪页，那页底部的小点的颜色也会发生变化，这该怎么实现呢？通过网上资料的查找终于找到了相关的方法和代码，这实在是令人兴奋。

---

解决思路：其实就是找到两张大小一致，颜色不同的圆点图片，用水平线性布局将它们包裹，这样就是一排点了；至于切换到哪张点的颜色随之发生变化，可以自定义一个选择器来进行切换；
好，一点一点来。

---

过程：这里我已经从网上找到两张符合我们要求的点的图片了，分别为point_normal和point_select，放在drawable文件夹中。接下来可以在主XML中添加这一排点了。因为我只有三张引导页所以我只设置了三个点，代码如下：

<LinearLayout        android:id="@+id/points"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="24.0dip"        android:orientation="horizontal" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="15.0dip"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="15.0dip"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="15.0dip"            android:src="@drawable/point" />    </LinearLayout>

并设置选择器来控制点的两种状态：

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/point_normal" android:state_enabled="true"/>    <item android:drawable="@drawable/point_select" android:state_enabled="false"/></selector>

那接下来要干什么？我们要在代码中获得这些点并且使这些点和我们的ViewPager建立一定的关系。底部的点其实就是ImageView控件而已，只不过放在一个LinearLayout里所以一排点可以看作就是一个LinearLayout控件。明白了这些，我们就开始来实例化。

我们在onCreate中使用一个initPoint( )的方法来对点进行初始化，方便于我们的代码管理。点开始工作的代码就全部放在这里了，我们要考虑一下我们要在这个方法里做什么：首先取得这些点，其实就是把LinearLayout这个控件取出来；然后，我们把这些点放在一个ImageView的数组中，这样我们就可以通过for循环对点进行操作；对点的操作，无非就是设置它的颜色，让它的颜色跟图片同步而已。还要注意的是，刚开始一进来应该是显示第一页，所以默认点应该在第一个。
代码如下：

private void initPoints() {        LinearLayout ll = (LinearLayout) findViewById(R.id.points);        //在前面要先声明一个ImageView数组        points = new ImageView[mImgIds.length];        for(int i=0;i<mImgIds.length;i++){            //拿到具体的点            points[i] = (ImageView) ll.getChildAt(i);            //默认设为黑点            points[i].setEnabled(true);        }        //默认第一个不同颜色点的下标,并设置该点的状态不同        currentIndex = 0;        points[currentIndex].setEnabled(false);    }

还要一个想法，就是让点也可以点击切换，可以在这个initPoints的方法里添加点的onClick事件并记得标记一下点所对应的图片就OK了，但后来我发现，很多引导页的点是不能点击的，它需要让你把引导页的内容看完，所以这里也不实现这个小功能。

好，当你完成了上面的操作，运行一下程序，你会发现点有了，但始终停在第一点上，这是因为我们只是完成了点的实现，还没有实现点跟ViewPager的关联。所以，又引出了OnPageChangeListener这部分知识点。

顾名思义，这是ViewPager专属的监听器，我们需要再ViewPager上绑定监听器实现点跟它的关联，所以，先给ViewPager绑定监听器啊。

mViewPager.setOnPageChangeListener(this);

绑定后自然会实现监听器的这几个方法，我们先来看看方法是神马意思和用法。

---

• public void onPageScrollStateChanged(int state)

  这个方法是在状态改变的时候调用，当state=1时，表示正在滑动；当state=2时，表示滑动完毕；当state=0时，表示无动作。

• public void onPageScrolled(int position, float PositionOffset, int PositionOffsetPixels)

  这个方法是在你想滑第二张页面的时候，在出现第二张页面之前就调用了，该方法的三个参数不做解释能看懂。

• public void onPageSelected(int position)

  这个方法跟第二个方法主要的区别在于这个方法是在滑出第二个页面之后调用的。

  ---

所以，应该怎样将点跟ViewPager关联？我们要做什么？在哪里写我们的代码？这几个问题需要我们考虑。
经过考虑，我们把目标投向onPageSelected这个方法中，也就是我们在完成页面滑动后设置点的状态即可。这时候我们设置一个方法setCurDot(position)，这个方法通过获取页面的位置来改变点的状态，这段代码不解释，能看懂。

private void setCurDot(int position) {        if (position < 0 || position > mImgIds.length - 1                || currentIndex == position) {            return;        }        points[position].setEnabled(false);        points[currentIndex].setEnabled(true);        currentIndex = position;    }

ok，到此Android引导页面的底部指示点就完成了，虽然简单但还是有很多可以学习的地方。

总结：罗哩罗嗦的，还没给出完整代码，代码还是借鉴别人的。但，模仿是学习的一方面，另外，也没有人看你的博客，罗嗦点没关系。