Android开发学习之使用ViewPager制作可滑动的Tab

在昨天的文章中，我们使用ViewPager制作了一个简单的滑动切换的例子。今天让我们在昨天的基础之上，利用ViewPager来制作一个可以滑动的Tab。要实现这样的功能，除了ViewPager外，我们还需要一个PagerTabStrip来配合使用。简单说一下PagerTabStrip，Google官方描述为：PagerTabStrip是当前，未来和以前的页面的交互指标ViewPager。它旨在用作ViewPager插件在XML布局的子图。添加为ViewPager的孩子在你的布局文件，并设置其Android：layout_gravity到顶部或底部的钉选到ViewPager的顶部或底部。从每个页面的标题是由方法提供 getPageTitle（INT）在提供给ViewPager的适配器。这段话的大致意思就是说，PagerTabStrip是一个ViewPager的子控件，不能单独使用。通过layout_gravity属性来控制它显示的位置。使用getPageTitle()方法返回页面的标题。通过对这段话的理解我们可以设计出下面的布局代码：

package com.Android.ViewPagerTab;import java.util.ArrayList;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;public class ViewPagerAdapter extends PagerAdapter{	//存放View的数组	private ArrayList Views;	//存放Title的数组	private ArrayList Titles;			public ViewPagerAdapter(ArrayList Views,ArrayList Titles)	{		this.Views=Views;		this.Titles=Titles;	}		//获取PageTitle	@Override	public CharSequence getPageTitle(int position) 	{		 return Titles.get(position);	}		@Override	public void destroyItem(View container, int position, Object object) 	{        ((ViewPager)container).removeView(Views.get(position));	}	@Override	public Object instantiateItem(View container, int position) 	{		((ViewPager)container).addView(Views.get(position),0);		return Views.get(position);	}	@Override	public int getCount() 	{		if(Views!=null)		{	           return Views.size();		}		return 0;	}	@Override	public boolean isViewFromObject(View view, Object object) 	{		return (view==object);	}}

到目前为止，适配器和界面都已经编写完成了，那么接下来，我们需要填充适配器，通过构造函数，我们知道，我们需要一个Views和Titles。对于Titles我们只需要写入一些字符串就可以了。对于Views，我们需要创建一些界面布局代码，简单的代码如下：

现在我们来编写主要的逻辑代码：

package com.Android.ViewPagerTab;import java.util.ArrayList;import android.os.Bundle;import android.app.Activity;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.Window;public class MainActivity extends Activity implements OnPageChangeListener {	//存放view的数组	private ArrayList Views;	//适配器类	private ViewPagerAdapter mAdapter;	//存放标题的数组	private ArrayList Titles;	//PagerTabStrip	private PagerTabStrip PagerTab;	//ViewPager	private ViewPager mViewPager;	@Override	protected void onCreate(Bundle savedInstanceState) 	{		super.onCreate(savedInstanceState);		requestWindowFeature(Window.FEATURE_NO_TITLE);		setContentView(R.layout.activity_main);		//取得ViewPager实例		mViewPager=(ViewPager)findViewById(R.id.ViewPager);		//取得ViewTabStrip实例		PagerTab=(PagerTabStrip)findViewById(R.id.PagerTab);		//设置Tab选中时的颜色		PagerTab.setTabIndicatorColor(getResources().getColor(R.color.black));		//设置Tab是否显示下划线		PagerTab.setDrawFullUnderline(true);		//设置Tab背景色		PagerTab.setBackgroundColor(getResources().getColor(R.color.white));		//设置Tab间的距离？我感觉是这样		PagerTab.setTextSpacing(50);						//初始化Views		Views=new ArrayList();		LayoutInflater Inflater=LayoutInflater.from(this);		Views.add(Inflater.inflate(R.layout.activity_tab1, null));		Views.add(Inflater.inflate(R.layout.activity_tab2, null));		Views.add(Inflater.inflate(R.layout.activity_tab3, null));				//初始化Titles		Titles=new ArrayList();		Titles.add("Tab1");		Titles.add("Tab2");		Titles.add("Tab3");				//初始化适配器		mAdapter=new ViewPagerAdapter(Views,Titles);		mViewPager.setAdapter(mAdapter);				//默认显示第二项		SetTab(1);	}	public void SetTab(int index)	{		switch(index)		{		  case 0:			  mViewPager.setCurrentItem(0);			  break;		  case 1:			  mViewPager.setCurrentItem(1);			  break;		  case 2:			  mViewPager.setCurrentItem(2);			  break;		}			}	@Override	public boolean onCreateOptionsMenu(Menu menu) {		// Inflate the menu; this adds items to the action bar if it is present.		getMenuInflater().inflate(R.menu.main, menu);		return true;	}	@Override	public void onPageScrollStateChanged(int arg0) {		// TODO 自动生成的方法存根			}	@Override	public void onPageScrolled(int arg0, float arg1, int arg2) {		// TODO 自动生成的方法存根			}	@Override	public void onPageSelected(int position) 	{		SetTab(position);	}}