Android应用中使用ViewPager和ViewPager指示器来制作Tab标签

一、viewpageindicator开源框架的基本用法
我们先得去github上面下载这个库，下载地址：https://github.com/jakewharton/android-viewpagerindicator，下载下来之后你可以运行例子，来看看我们需要什么样的效果，然后在此基础上改成我们自己想要的效果

1.如何使用开源框架
第1步：improt library项目
第2步：导入library进我们自己新建的项目
从github上download下来这个zip包之后，里面会有一个library文件，是库工程，还有一个sample，是作者提供的例子（将sample这个项目import，可以看到作者提供的各种样式的indicator，作为参考）。如果要在作者例子的基础上自己开发样式，需要将library项目import进eclipse（library是库工程，我们需要将其作为我们自己项目的依赖库）。然后创建一个新项目，新建的项目libs目录下面有android-support-v4.jar，这个必须删除，因为viewpageindicator里面有这个库，我们项目中不允许两个android-support-v4.jar，不删除我们的项目是不能编译的。右键项目—properties—android选项卡—add—选择library库工程—ok，导入完毕。

2.mainactivity布局
布局中仅一个viewpager，一个viewpagerindicator.（本例使用的是其中一种viewpagerindicator：tabpagerindicator）
注意它应该紧邻在viewpager的上方或下方，总之要挨在一起。

<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:orientation="vertical" >

 <com.viewpagerindicator.tabpageindicator
  android:id="@+id/indicator"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/base_action_bar_bg" >
 </com.viewpagerindicator.tabpageindicator>

 <android.support.v4.view.viewpager
  android:id="@+id/pager"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1" >
 </android.support.v4.view.viewpager>

</linearlayout>

3.mainactivity代码
第1步：实例化viewpager，给viewpager设置adapter
第2步：实例化tabpageindicator，tabpageindicator与viewpager绑在一起
第3步：在indicator上设置onpagerchangelistner监听器
第4步：定义adapter（继承fragmentpageradapter）

先实例化viewpager,然后实例化tabpageindicator，然后设置tabpageindicator和viewpager关联，就是调用tabpageindicator的setviewpager(viewpager view)方法，这样子就实现了点击上面的tab，下面的viewpager切换；滑动viewpager，上面的tab跟着切换。
viewpager的每一个item我们使用的是fragment，使用fragment可以使布局更加灵活一点，建议多用fragment。
设置监听的时候，需要用indicator提供的onpagerchangelistener方法

1. public class mainactivity extends fragmentactivity { 
2.  /** 
3.   * tab标题 
4.   */ 
5.  private static final string[] title = new string[] { "头条", "房产", "另一面", "女人", 
6.               "财经", "数码", "情感", "科技" }; 
7.  
8.  @override 
9.  protected void oncreate(bundle savedinstancestate) { 
10.   super.oncreate(savedinstancestate); 
11.   setcontentview(r.layout.activity_main); 
12.  
13.   //实例化viewpager， 然后给viewpager设置adapter 
14.   viewpager pager = (viewpager)findviewbyid(r.id.pager); 
15.   fragmentpageradapter adapter = new tabpageindicatoradapter(getsupportfragmentmanager()); 
16.   pager.setadapter(adapter); 
17.  
18.   //实例化tabpageindicator，然后与viewpager绑在一起（核心步骤） 
19.   tabpageindicator indicator = (tabpageindicator)findviewbyid(r.id.indicator); 
20.   indicator.setviewpager(pager); 
21.  
22.   //如果要设置监听viewpager中包含的fragment的改变(滑动切换页面)，使用onpagechangelistener为它指定一个监听器，那么不能像之前那样直接设置在viewpager上了，而要设置在indicator上， 
23.   indicator.setonpagechangelistener(new onpagechangelistener() { 
24.  
25.    @override 
26.    public void onpageselected(int arg0) { 
27.     toast.maketext(getapplicationcontext(), title[arg0], toast.length_short).show(); 
28.    } 
29.  
30.    @override 
31.    public void onpagescrolled(int arg0, float arg1, int arg2) { 
32.  
33.    } 
34.  
35.    @override 
36.    public void onpagescrollstatechanged(int arg0) { 
37.  
38.    } 
39.   }); 
40.  
41.  } 
42.  
43.  /** 
44.   * 定义viewpager的适配器 
45.   */ 
46.  class tabpageindicatoradapter extends fragmentpageradapter { 
47.   public tabpageindicatoradapter(fragmentmanager fm) { 
48.    super(fm); 
49.   } 
50.  
51.   @override 
52.   public fragment getitem(int position) { 
53.    //新建一个fragment来展示viewpager item的内容，并传递参数 
54.    fragment fragment = new itemfragment(); 
55.    bundle args = new bundle(); 
56.    args.putstring("arg", title[position]); 
57.    fragment.setarguments(args); 
58.  
59.    return fragment; 
60.   } 
61.  
62.   @override 
63.   public charsequence getpagetitle(int position) { 
64.    return title[position % title.length]; 
65.   } 
66.  
67.   @override 
68.   public int getcount() { 
69.    return title.length; 
70.   } 
71.  } 
72. } 

