APP引导页

-app引导页一般由三部分构成

• 页面主体:一般是一个ViewPager,里面放置多张引导图片
• 下方的标识圆点,使用LinearLayout放置对应数量的view即可
• 最后是打开app和跳过按钮,根据需要设置可见性

一个典型的引导页布局文件如下:

<android.support.v4.view.ViewPager
    android:id="@+id/welcome_page"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<Button
    android:id="@+id/start_app"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginBottom="50dp"
    android:text="马上开启"
    android:textSize="20sp"
    android:textColor="#666666"
    android:background="@color/window_background_color"
    android:visibility="gone" />

<LinearLayout
    android:id="@+id/page_index"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginBottom="20dp"
    android:gravity="center"
    android:layout_gravity="bottom" >
    
    <View
        android:id="@+id/page_0"
        android:layout_width="7dp"
        android:layout_height="7dp"
        android:background="@drawable/x_2" />
    
    <View
        android:id="@+id/page_1"
        android:layout_width="7dp"
        android:layout_height="7dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/x_1" />
    
    <View
        android:id="@+id/page_2"
        android:layout_width="7dp"
        android:layout_height="7dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/x_1" />
    
    <View
        android:id="@+id/page_3"
        android:layout_width="7dp"
        android:layout_height="7dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/x_1" />
    
    <View
        android:id="@+id/page_4"
        android:layout_width="7dp"
        android:layout_height="7dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/x_1" />
    
    <View
        android:id="@+id/page_5"
        android:layout_width="7dp"
        android:layout_height="7dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/x_1" />
    
</LinearLayout> 

代码中也没有特别复杂的地方,给ViewPager配置一个PagerAdapter,复写instantiateItem方法将Imageview根据位置添加好,Activity(Fragment)实现OnPageChangeListener接口,在onPageSelected方法中处理好下方圆点的变化即可.

最后实现好,在最后一页显示跳转按钮,跳转到下一个页面即可.

• 更简单的,我们也可以使用一些开源组件来实现引导页的功能,可以参见:http://xiaojichimi.com/?p=132130