Explain how to create ViewPager components in Android App

Now many app1 opens with an ViewPager and can be slid with your finger, changing one picture every time you slide, with a circle underneath to indicate that you are now sliding to chapter one~
Usually these pictures are for function introduction or use of teaching, etc. My needs are simple, just as mentioned above.
There are two ways to do this, one is to find an existing suite, one is to look up a bunch of data, each of which has recommended ViewPagerIndicator to me. I've seen this before, but it seems that you need fragment plus google play samples can't be loaded, so you have to do one yourself.
Viewpager can be implemented by referring to Android ViewPager using the code detailed inside:

@Overrideprotected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_intro);

  mViewPager = (ViewPager) findViewById(R.id.viewpager);

  final LayoutInflater mInflater = getLayoutInflater().from(this);

  View v1 = mInflater.inflate(R.layout.intro_layout_1, null);
  View v2 = mInflater.inflate(R.layout.intro_layout_2, null);
  View v3 = mInflater.inflate(R.layout.intro_layout_3, null);
  View v4 = mInflater.inflate(R.layout.intro_layout_4, null);

  viewList = new ArrayList<View>();
  viewList.add(v1);
  viewList.add(v2);
  viewList.add(v3);
  viewList.add(v4);

  mViewPager.setAdapter(new MyViewPagerAdapter(viewList));
  mViewPager.setCurrentItem(0);}
MyViewPagerAdapter
public class MyViewPagerAdapter extends PagerAdapter {
  private List<View> mListViews;

  public MyViewPagerAdapter(List<View> mListViews) {
    this.mListViews = mListViews;
  }

  @Override
  public void destroyItem(ViewGroup container, int position, Object object)  {
    container.removeView((View) object);
  }


  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    View view = mListViews.get(position);
    container.addView(view);
    return view;
  }

  @Override
  public int getCount() {
    return mListViews.size();
  }

  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
    return arg0==arg1;
  }}

So you have an ViewPager

Let's take a look at the usage of ViewPager:
1. ViewPager creation steps
1. Add android.support.v4.view.ViewPager to the XML layout

(2) Loading the displayed page card converts the Layout layout to an View object

(1)

LayoutInflater lf getLayoutInflater().from(this);
  lf.inflate(resource,root);

(2)

View.inflate(context,resource,root);

Configuration of Adapter (3 types of Adapter)

(1) PagerAdapter data source: List < View >
(2) FragmentPagerAdapter data source: List < Fragment >
(3) FragmentStatePagerAdapter data source: List < Fragment >
2. Code examples
Create four new Fragments and their layout Below is MainActivity's xml layout:

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

    <android.support.v4.view.PagerTabStrip
      android:id="@+id/tab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="top" >
    </android.support.v4.view.PagerTabStrip>
    <!--  Bottom display Title cannot appear at the same time as top display above 
    <android.support.v4.view.PagerTitleStrip
      android:id="@+id/title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom" >
    </android.support.v4.view.PagerTitleStrip>
    -->
  </android.support.v4.view.ViewPager>

First PagerAdapter

public class MyPagerAdapter extends PagerAdapter {

  private List<View> viewList;
  private List<String> titleList;

  public MyPagerAdapter(List<View> viewList,List<String> titleList){
    this.viewList = viewList;
    this.titleList = titleList;
  }

  /**
   *  Number of returned page cards 
   */
  @Override
  public int getCount() {

    return viewList.size();
  }

   /**
   * view Is it from an object 
   */
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {

    return arg0==arg1;
  }
   /**
   *  instantiation 1 Page cards 
   */
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    container.addView(viewList.get(position));
    return viewList.get(position);
  }
   /**
   *  Destroy 1 Page cards 
   */
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {

    container.removeView(viewList.get(position));

  }

  /**
   *  Set up ViewPager Title 
   */
  @Override
  public CharSequence getPageTitle(int position) {

    return titleList.get(position);
  }

}

Second FragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
  private List<Fragment> fragList;
  private List<String> titleList;
  public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragList,List<String> titleList) {
    super(fm);
    this.fragList = fragList;
    this.titleList = titleList;
  }


  @Override
  public Fragment getItem(int arg0) {

    return fragList.get(arg0);
  }

  @Override
  public CharSequence getPageTitle(int position) {

    return titleList.get(position);
  }

  @Override
  public int getCount() {

    return fragList.size();
  }

}

Third FragmentStatePagerAdapter (this adapter can destroy Fragment dynamically)

public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {// The adapter can be destroyed dynamically 
  private List<Fragment> fragList;
  private List<String> titleList;
  public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragList,List<String> titleList) {
    super(fm);
    this.fragList = fragList;
    this.titleList = titleList;
  }


  @Override
  public Fragment getItem(int arg0) {

    return fragList.get(arg0);
  }

  @Override
  public CharSequence getPageTitle(int position) {

    return titleList.get(position);
  }

  @Override
  public int getCount() {

    return fragList.size();
  }

  @Override
  public Object instantiateItem(ViewGroup arg0, int arg1) {

    return super.instantiateItem(arg0, arg1);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {

    super.destroyItem(container, position, object);
  }

}

getSupportFragmentManager() used in MainActivity which must inherit FragmentActivity:

public class MainActivity extends FragmentActivity implements OnPageChangeListener{
  private List<View> viewList;
  private List<String> titleList;
  private ViewPager pager;
  private PagerTabStrip tab;// Top Title 

  private List<Fragment> fragList;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewList = new ArrayList<View>();
    titleList = new ArrayList<String>();
    tab = (PagerTabStrip) findViewById(R.id.tab);

    View view1 = View.inflate(this,R.layout.view1,null);
    View view2 = View.inflate(this,R.layout.view2,null);
    View view3 = View.inflate(this,R.layout.view3,null);
    View view4 = View.inflate(this,R.layout.view4,null);

    viewList.add(view1);
    viewList.add(view2);
    viewList.add(view3);
    viewList.add(view4);

    fragList = new ArrayList<Fragment>();
    fragList.add(new Fragment1());
    fragList.add(new Fragment2());
    fragList.add(new Fragment3());
    fragList.add(new Fragment4());

    // by ViewPager Page Card Setting Title 
    titleList.add(" No. 1 page ");
    titleList.add(" No. 2 page ");
    titleList.add(" No. 3 page ");
    titleList.add(" No. 4 page ");
    // by PagerTabStrip Set up 1 Some properties 
    tab.setBackgroundColor(Color.WHITE);
    tab.setDrawFullUnderline(false);
    tab.setTabIndicatorColor(Color.BLUE);

    pager = (ViewPager) findViewById(R.id.pager);
    //MyPagerAdapter adapter = new MyPagerAdapter(viewList,titleList);
    //MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);
    /**
     *  Use getSupportFragmentManager() this Activity Must inherit FragmentActivity
     */
    MyFragmentPagerAdapter2 adapter = new MyFragmentPagerAdapter2(getSupportFragmentManager(), fragList, titleList);
    pager.setAdapter(adapter);
    pager.setOnPageChangeListener(this);
  }

  @Override
  public void onPageScrollStateChanged(int arg0) {

  }

  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {

  }

  @Override
  public void onPageSelected(int arg0) {
    Toast.makeText(this," Is currently number one "+(arg0+1)+" Interface ", 0).show();

  }

}