4.定义viewpager每一个item的代码（每一个fragment）
此例只定义了一个fragment，r.layout.fragment仅定义了一个textview。在这个fragment代码中，通过bundle传递一个key-value数据，内容仅一个字符串。实际开发的时候，针对每个viewpager的item，要设计每个不同的fragment的布局、代码内容等。此例代码只做示范。

1. public class itemfragment extends fragment { 
2.  
3.  @override 
4.  public view oncreateview(layoutinflater inflater, viewgroup container, 
5.    bundle savedinstancestate) { 
6.  
7.   //动态找到布局文件，再从这个布局中find出textview对象 
8.   view contextview = inflater.inflate(r.layout.fragment_item, container, false); 
9.   textview mtextview = (textview) contextview.findviewbyid(r.id.textview); 
10.  
11.   //获取activity传递过来的参数 
12.   bundle mbundle = getarguments(); 
13.   string title = mbundle.getstring("arg"); 
14.  
15.   mtextview.settext(title); 
16.  
17.   return contextview; 
18.  } 
19.  
20.  @override 
21.  public void onactivitycreated(bundle savedinstancestate) { 
22.   super.onactivitycreated(savedinstancestate); 
23.  } 
24. } 

5.indicator的样式修改

第1步：在values/styles中添加<style>:
本例中，添加了3个<style>，其中"styledindicators"是我们需要的<style>，它其中的<item>使用了"customtabpageindicator"这个<style>，这个<style>其中的一个<item>又使用了"customtabpageindicator.text"这个<style>。
实际上可以把"styledindicators"<style>的<item>属性全部写死在"styledindicators"下面。 但这样层级分离式的写法，增强了代码的复用性，以便后期维护和功能代码增删操作。

1. <style name="styledindicators" parent="@android:style/theme.light"> 
2.  <item name="vpitabpageindicatorstyle">@style/customtabpageindicator</item> 
3. </style> 
4.  
5. <style name="customtabpageindicator" parent="widget.tabpageindicator"> 
6.  <item name="android:background">@drawable/tab_indicator</item> 
7.  <item name="android:textappearance">@style/customtabpageindicator.text</item> 
8.  <item name="android:textsize">14sp</item> 
9.  <item name="android:dividerpadding">8dp</item> 
10.  <item name="android:showdividers">middle</item> 
11.  <item name="android:paddingleft">10dp</item> 
12.  <item name="android:paddingright">10dp</item> 
13.  <item name="android:fadingedge">horizontal</item> 
14.  <item name="android:fadingedgelength">8dp</item> 
15. </style> 
16.  
17. <style name="customtabpageindicator.text" parent="android:textappearance.medium"> 
18.  <item name="android:typeface">monospace</item> 
19.  <item name="android:textcolor">@drawable/selector_tabtext</item> 
20. </style> 

第2步：创建<style>中使用到的drawable资源文件：

在drawable目录下添加tab_indicator.xml 和selector_tabtext.xml。
本例中使用到了自定义的drawable资源，自定义drawable一般配合上面的自定义style使用，提供图片、颜色等资源来支持自定义样式：

1. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
2.  <item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" /> 
3.  <item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />  
4.  <item android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/base_tabpager_indicator_selected" /> 
5.  <item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/base_tabpager_indicator_selected" /> 
6. </selector> 
7.  
8. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
9.  <item android:state_selected="true" android:color="#ee2c2c" /> 
10.  <item android:state_pressed="true" android:color="#ee2c2c" /> 
11.  <item android:state_focused="true" android:color="#ee2c2c" /> 
12.  <item android:color="@android:color/black"/> 
13. </selector> 

第3步：在manifest中改用我们自定义的样式：
本例中直接在application上修改，也可以单独修改一个activity

<application
 android:allowbackup="true"
 android:icon="@drawable/ic_launcher"
 android:label="@string/app_name"
 android:theme="@style/styledindicators" >

   
二、viewpageindicator 和 viewpager 仿网易新闻客户端tab标签
下面我们来介绍主要代码的编写了，先看布局文件，上面一个tabpageindicator，下面一个viewpager，还是很简单的布局咯

<linearlayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">

 <com.viewpagerindicator.tabpageindicator
  android:id="@+id/indicator"
  android:background="@drawable/base_action_bar_bg"
  android:layout_height="wrap_content"
  android:layout_width="fill_parent"
  />
 <android.support.v4.view.viewpager
  android:id="@+id/pager"
  android:layout_width="fill_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  />

</linearlayout>

mainactivity的代码

1. package com.example.viewpageindicator; 
2.   
3. import android.os.bundle; 
4. import android.support.v4.app.fragment; 
5. import android.support.v4.app.fragmentactivity; 
6. import android.support.v4.app.fragmentmanager; 
7. import android.support.v4.app.fragmentpageradapter; 
8. import android.support.v4.view.viewpager; 
9. import android.support.v4.view.viewpager.onpagechangelistener; 
10. import android.widget.toast; 
11.   
12. import com.viewpagerindicator.tabpageindicator; 
13.   
14. public class mainactivity extends fragmentactivity { 
15.  /** 
16.   * tab标题 
17.   */ 
18.  private static final string[] title = new string[] { "头条", "房产", "另一面", "女人", 
19.               "财经", "数码", "情感", "科技" }; 
20.   
21.  @override 
22.  protected void oncreate(bundle savedinstancestate) { 
23.   super.oncreate(savedinstancestate); 
24.   setcontentview(r.layout.activity_main); 
25.     
26.   //viewpager的adapter 
27.   fragmentpageradapter adapter = new tabpageindicatoradapter(getsupportfragmentmanager());  
28.   viewpager pager = (viewpager)findviewbyid(r.id.pager); 
29.   pager.setadapter(adapter); 
30.   
31.   //实例化tabpageindicator然后设置viewpager与之关联 
32.   tabpageindicator indicator = (tabpageindicator)findviewbyid(r.id.indicator); 
33.   indicator.setviewpager(pager); 
34.     
35.   //如果我们要对viewpager设置监听，用indicator设置就行了 
36.   indicator.setonpagechangelistener(new onpagechangelistener() { 
37.      
38.    @override 
39.    public void onpageselected(int arg0) { 
40.     toast.maketext(getapplicationcontext(), title[arg0], toast.length_short).show(); 
41.    } 
42.      
43.    @override 
44.    public void onpagescrolled(int arg0, float arg1, int arg2) { 
45.       
46.    } 
47.      
48.    @override 
49.    public void onpagescrollstatechanged(int arg0) { 
50.       
51.    } 
52.   }); 
53.     
54.  } 
55.   
56.    
57.  /** 
58.   * viewpager适配器 
59.   * @author len 
60.   * 
61.   */ 
62.  class tabpageindicatoradapter extends fragmentpageradapter { 
63.   public tabpageindicatoradapter(fragmentmanager fm) { 
64.    super(fm); 
65.   } 
66.   
67.   @override 
68.   public fragment getitem(int position) { 
69.    //新建一个fragment来展示viewpager item的内容，并传递参数 
70.    fragment fragment = new itemfragment(); 
71.    bundle args = new bundle(); 
72.    args.putstring("arg", title[position]); 
73.    fragment.setarguments(args); 
74.      
75.    return fragment; 
76.   } 
77.   
78.   @override 
79.   public charsequence getpagetitle(int position) { 
80.    return title[position % title.length]; 
81.   } 
82.   
83.   @override 
84.   public int getcount() { 
85.    return title.length; 
86.   } 
87.  } 
88.   
89. } 

