如何做一个简单的Guide(引导)页面

整体的设计步骤:

1.设置布局,大体上先设置一个Viewpager做为所有Image的容器

2.设置好Viewpager容器后,需要给Viewpager设置数据,把Image填充进去的话,就需要给Viewpager设置一个Adapter,在Adapter的instantiateItem()初始化布局方法中,把Image填充进去,只是在这当中,我们把ImageView放到了一个集合中,方便在instantiateItem()初始化布局方法中使用

3.自定义页面跟随小圆点:做一个线性布局做为容器,动态的添加小圆点.在下面的代码中我们自己shape了小圆点

本次难点:界面上的小圆点其实是4个,三个不动,一个红色在动,小红点压在了小灰点上面

4.动态设置小红点中涉及到了ViewPager的滑动事件,在这个事件里面我们先通过ImageView的视图树拿到mPointDis小红点移动距离,再通过它修改小红点的左边距,进而修改它的位置

难点:

我们怎么才能拿到小红点的移动位置呢?在onCreate方法中我们拿不到,因为这个时候布局还没有开始进行绘制,只有onCreate方法执行完毕之后才能拿到. 那拿不到的话我们在onStart方法,或者是onResume方法中是不是可以拿到呢?其实,这俩方法里面没有什么复杂的逻辑,它们很快的就会执行完毕,而我们的测量,布局,绘制却会花费很多的时间,所以很可能我们根本就拿不到数据,那到底我们应该怎么做才能拿到数据呢?

这个里面就用到了视图树,可以监听ImageView的layout执行结束的事件.在它的视图树onGlobalLayout()回调方法中得到测量的结果,什么意思呢,就是说,我先不管你到底是有多大的距离,反正我也拿不着数据,那只好等你layout布局完之后告诉我喽

布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

//实际上里面的容器是一个viewpager,去盛放我们的Image,而所有的Image是以background进行设置的.
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_guide"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

//这里我们做了一个"开始体验"的按钮,整体的布局是个相对布局,
    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:background="@drawable/btn_guide_selector" //这是一个按钮选中与否的状态选择器
        android:paddingLeft="10dp" //内边距
        android:paddingRight="10dp"
        android:text="开始体验"
        android:textColor="@color/txt_guide_selector" //这是一个文字选中与否的状态选择器
        android:visibility="gone" /> //可以用代码设置它的显示与隐藏,默认设置为gone

//这里为什么出现了一个相对布局呢,这其实就是本次自定义动态跟随小圆点的难点:其实本身是有4个小圆点,3个是我们自己画出来的,

还有一个是我们在相对布局中定义出来的浮在画出来的小灰点上的小红点
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp" >

//搞一个线性布局做为容器,动态的添加小圆点,这个布局中小圆点的出现是我们自己shape出来的
        <LinearLayout
            android:id="@+id/ll_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </LinearLayout>

//小红点的布局
        <ImageView
            android:id="@+id/iv_red_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/shape_point_selected" />
    </RelativeLayout>


</RelativeLayout>

Viewpager的适配器:

class GuideAdapter extends PagerAdapter {


@Override
public int getCount() {
return mImageIds.length;
}


@Override
public boolean isViewFromObject(View view, Object object) {