android导航页（欢迎页实现十分简单）

• 首先要弄明白原理，大致了解一下该流程
  
  
  1、创建一个类继承自SimplePagerFragment，实现对导航页面的页面循环的设置、背景颜色的设置以及页面监听事件的设置
  2、创建类定义每一个的页面（有多少页就创建多少个页面，当然布局文件是肯定需要的不再赘叙）
  3、在Activity中启动
• 创建创建一个类继承自SimplePagerFragment代码如下：
  

      
      
  package com.cleveroad.slidingtutorial.sample;
   
  import android.graphics.Color;
  import android.support.annotation.ColorInt;
  import android.support.v4.content.ContextCompat;
  import android.view.View;
  import android.widget.Toast;
   
  import com.cleveroad.slidingtutorial.PageFragment;
  import com.cleveroad.slidingtutorial.SimplePagerFragment;
   //此处继承自SimplePagerFragment查看库文件代码发现SimplePagerFragment继承自CustomPresentationPagerFragment
  public class CustomPresentationPagerFragment extends SimplePagerFragment {
   
  //获取页面个数
     @Override
     protected int getPagesCount() {
        return 6;
     }
   
  //注意此处是背景上所添加的图案的循环出现的次数，运行安装后可以发现第一个页面（position=0）的图案和第四个（position=3）是相同的就是在此处设置的
     @Override
     protected PageFragment getPage(int position) {
        position %= 3;
        if (position == 0)
           return new FirstCustomPageFragment();
        if (position == 1)
           return new SecondCustomPageFragment();
        if (position == 2)
           return new ThirdCustomPageFragment();
        throw new IllegalArgumentException("Unknown position: " + position);
     }
   
  //设置背景颜色，现在越来越多的软件背景都是以颜色代替呈现一种扁平化的感觉，也可以自定义图片
     @ColorInt
     @Override
     protected int getPageColor(int position) {
        if (position == 0)
           return ContextCompat.getColor(getContext(), android.R.color.holo_orange_dark);
        if (position == 1)
           return ContextCompat.getColor(getContext(), android.R.color.holo_green_dark);
        if (position == 2)
           return ContextCompat.getColor(getContext(), android.R.color.holo_blue_dark);
        if (position == 3)
           return ContextCompat.getColor(getContext(), android.R.color.holo_red_dark);
        if (position == 4)
           return ContextCompat.getColor(getContext(), android.R.color.holo_purple);
        if (position == 5)
           return ContextCompat.getColor(getContext(), android.R.color.darker_gray);
        return Color.TRANSPARENT;
     }
   
  //是否循环滑动（true一直循环滑动不进入程序，false相反）
     @Override
     protected boolean isInfiniteScrollEnabled() {
        return true;
     }
   
  //监听事件（页面上左下角Skip的点击事件---布局代码都在库文件中不可修改但是如果需要自己定义点击图标以及事件可以继承其抽象类的抽象方法去实现
     @Override
     protected boolean onSkipButtonClicked(View skipButton) {
        Toast.makeText(getContext(), "Skip button clicked", Toast.LENGTH_SHORT).show();
        return true;
     }
  }

• 设置单个页面（有多少个就设置多少个是不是很简单！）：
  

      
      
  public class FirstCustomPageFragment extends PageFragment {
   
  //获取布局文件的ID
     @Override
     protected int getLayoutResId() {
        return R.layout.fragment_page_first;
     }
   
  /*为界面上的各个元素设置移动因素，包括方向和系数。一个TransformItem就是一个界面元素，其中它的第一个参数是界面元素对应的id，第二个参数是是否反向，true表示要，false表示不，第三个参数是移动系数。系数越大移动越慢，为一个界面上的不同元素设置不同的方向和系数，就能形成视差效果。**/
     @Override
     protected TransformItem[] provideTransformItems() {
        return new TransformItem[]{
              new TransformItem(R.id.ivFirstImage, true, 20),
              new TransformItem(R.id.ivSecondImage, false, 6),
              new TransformItem(R.id.ivThirdImage, true, 8),
              new TransformItem(R.id.ivFourthImage, false, 10),
              new TransformItem(R.id.ivFifthImage, false, 3),
              new TransformItem(R.id.ivSixthImage, false, 9),
              new TransformItem(R.id.ivSeventhImage, false, 14),
              new TransformItem(R.id.ivEighthImage, false, 7)
        };
     }
  }

