Android中ViewPager的使用详解

最新推荐文章于 2025-08-09 14:26:38 发布

原创最新推荐文章于 2025-08-09 14:26:38 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

Android控件专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了ViewPager控件的使用方法，包括PagerAdapter、FragmentPagerAdapter和FragmentStatePagerAdapter等适配器的实现方式，以及如何设置缓存页面数量和添加监听事件。

ViewPager是目前比较常用的一种控件，ViewPager的使用与ListView、GridView有些相似，都需要重写适配器Adapter。ViewPager的Adapter有下面几种：

1、PagerAdapter 数据源：List<View>

将Layout布局转换为View对象

1)LayoutInflater lf = getLayoutInflater.from(this);
   lf.inflste(resource, root);
2)View.inflate(context, resource, root);

2、FragmentPagerAdapter 数据源：List<Fragment>
3、FragmentStatePagerAdapter 数据源：List<Fragment>

Adapter中常用方法：（前四种方法为必须有的方法）
1、getCount()返回所有页面的数量
2、isViewFromObject(View arg0, Object arg1)判断视图是否由对象产生
3、instantiateItem(ViewGroup container, int position)实例化界面
4、destroyItem(ViewGroup container, int position, Object object)销毁界面
5、getPageTitle(int position)返回标题信息

设置缓存页面数量

viewPager.setOffscreenPageLimit(4);

实现实例

1、Activity布局文件

<LinearLayout 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.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/tab"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_gravity="top" >
	    </android.support.v4.view.PagerTabStrip>
	    
        <!-- 与上面基本相同，同时出现上面的失效 -->
        <!-- <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>

</LinearLayout>

2、切换页面布局文件，view1、view2、view3、view4基本相同，只有显示内容不同，方便区分。

<?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/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个界面" />

</LinearLayout>

3、在Activity中实现ViewPager功能

package com.cx.viewpager;

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

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.View;

public class MainActivity extends Activity {
	private PagerTabStrip tab;
	private ViewPager pager;
	private List<View> viewLsit;
	private List<String> titleList;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		tab = (PagerTabStrip) findViewById(R.id.tab);
		pager = (ViewPager) findViewById(R.id.pager);
	
		viewLsit = new ArrayList<View>();
		titleList = new ArrayList<String>();
		
		//把布局转成View对象(上下文，布局，父组件)
		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);
		
		//将View添加到数据数组中
		viewLsit.add(view1);
		viewLsit.add(view2);
		viewLsit.add(view3);
		viewLsit.add(view4);
		
		//添加标题信息
		titleList.add("第一页");
		titleList.add("第二页");
		titleList.add("第三页");
		titleList.add("第四页");
		
		//为PagerTabStrip设置属性
		tab.setBackgroundColor(Color.YELLOW);//背景颜色
		tab.setTextColor(Color.RED);//文字颜色
		tab.setDrawFullUnderline(false);//去掉整个分割线
		tab.setTabIndicatorColor(Color.GREEN);//修改选中颜色
		
		//创建PagerAdapter的适配器
		MyPagerAdapter adapter = new MyPagerAdapter(viewLsit, titleList);
		//viewLsit加载适配器
		pager.setAdapter(adapter);
	}
}

4、重写适配器PagerAdapter

package com.cx.viewpager;

import java.util.List;

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

public class MyPagerAdapter extends PagerAdapter {
	private List<View> viewLsit;
	private List<String> titleList;
	
	public MyPagerAdapter(List<View> viewLsit, List<String> titleList){
		this.viewLsit = viewLsit;
		this.titleList = titleList;
	}

	/**
	 * 返回页卡的数量
	 */
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return viewLsit.size();
	}

	/**
	 * View是否来自于对象
	 */
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		// TODO Auto-generated method stub
		//官方做法
		return arg0 == arg1;
	}
	
	/**
	 * 实例化一个页卡
	 */
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		container.addView(viewLsit.get(position));
		return viewLsit.get(position);
	}
	
	/**
	 * 销毁一个页卡
	 */
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		container.removeView(viewLsit.get(position));
	}
	
	/**
	 * 设置页卡的标题
	 */
	@Override
	public CharSequence getPageTitle(int position) {
		// TODO Auto-generated method stub
		return titleList.get(position);
	}
}

以上代码就是使用PagerAdapter 实现ViewPager的使用，其中包含了Tab的使用，如果不需要也可以去掉相关代码。使用PagerAdapter 在显示的时候会每三个一组进行显示管理，多余的会自动销毁。

使用FragmentPagerAdapter 实现ViewPager的使用。

1、创建Fragment1、Fragment2、Fragment3、Fragment4让其分别使用view1、view2、view3、view4布局文件，例如

package com.cx.viewpager;

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) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.view1, container, false);
	}
}

2、Activity中代码与上面的基本相同，只是换了数据源和适配器。同时，在填充适配器时使用的getSupportFragmentManager()方法，需要继承FragmentActivity

//通过Fragment作为数据源
List<Fragment> fragList = new ArrayList<Fragment>();
fragList.add(new Fragment1());
fragList.add(new Fragment2());
fragList.add(new Fragment3());
fragList.add(new Fragment4());
		
//创建FragmentPagerAdapter的适配器，需要继承FragmentActivity
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);
		
//viewLsit加载适配器
pager.setAdapter(adapter);

3、重写适配器FragmentPagerAdapter

package com.cx.viewpager;

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 {
	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) {
		// TODO Auto-generated method stub
		return fragList.get(arg0);
	}
	
	@Override
	public CharSequence getPageTitle(int position) {
		// TODO Auto-generated method stub
		return titleList.get(position);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return fragList.size();
	}

}

这时，运行程序，效果会与上面的一样，不同的是当页面被隐藏时没有被销毁。你可以在Fragment4中的onDestroy()方法中打印信息，运行程序将页面滑动到4再滑到1，不会看到打印信息，说明Fragment4创建后没有销毁。如果想让其销毁可以让Adapter继承FragmentStatePagerAdapter并增加实例化和销毁方法（不需要重写）即可

@Override
public Object instantiateItem(ViewGroup arg0, int arg1) {
	// TODO Auto-generated method stub
	return super.instantiateItem(arg0, arg1);
}
	
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
	// TODO Auto-generated method stub
	super.destroyItem(container, position, object);
}

监听事件：

1、增加接口OnPageChangeListener

2、为ViewPager增加监听事件

pager.setOnPageChangeListener(this);

3、重写监听方法

@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) {
	// TODO Auto-generated method stub
	Toast.makeText(this, "当前第" + (arg0+1) + "个页面", Toast.LENGTH_SHORT).show();
}

源码下载