ViewPager及PagerTabStrip 的使用詳解

ViewPager 就是一個滑屏效果的一個控件，使用比較簡單。使用過程思路流程基本以下：

在須要添加的ViewPager的佈局文件中添加ViewPager控件--->準備好滑屏全部的View--->將這些View添加到數組ViewList中（做爲PagerAdapter的數據源），同時設置PagerTabStrip （適配器）--->PagerAdapter 的實現--->爲ViewPager設置Adapter

上代碼：

1.在須要添加的ViewPager的佈局文件中添加ViewPager控件，該控件須要引入V4包

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6     
 7     <android.support.v4.view.ViewPager
 8         android:id="@+id/viewpager"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:layout_gravity="center" >
12         
13         <android.support.v4.view.PagerTabStrip 
14             android:id="@+id/pagertab"
15             android:layout_width="wrap_content"
16             android:layout_height="wrap_content"
17             android:layout_gravity="bottom"/>
18             
19     </android.support.v4.view.ViewPager>
20 
21 </LinearLayout>

2.準備好滑屏全部的View，這裏我只作三個示例

pager1.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@color/mainList1"
 6     android:orientation="vertical" >
 7 
 8     <TextView
 9         android:id="@+id/textView1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="精品快餐"
13         android:textSize="30sp" />
14 
15 </LinearLayout>

pager2.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@color/mainList2"
 6     android:orientation="vertical" >
 7 
 8     <TextView
 9         android:id="@+id/textView1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="足料靚湯"
13         android:textSize="30sp" />
14 
15 </LinearLayout>

pager3.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@color/mainList3"
 6     android:orientation="vertical" >
 7 
 8     <TextView
 9         android:id="@+id/textView1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="飲料甜品    "
13         android:textSize="30sp" />
14 
15 </LinearLayout>

 

3.將這些View添加到數組ViewList中（做爲PagerAdapter的數據源），同時設置PagerTabStrip （適配器）

爲了使代碼不太過於渙散，這裏將後三步的代碼放在一塊兒，以方便查看：

 1 package com.robin.act;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 import com.robin.testviewpager.R;
 6 import android.app.Activity;
 7 import android.os.Bundle;
 8 import android.support.v4.view.PagerAdapter;
 9 import android.support.v4.view.PagerTabStrip;
10 import android.support.v4.view.ViewPager;
11 import android.view.LayoutInflater;
12 import android.view.View;
13 import android.view.ViewGroup;
14 
15 /**  
16  *  
17  * @author robin  
18  */
19 public class MainAct extends Activity{
20     ViewPager viewpager;
21     List<View> viewList;
22     List<String> titleList;
23     View view1,view2,view3;
24     PagerTabStrip pagerTabStrip;
25     
26     PagerAdapter adapter=new PagerAdapter() {
27         
28         @Override //創建object和view的映射
29         public boolean isViewFromObject(View view, Object object) {
30             return view==object;//由object來生成view  (key-value)
31         }
32         
33         @Override //將頁卡view添加到父容器,最後將view做爲object返回
34         public Object instantiateItem(ViewGroup container, int position) {
35             container.addView(viewList.get(position));
36             return viewList.get(position); 
37         }
38 
39         @Override //將頁卡view從父容器中移除
40         public void destroyItem(ViewGroup container, int position, Object object) {
41             container.removeView(viewList.get(position));
42         }
43         @Override //返回頁卡的數量
44         public int getCount() {
45             return viewList.size();
46         }
47         @Override //返回當前頁卡對應的標題
48         public CharSequence getPageTitle(int position) {
49             return titleList.get(position);
50         }
51     };
52     
53     
54     @Override
55     protected void onCreate(Bundle savedInstanceState) {
56         super.onCreate(savedInstanceState);
57         setContentView(R.layout.main);
58         initViewPager();
59         
60     }
61     private void initViewPager() {
62         viewpager=(ViewPager)findViewById(R.id.viewpager);
63         
64         //指示器設置
65         pagerTabStrip=(PagerTabStrip)findViewById(R.id.pagertab);
66         pagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.red));
67         pagerTabStrip.setDrawFullUnderline(true);
68         pagerTabStrip.setBackgroundColor(getResources().getColor(R.color.white));
69         pagerTabStrip.setTextSpacing(50);
70         
71         LayoutInflater inflater=LayoutInflater.from(this);
72         view1=inflater.inflate(R.layout.pager1, null);
73         view2=inflater.inflate(R.layout.pager2, null);
74         view3=inflater.inflate(R.layout.pager3, null);
75                 
76         viewList=new ArrayList<View>();
77         viewList.add(view1);
78         viewList.add(view2);
79         viewList.add(view3);
80         
81         titleList=new ArrayList<String>();
82         titleList.add("精品快餐");
83         titleList.add("足料靚湯");
84         titleList.add("飲料甜品");
85         
86         viewpager.setAdapter(adapter);
87         
88     }
89 
90 }

 

以上運行代碼便可看到效果。