ViewPager及PagerTabStrip 的使用详解

ViewPager 就是一个滑屏效果的一个控件，使用比较简单。使用过程思路流程基本如下：

在需要添加的ViewPager的布局文件中添加ViewPager控件--->准备好滑屏所有的View--->将这些View添加到数组ViewList中（作为PagerAdapter的数据源），同时设置PagerTabStrip （适配器）--->PagerAdapter 的实现--->为ViewPager设置Adapter

上代码：

1.在需要添加的ViewPager的布局文件中添加ViewPager控件，该控件需要引入V4包

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

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

         <android.support.v4.view.PagerTabStrip
             android:id="@+id/pagertab"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"/>

     </android.support.v4.view.ViewPager>

 </LinearLayout>

2.准备好滑屏所有的View，这里我只做三个示例

pager1.xml

 <?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:background="@color/mainList1"
     android:orientation="vertical" >

     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="精品快餐"
         android:textSize="30sp" />

 </LinearLayout>

pager2.xml

 <?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:background="@color/mainList2"
     android:orientation="vertical" >

     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="足料靓汤"
         android:textSize="30sp" />

 </LinearLayout>

pager3.xml

 <?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:background="@color/mainList3"
     android:orientation="vertical" >

     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="饮料甜品    "
         android:textSize="30sp" />

 </LinearLayout>

3.将这些View添加到数组ViewList中（作为PagerAdapter的数据源），同时设置PagerTabStrip （适配器）

为了使代码不太过于涣散，这里将后三步的代码放在一起，以方便查看：

 package com.robin.act;

 import java.util.ArrayList;
 import java.util.List;
 import com.robin.testviewpager.R;
 import android.app.Activity;
 import android.os.Bundle;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.PagerTabStrip;
 import android.support.v4.view.ViewPager;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 /**
  *
  * @author robin
  */
 public class MainAct extends Activity{
     ViewPager viewpager;
     List<View> viewList;
     List<String> titleList;
     View view1,view2,view3;
     PagerTabStrip pagerTabStrip;

     PagerAdapter adapter=new PagerAdapter() {

         @Override //建立object和view的映射
         public boolean isViewFromObject(View view, Object object) {
             return view==object;//由object来生成view  (key-value)
         }

         @Override //将页卡view添加到父容器,最后将view作为object返回
         public Object instantiateItem(ViewGroup container, int position) {
             container.addView(viewList.get(position));
             return viewList.get(position);
         }

         @Override //将页卡view从父容器中移除
         public void destroyItem(ViewGroup container, int position, Object object) {
             container.removeView(viewList.get(position));
         }
         @Override //返回页卡的数量
         public int getCount() {
             return viewList.size();
         }
         @Override //返回当前页卡对应的标题
         public CharSequence getPageTitle(int position) {
             return titleList.get(position);
         }
     };

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         initViewPager();

     }
     private void initViewPager() {
         viewpager=(ViewPager)findViewById(R.id.viewpager);

         //指示器设置
         pagerTabStrip=(PagerTabStrip)findViewById(R.id.pagertab);
         pagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.red));
         pagerTabStrip.setDrawFullUnderline(true);
         pagerTabStrip.setBackgroundColor(getResources().getColor(R.color.white));
         pagerTabStrip.setTextSpacing(50);

         LayoutInflater inflater=LayoutInflater.from(this);
         view1=inflater.inflate(R.layout.pager1, null);
         view2=inflater.inflate(R.layout.pager2, null);
         view3=inflater.inflate(R.layout.pager3, null);

         viewList=new ArrayList<View>();
         viewList.add(view1);
         viewList.add(view2);
         viewList.add(view3);

         titleList=new ArrayList<String>();
         titleList.add("精品快餐");
         titleList.add("足料靓汤");
         titleList.add("饮料甜品");

         viewpager.setAdapter(adapter);

     }

 }

以上运行代码即可看到效果。