Android实战简易教程-第十八枪（ViewPager组件详解）

对于ViewPager组件我们知道：

  1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。

  2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。

  3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

下面我们通过实例看一下ViewPager的使用。

一 实现ViewPager（数据源为List<View>）

1.先在main.xml文件中添加一个ViewPager:

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

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

</LinearLayout>

2.创建三个View:

<?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" >

    <TextView
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="25dp"
        android:text="第一页" >
    </TextView>

</LinearLayout>

<?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" >

    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二页" >
    </TextView>
    
</LinearLayout>

<?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" >

    

    <TextView

        android:id="@+id/txt3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="第三页" >

    </TextView>

    

</LinearLayout>

3.创建一个ViewPager适配器类：

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class ViewPagerAdapter extends PagerAdapter {
  private List<View> lViews=new ArrayList<View>();
  
  public ViewPagerAdapter(List<View> lViews){
    this.lViews=lViews;
  }

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

  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
    return arg0==arg1;
  }
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    container.addView(lViews.get(position));
    return lViews.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView(lViews.get(position));
  }

}

4.MainActivity.java:

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;

public class MainActivity extends ActionBarActivity {
  private ViewPager viewPager;
  private List<View> listViews=null;
  ViewPagerAdapter pagerAdapter;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    
    viewPager=(ViewPager) findViewById(R.id.pager);
    listViews=new ArrayList<View>();
    /**
     * 为Adapter创建数据源
     */
    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);
    listViews.add(view1);
    listViews.add(view2);
    listViews.add(view3);
    pagerAdapter=new ViewPagerAdapter(listViews) ;
    viewPager.setAdapter(pagerAdapter);

  }

}

5.运行实例：

可以实现翻页效果。

二 添加标题

1.我们需要更改main.xml文件：

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

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

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/strip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" >
        </android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>

</LinearLayout>

2.需要更改适配器文件：

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class ViewPagerAdapter extends PagerAdapter {
  private List<View> lViews=new ArrayList<View>();
  private List<String> titleList=new ArrayList<String>();
  
  public ViewPagerAdapter(List<View> lViews,List<String> titleList){
    this.lViews=lViews;
    this.titleList=titleList;
  }

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

  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
    return arg0==arg1;
  }
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    container.addView(lViews.get(position));
    return lViews.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView(lViews.get(position));
  }
  /**
   * 标题
   */
  @Override
  public CharSequence getPageTitle(int position) {
    // TODO Auto-generated method stub
    return titleList.get(position);
  }

}

3.需要更改MainActivity.java文件：

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;

public class MainActivity extends ActionBarActivity {
  private ViewPager viewPager;
  private List<View> listViews=null;
  ViewPagerAdapter pagerAdapter;
  PagerTabStrip pagerTabStrip;
  private List<String> titleList;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    
    viewPager=(ViewPager) findViewById(R.id.pager);
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
    listViews=new ArrayList<View>();
    titleList=new ArrayList<String>();
    titleList.add("第一页");
    titleList.add("第二页");
    titleList.add("第三页");
    /**
     * 为Adapter创建数据源
     */
    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);
    listViews.add(view1);
    listViews.add(view2);
    listViews.add(view3);
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
    viewPager.setAdapter(pagerAdapter);

  }

}

4.运行实例如下：

三 实现ViewPager(数据源为List<Fragment>)

1.首先我们要创建三个Fragment:

package com.yayun.viewpagerdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    return inflater.inflate(R.layout.view1, container, false);
  }

}

package com.yayun.viewpagerdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment2 extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    return inflater.inflate(R.layout.view2, container, false);
  }

}

package com.yayun.viewpagerdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment3 extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    return inflater.inflate(R.layout.view3, container, false);
  }

}

2.设置Adapter:

package com.yayun.viewpagerdemo;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
  List<Fragment> fragmentsList;
  List<String> titleList;

  public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
    super(fm);
    this.fragmentsList=fragmentsList;
    this.titleList=titleList;
  }

  @Override
  public Fragment getItem(int arg0) {
    // TODO Auto-generated method stub
    return fragmentsList.get(arg0);
  }

  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return fragmentsList.size();
  }
@Override
/**
 * 添加标题
 */
public CharSequence getPageTitle(int position) {
  // TODO Auto-generated method stub
  return titleList.get(position);
}

}

3.MainActivity.java:

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;