我们先实例化viewpager,然后实例化tabpageindicator，并且要设置tabpageindicator和viewpager关联，就是调用tabpageindicator的setviewpager(viewpager view)方法，这样子我们就实现了点击上面的tab，下面的viewpager切换，滑动viewpager上面的tab跟着切换，viewpager的每一个item我们使用的是fragment，使用fragment可以使我们的布局更加灵活一点，所以建议大家多用用fragment，你会发现他真的很好用，上面还有一点需要注意的地方，当我们需要给viewpager设置监听的时候，我们之前设置onpagechangelistener直接用viewpager.setonpagechangelistener,而现在我们不能这样子了，tabpageindicator提供了设置onpagechangelistener的方法，我们需要调用tabpageindicator.setonpagechangelistener来设置监听

 viewpager的item，也就是fragment，我这里只用了一个textview来显示从mainactivity传递过来的tab的标题，只是为了模拟平常我们实际使用中，从activity传递参数给fragment，布局我就不贴了，代码也比较简单，直接看代码吧

1. package com.example.viewpageindicator; 
2.   
3. import android.os.bundle; 
4. import android.support.v4.app.fragment; 
5. import android.view.layoutinflater; 
6. import android.view.view; 
7. import android.view.viewgroup; 
8. import android.widget.textview; 
9.   
10.   
11. public class itemfragment extends fragment { 
12.   
13.  @override 
14.  public view oncreateview(layoutinflater inflater, viewgroup container, 
15.    bundle savedinstancestate) { 
16.     
17.   view contextview = inflater.inflate(r.layout.fragment_item, container, false);  
18.   textview mtextview = (textview) contextview.findviewbyid(r.id.textview); 
19.     
20.   //获取activity传递过来的参数 
21.   bundle mbundle = getarguments(); 
22.   string title = mbundle.getstring("arg"); 
23.     
24.   mtextview.settext(title); 
25.     
26.   return contextview; 
27.  } 
28.   
29.  @override 
30.  public void onactivitycreated(bundle savedinstancestate) { 
31.   super.onactivitycreated(savedinstancestate); 
32.  } 
33.   
34. } 

当然通过上面几步我们还不能对网易新闻的模仿，我们还必须简单修改其样式，有些东西我是直接从开源框架actionbarsherlock 和 viewpager 仿网易新闻客户端拿出来的，不过这里的样式修改比用viewpageindicator简单多了，样式如下

<style name="styledindicators" parent="@android:style/theme.light">
 <item name="vpitabpageindicatorstyle">@style/customtabpageindicator</item>
</style>

<style name="customtabpageindicator" parent="widget.tabpageindicator">
 <item name="android:background">@drawable/tab_indicator</item>
 <item name="android:textappearance">@style/customtabpageindicator.text</item>
 <item name="android:textsize">14sp</item>
 <item name="android:dividerpadding">8dp</item>
 <item name="android:showdividers">middle</item>
 <item name="android:paddingleft">10dp</item>
 <item name="android:paddingright">10dp</item>
 <item name="android:fadingedge">horizontal</item>
 <item name="android:fadingedgelength">8dp</item>
</style>

<style name="customtabpageindicator.text" parent="android:textappearance.medium">
 <item name="android:typeface">monospace</item>
 <item name="android:textcolor">@drawable/selector_tabtext</item>
</style>

通过上面简单的几步我们就实现了对网易新闻的模仿，接下来我们运行下项目看下效果

 

三、总结
用viewpageindicator实现这样子的tab标签很容易，而且viewpageindicator里面还有各种的指示器，相对于用actionbarsherlock来实现，viewpageindicator更加灵活，而且修改actionbarsherlock的样式比较复杂，如果你的项目中有用到actionbarsherlock这个库，你可以使用来实现tab分页，如果tab上面还加导航条，actionbarsherlock只能使用actionbar来实现咯，而使用viewpageindicator我们可以更加灵活的使用自己的布局，我们我还是推荐使用viewpageindicator，这只是我的个人观点。