ViewPager实现导航页

我们在首次安装app时，往往会发现会有导航页。

导航页一般用于介绍功能和引导使用，那我们其实可以用ViewPager实现。

ViewPager用于实现多页面的滑动切换效果，使用时需要引入“android.support.v4”包。

好了，我们现在开始就来做一个简单的导航页引导。

首先我们新建一个Android Application Project，我们把自动生成的MainActivity作为应用程序的主界面：

其布局文件我们简单设置下：

activity_main.xml:

<span style="font-size:14px;"><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"
    android:paddingBottom= "@dimen/activity_vertical_margin"
    android:paddingLeft= "@dimen/activity_horizontal_margin"
    android:paddingRight= "@dimen/activity_horizontal_margin"
    android:paddingTop= "@dimen/activity_vertical_margin"
    tools:context="com.example.guidepage.MainActivity" >

    <TextView
        android:layout_width= "wrap_content"
        android:layout_height ="wrap_content"
        android:text ="主界面"
        android:textSize ="22dp"
        android:layout_centerInParent ="true"
        />

</RelativeLayout>
</span>

我们在Layout下新建一个guide.xml作为导航页的布局：

guide.xml:

<span style="font-size:14px;"><?xml version= "1.0" encoding ="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    android:orientation= "vertical" >
   
    <FrameLayout
        android:layout_width= "match_parent"
        android:layout_height="match_parent"
        android:background= "#ff1874CD"
        >
       
        <android.support.v4.view.ViewPager
            android:id= "@+id/guide_viewpager"
            android:layout_width= "match_parent"
            android:layout_height="match_parent"
            />
       
        <!-- 假设导航页有5页 -->
        <!-- 下面这里是设置五个导航点指示 -->
       
        <LinearLayout
            android:layout_width= "wrap_content"
            android:layout_height="wrap_content"
            android:orientation= "horizontal"
            android:layout_gravity="center|bottom"
            android:gravity= "center"
            >
            <ImageView
                android:id= "@+id/dot_01"
                android:layout_width= "0dp"
                android:layout_height="wrap_content"
                      android:layout_weight="1.0"
                android:s