• 相对应的布局文件（此处使用的是百分比布局，如果要使用该形式的布局是需要导入百分比布局的库文件的否则编译不通过：'com.android.support:percent:22.2.0'）：
  

      
      
  <?xml version="1.0" encoding="utf-8"?>
  <android.support.percent.PercentRelativeLayout
      android:id="@+id/rootFirstPage"
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:ignore="ContentDescription"
      tools:background="@android:color/holo_orange_dark">
   
      <ImageView
          android:id="@+id/ivFirstImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
   
          android:src="@mipmap/s_0_1"
   
          app:layout_heightPercent="35%"
          app:layout_widthPercent="50%"/>
   
      <ImageView
          android:id="@+id/ivSecondImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentEnd="true"
          android:layout_alignParentRight="true"
   
          android:src="@mipmap/s_0_2"
   
          app:layout_heightPercent="10%"
          app:layout_marginRightPercent="12%"
          app:layout_marginTopPercent="27%"
          app:layout_widthPercent="12%"/>
   
   
      <ImageView
          android:id="@+id/ivThirdImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
   
          android:src="@mipmap/s_0_3"
   
          app:layout_heightPercent="25%"
          app:layout_marginLeftPercent="14%"
          app:layout_marginTopPercent="49%"
          app:layout_widthPercent="30%"/>
   
      <ImageView
          android:id="@+id/ivFourthImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
   
          android:src="@mipmap/s_0_4"
   
          app:layout_heightPercent="15%"
          app:layout_marginLeftPercent="14%"
          app:layout_marginTopPercent="39%"
          app:layout_widthPercent="20%"/>
   
      <ImageView
          android:id="@+id/ivFifthImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerHorizontal="true"
   
          android:src="@mipmap/s_0_5"
   
          app:layout_heightPercent="15%"
          app:layout_marginTopPercent="22%"
          app:layout_widthPercent="45%"/>
   
      <ImageView
          android:id="@+id/ivSixthImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
   
          android:src="@mipmap/s_0_6"
   
          app:layout_heightPercent="6%"
          app:layout_marginLeftPercent="4%"
          app:layout_marginTopPercent="26%"
          app:layout_widthPercent="6%"/>
   
      <ImageView
          android:id="@+id/ivSeventhImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
   
          android:src="@mipmap/s_0_7"
   
          app:layout_heightPercent="8%"
          app:layout_marginLeftPercent="14%"
          app:layout_marginTopPercent="25%"
          app:layout_widthPercent="9%"/>
   
      <ImageView
          android:id="@+id/ivEighthImage"
   
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
   
          android:src="@mipmap/s_0_8"
   
          app:layout_heightPercent="6%"
          app:layout_marginLeftPercent="77%"
          app:layout_marginTopPercent="38%"
          app:layout_widthPercent="8%"/>
   
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_centerHorizontal="true"
   
          android:gravity="center"
   
          android:text="@string/text_web_ceo"
          android:textColor="@android:color/white"
          android:textSize="@dimen/text_size_large"
   
          app:layout_heightPercent="15%"
          app:layout_marginBottomPercent="11%"
          app:layout_widthPercent="45%"/>
  </android.support.percent.PercentRelativeLayout>

  此时导航页面是无限循环的如果需要判断用户是否是第一次启动该软件用savedInstanceState判断一下，MainActivity 中代码较少也简单主要是用了一个replaceTutorialFragment()方法。
• 具体代码下载地址：https://github.com/Cleveroad/SlidingTutorial-Android.git
• 如果下载总是中间停止可以用SVN下载无需用户名及密码
• 如转载请标明转载地址，写的不好尽情谅解！
  
• 如有问题可以加我qq:2915859312联系！