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:

[html] view
plaincopy

<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:

[html] view
plaincopy

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

[html] view
plaincopy

<?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适配器类：

[java] view
plaincopy

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:

[java] view
plaincopy

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文件：

[html] view
plaincopy

<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.需要更改适配器文件：

[java] view
plaincopy

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文件：

[java] view
plaincopy

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:

[html] view
plaincopy

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);

}



}

[java] view
plaincopy

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);

}



}

[java] view
plaincopy

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:

[java] view
plaincopy

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:

[java] view
plaincopy

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:

[java] view
plaincopy

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:

[java] view
plaincopy

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作为标题名称