public class MainActivity extends ActionBarActivity {
  private ViewPager viewPager;
  private List<View> listViews=null;
  ViewPagerAdapter pagerAdapter;
  PagerTabStrip pagerTabStrip;
  private List<String> titleList;
  private List<Fragment> fragmentsList;
  MyFragmentPagerAdapter myFragmentPagerAdapter;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    
    viewPager=(ViewPager) findViewById(R.id.pager);
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
    
    /**
     * 设置PagerTabStrip属性
     */
    pagerTabStrip.setBackgroundColor(Color.GREEN);
    pagerTabStrip.setDrawFullUnderline(false);
    pagerTabStrip.setTextColor(Color.WHITE);
    listViews=new ArrayList<View>();
    titleList=new ArrayList<String>();
    fragmentsList=new ArrayList<Fragment>();
    fragmentsList.add(new Fragment1());
    fragmentsList.add(new Fragment2());
    fragmentsList.add(new Fragment3());
    titleList.add("第一页");
    titleList.add("第二页");
    titleList.add("第三页");
    /**
     * 为Adapter创建数据源
     */
    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);
    listViews.add(view1);
    listViews.add(view2);
    listViews.add(view3);
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
    myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
    //viewPager.setAdapter(pagerAdapter);
    viewPager.setAdapter(myFragmentPagerAdapter);

  }

}

4.运行实例：

这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。

四 实现ViewPager(数据源为List<Fragment>实现FargmentStatePagerAdapter)常用

改变Adapter:

package com.yayun.viewpagerdemo;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.View;

public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {
  List<Fragment> fragmentsList;
  List<String> titleList;

  public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
    super(fm);
    this.fragmentsList=fragmentsList;
    this.titleList=titleList;
  }

  @Override
  public Fragment getItem(int arg0) {
    // TODO Auto-generated method stub
    return fragmentsList.get(arg0);
  }

  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return fragmentsList.size();
  }
@Override
/**
 * 添加标题
 */
public CharSequence getPageTitle(int position) {
  // TODO Auto-generated method stub
  return titleList.get(position);
}
@Override
public Object instantiateItem(View container, int position) {
  // TODO Auto-generated method stub
  return super.instantiateItem(container, position);
}
@Override
public void destroyItem(View container, int position, Object object) {
  // TODO Auto-generated method stub
  super.destroyItem(container, position, object);
}

}

将MainActivity.java中的Adapter换一下即可，它可以实现页卡的创建和销毁。

五  onPagerChangeListener 监听使用

只需要修改MainActivity.java:

package com.yayun.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity implements OnPageChangeListener {
  private ViewPager viewPager;
  private List<View> listViews=null;
  ViewPagerAdapter pagerAdapter;
  PagerTabStrip pagerTabStrip;
  private List<String> titleList;
  private List<Fragment> fragmentsList;
  MyFragmentPagerAdapter myFragmentPagerAdapter;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    
    viewPager=(ViewPager) findViewById(R.id.pager);
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
    
    /**
     * 设置PagerTabStrip属性
     */
    pagerTabStrip.setBackgroundColor(Color.GREEN);
    pagerTabStrip.setDrawFullUnderline(false);
    pagerTabStrip.setTextColor(Color.WHITE);
    listViews=new ArrayList<View>();
    titleList=new ArrayList<String>();
    fragmentsList=new ArrayList<Fragment>();
    fragmentsList.add(new Fragment1());
    fragmentsList.add(new Fragment2());
    fragmentsList.add(new Fragment3());
    titleList.add("第一页");
    titleList.add("第二页");
    titleList.add("第三页");
    /**
     * 为Adapter创建数据源
     */
    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);
    listViews.add(view1);
    listViews.add(view2);
    listViews.add(view3);
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
    myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
    //viewPager.setAdapter(pagerAdapter);
    viewPager.setAdapter(myFragmentPagerAdapter);
    viewPager.setOnPageChangeListener(this);//加载监听器

  }

  @Override
  public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub
    
  }

  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {
    // TODO Auto-generated method stub
    
  }

  @Override
  public void onPageSelected(int arg0) {
    Toast.makeText(this, "当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show();
    
  }

}

运行实例即可以显示当前页面标签。

总结

1.android.support.v4.view.ViewPager全名；

2.android.support.v4.view.PagerTabStrip作为标题名称

喜欢的朋友可以关注，谢谢