Android——Tab页面手势滑屏之ViewPager

           上篇文章说的是实现页面的抽象，也说明了一下背景，是要做一个左右滑屏的功能，这篇文章小编就说一下如何实现tab页的左右滑屏。页面包括一个主界面，中间的公共部分的抽象就不再赘述，还包括滑屏的四个子页面，针对了不同的功能。

主界面中盛放四个部分页面的地方——ViewPager：

<android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
</android.support.v4.view.ViewPager>

控制它的Activity：

1、首先定义页面控件：tab、button、ViewPager、PagerAdapter

            ViewPager：实现左右切换当前的View

            PagerAdapter：提供适配器，该适配器能填充页面

private RequestQueue mQueue;
private ViewPager mViewPager;
private PagerAdapter mAdapter;
private List<View> mViews = new ArrayList<View>();

//定义四个LinearLayout
private LinearLayout mTabPersonInfo;
private LinearLayout mTabCourse;
private LinearLayout mTabExperience;
private LinearLayout mTabEvaluate;

//定义四个ImageButton
private ImageButton mPersonInfoImg;
private ImageButton mCourseImg;
private ImageButton mExperienceImg;
private ImageButton mEvaluateImg;

2、初始化页面

LayoutInflater：用来找res/layout/下的xml布局文件，并且实例化。作用类似于findViewById()。是找xml布局文件下的具体的widget控件（Button、TextView等）。

  inflate函数：从指定的XML资源文件中填充一个新的视图层次结构。

作用：填充一个新的视图层次结构从指定的XML资源文件中

        reSource：View的layout的ID

        root： 生成的层次结构的根视图

        return填充的层次结构的根视图。如果参数root提供了，那么root就是根视图；否则填充的XML文件的根就是根视图。

 

//初始化页面
private void initView(){
	
	txtAge=(TextView)findViewById(R.id.txtAge);
	
	mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
	// tabs
	mTabPersonInfo = (LinearLayout) findViewById(R.id.id_tab_personinfo);
	mTabCourse = (LinearLayout) findViewById(R.id.id_tab_course);
	mTabExperience = (LinearLayout) findViewById(R.id.id_tab_workexperience);
	mTabEvaluate = (LinearLayout) findViewById(R.id.id_tab_evaluate);
	// ImageButton
	mPersonInfoImg = (ImageButton) findViewById(R.id.id_tab_personinfo_img);
	mCourseImg = (ImageButton) findViewById(R.id.id_tab_course_img);
	mExperienceImg = (ImageButton) findViewById(R.id.id_tab_workexperience_img);
	mEvaluateImg = (ImageButton) findViewById(R.id.id_tab_evaluate_img);

	//实例化主页面的布局文件
	LayoutInflater mInflater = LayoutInflater.from(this);
	//将四个界面层次结构填充到此xml文件下，默认为主界面为根目录
	View tabpersoninfo = mInflater.inflate(R.layout.activity_teacher_personinfo, null);
	View tabcourse = mInflater.inflate(R.layout.activity_teacher_course, null);
	View tabexperience = mInflater.inflate(R.layout.activity_teacher_experience, null);
	View tabevaluate = mInflater.inflate(R.layout.activity_teacher_evaluate, null);
	mViews.add(tabpersoninfo);
	mViews.add(tabcourse);
	mViews.add(tabexperience);
	mViews.add(tabevaluate);

	mAdapter = new PagerAdapter()
	{
		@Override
		public void destroyItem(ViewGroup container, int position,
				Object object)
		{
			container.removeView(mViews.get(position));
		}

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

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

		@Override
		public int getCount()
		{
			return mViews.size();
		}
	};
	mViewPager.setAdapter(mAdapter);
}

2、设置监听器：绑定onclick事件

private void initEvents(){
	//设置头标点击监听器
	mPersonInfoImg.setOnClickListener(this);
	mCourseImg.setOnClickListener(this);
	mExperienceImg.setOnClickListener(this);
	mEvaluateImg.setOnClickListener(this);

	mViewPager.setOnPageChangeListener(new OnPageChangeListener()
	{

		@Override
		public void onPageSelected(int arg0)
		{
			int currentItem = mViewPager.getCurrentItem();
			resetImg();
			switch (currentItem)
			{
			case 0:
				mPersonInfoImg.setImageResource(R.drawable.back);
				break;
			case 1:
				mCourseImg.setImageResource(R.drawable.back);
				break;
			case 2:
				mExperienceImg.setImageResource(R.drawable.back);
				break;
			case 3:
				mEvaluateImg.setImageResource(R.drawable.back);
				break;
			}
		}

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

		}
		@Override
		public void onPageScrollStateChanged(int arg0)
		{

		}
	});
}

3、onclick事件：来设置当前显示的页面

@Override
public void onClick(View v) {
	resetImg();
	switch (v.getId())
	{
		case R.id.id_tab_personinfo:
			mViewPager.setCurrentItem(0);
			mPersonInfoImg.setImageResource(R.drawable.back);
			break;
		case R.id.id_tab_course:
			mViewPager.setCurrentItem(1);
			mCourseImg.setImageResource(R.drawable.back);
			break;
		case R.id.id_tab_workexperience:
			mViewPager.setCurrentItem(2);
			mExperienceImg.setImageResource(R.drawable.back);
			break;
		case R.id.id_tab_evaluate:
			mViewPager.setCurrentItem(3);
			mEvaluateImg.setImageResource(R.drawable.back);
			break;
		default:
			break;
	}
}

4、在onCreate事件中启动线程

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	requestWindowFeature(Window.FEATURE_NO_TITLE);
	setContentView(R.layout.teacher_main);		
	initView();
	initEvents();
}

                    手机滑屏其实很简单，就是利用适配器来盛放我们的子页面，然后通过监听事件来显示当前页面。