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方法
public class mainactivity extends fragmentactivity {
/**
* tab标题
*/
private static final string[] title = new string[] { "头条", "房产", "另一面", "女人",
"财经", "数码", "情感", "科技" };
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
//实例化viewpager， 然后给viewpager设置adapter
viewpager pager = (viewpager)findviewbyid(r.id.pager);
fragmentpageradapter adapter = new tabpageindicatoradapter(getsupportfragmentmanager());
pager.setadapter(adapter);
//实例化tabpageindicator，然后与viewpager绑在一起（核心步骤）
tabpageindicator indicator = (tabpageindicator)findviewbyid(r.id.indicator);
indicator.setviewpager(pager);
//如果要设置监听viewpager中包含的fragment的改变(滑动切换页面)，使用onpagechangelistener为它指定一个监听器，那么不能像之前那样直接设置在viewpager上了，而要设置在indicator上，
indicator.setonpagechangelistener(new onpagechangelistener() {
@override
public void onpageselected(int arg0) {
toast.maketext(getapplicationcontext(), title[arg0], toast.length_short).show();
}
@override
public void onpagescrolled(int arg0, float arg1, int arg2) {
}
@override
public void onpagescrollstatechanged(int arg0) {
}
});
}
/**
* 定义viewpager的适配器
*/
class tabpageindicatoradapter extends fragmentpageradapter {
public tabpageindicatoradapter(fragmentmanager fm) {
super(fm);
}
@override
public fragment getitem(int position) {
//新建一个fragment来展示viewpager item的内容，并传递参数
fragment fragment = new itemfragment();
bundle args = new bundle();
args.putstring("arg", title[position]);
fragment.setarguments(args);
return fragment;
}
@override
public charsequence getpagetitle(int position) {
return title[position % title.length];
}
@override
public int getcount() {
return title.length;
}
}
}
4.定义viewpager每一个item的代码（每一个fragment）
此例只定义了一个fragment，r.layout.fragment仅定义了一个textview。在这个fragment代码中，通过bundle传递一个key-value数据，内容仅一个字符串。实际开发的时候，针对每个viewpager的item，要设计每个不同的fragment的布局、代码内容等。此例代码只做示范。
public class itemfragment extends fragment {
@override
public view oncreateview(layoutinflater inflater, viewgroup container,
bundle savedinstancestate) {
//动态找到布局文件，再从这个布局中find出textview对象
view contextview = inflater.inflate(r.layout.fragment_item, container, false);
textview mtextview = (textview) contextview.findviewbyid(r.id.textview);
//获取activity传递过来的参数
bundle mbundle = getarguments();
string title = mbundle.getstring("arg");
mtextview.settext(title);
return contextview;
}
@override
public void onactivitycreated(bundle savedinstancestate) {
super.onactivitycreated(savedinstancestate);
}
}
5.indicator的样式修改
第1步：在values/styles中添加<style>:
本例中，添加了3个<style>，其中"styledindicators"是我们需要的<style>，它其中的<item>使用了"customtabpageindicator"这个<style>，这个<style>其中的一个<item>又使用了"customtabpageindicator.text"这个<style>。
实际上可以把"styledindicators"<style>的<item>属性全部写死在"styledindicators"下面。 但这样层级分离式的写法，增强了代码的复用性，以便后期维护和功能代码增删操作。
<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>
第2步：创建<style>中使用到的drawable资源文件：
在drawable目录下添加tab_indicator.xml 和selector_tabtext.xml。
本例中使用到了自定义的drawable资源，自定义drawable一般配合上面的自定义style使用，提供图片、颜色等资源来支持自定义样式：
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" /> <item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" /> <item android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/base_tabpager_indicator_selected" /> <item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/base_tabpager_indicator_selected" /> </selector> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color="#ee2c2c" /> <item android:state_pressed="true" android:color="#ee2c2c" /> <item android:state_focused="true" android:color="#ee2c2c" /> <item android:color="@android:color/black"/> </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的代码
package com.example.viewpageindicator;
import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentactivity;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.widget.toast;
import com.viewpagerindicator.tabpageindicator;
public class mainactivity extends fragmentactivity {
/**
* tab标题
*/
private static final string[] title = new string[] { "头条", "房产", "另一面", "女人",
"财经", "数码", "情感", "科技" };
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
//viewpager的adapter
fragmentpageradapter adapter = new tabpageindicatoradapter(getsupportfragmentmanager());
viewpager pager = (viewpager)findviewbyid(r.id.pager);
pager.setadapter(adapter);
//实例化tabpageindicator然后设置viewpager与之关联
tabpageindicator indicator = (tabpageindicator)findviewbyid(r.id.indicator);
indicator.setviewpager(pager);
//如果我们要对viewpager设置监听，用indicator设置就行了
indicator.setonpagechangelistener(new onpagechangelistener() {
@override
public void onpageselected(int arg0) {
toast.maketext(getapplicationcontext(), title[arg0], toast.length_short).show();
}
@override
public void onpagescrolled(int arg0, float arg1, int arg2) {
}
@override
public void onpagescrollstatechanged(int arg0) {
}
});
}
/**
* viewpager适配器
* @author len
*
*/
class tabpageindicatoradapter extends fragmentpageradapter {
public tabpageindicatoradapter(fragmentmanager fm) {
super(fm);
}
@override
public fragment getitem(int position) {
//新建一个fragment来展示viewpager item的内容，并传递参数
fragment fragment = new itemfragment();
bundle args = new bundle();
args.putstring("arg", title[position]);
fragment.setarguments(args);
return fragment;
}
@override
public charsequence getpagetitle(int position) {
return title[position % title.length];
}
@override
public int getcount() {
return title.length;
}
}
}
我们先实例化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，布局我就不贴了，代码也比较简单，直接看代码吧
package com.example.viewpageindicator;
import android.os.bundle;
import android.support.v4.app.fragment;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.textview;
public class itemfragment extends fragment {
@override
public view oncreateview(layoutinflater inflater, viewgroup container,
bundle savedinstancestate) {
view contextview = inflater.inflate(r.layout.fragment_item, container, false);
textview mtextview = (textview) contextview.findviewbyid(r.id.textview);
//获取activity传递过来的参数
bundle mbundle = getarguments();
string title = mbundle.getstring("arg");
mtextview.settext(title);
return contextview;
}
@override
public void onactivitycreated(bundle savedinstancestate) {
super.onactivitycreated(savedinstancestate);
}
}
当然通过上面几步我们还不能对网易新闻的模仿，我们还必须简单修改其样式，有些东西我是直接从开源框架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，这只是我的个人观点。
上一篇： mysql远程登录出错的解决方法