使用ViewPagerIndicator结合ViewPager实现网易新闻客户端的Tab标签效果

【转载，请注明出处】，博客链接：http://blog.csdn.net/jxnk25/article/details/50590596

在最近的项目中，我们开发是新闻客户端中，有很多Tab标签，有很多实现方式，我使用的是一个开源控件ViewPageIndicator，ViewPageIndicator就是ViewPger指示器，使用ViewPageIndicator集合Viewpager来实现网易新闻客户端的Tab标签效果。

ViewPageIndicator就是一个分页指示器，一个应用上有很多Tab，使用ViewPageIndicator都可以实现，并且这个开源控件很多公司也都在使用中。

代码未行，效果先上：

使用步骤：

方式一：

1.在我们程序中直接读入ViewPageIndicator的库（Github上面下载这个库，下载地址：https://github.com/JakeWharton/Android-ViewPagerIndicator）

下载下来后，我们打开压缩文件，找到library，将它作为第三方库引入到我们的应用中。

下面我是以AS作为案例引入到我们的程序中,点击导入ImportModule，找到ViewPageIndicator的库所在的文件夹

第一步：找到ViewPageIndicator的library

第二步：导入到AS中

第三步：将ViewPageIndicator的library作为项目依赖库

选择我们刚刚导入的ViewPageIndicator的librar，点击ok，等待构建完成就可以了。

方式二：

步骤：

（1）在Gradle Scripts下面的第一个build.gradle，添加如下代码(添加标记):

buildscript {
    repositories {
 maven { url "http://dl.bintray.com/populov/maven" }
        mavenCentral()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0'

// NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
}
}
allprojects {
    repositories {
 maven { url "http://dl.bintray.com/populov/maven" }
        mavenCentral()
        jcenter()
    }
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

（2）在Gradle Scripts下面的第二个build.gradle，添加如下代码:

dependencies {
compile 'com.viewpagerindicator:library:2.4.1@aar'
}
（3）同步一下即可

MainActivity代码（MainActvity必须继承FragmentActivity）

第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 {private static final String[] ContentTitle = new String[] { "最新", "销量",            "佣金" };       //实例化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的适配器

/** * Created by xhb on 2016/1/18. * 文章界面的Fragment适配器 */public class TabPageIndicatorAdapter extends FragmentStatePagerAdapter {    //fragments集合    private List<Fragment> fragments;    //标题    private String[] title;    public TabPageIndicatorAdapter(FragmentManager fm, List<Fragment> fragments, String[] title) {        super(fm);        this.fragments = fragments;        this.title = title;    }    @Override    public Fragment getItem(int position) {        return fragments.get(position);    }    @Override    public int getCount() {        return title.length;    }    //获取当前位置的标题    @Override    public CharSequence getPageTitle(int position) {        return title[position % title.length];    }}

MainActivity布局：（由于里面有多个指示器，我们需要的是Tab标签的indicator，所以是TabPageIndicator，大家不要引入错了）

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"    xmlns:ptr="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffffff"    android:orientation="vertical"    tools:context="com.xhb.testbw.MainActivity" >    <include layout="@layout/main_header" />    <com.viewpagerindicator.TabPageIndicator        android:id="@+id/indicator"        android:layout_width="fill_parent"        android:layout_height="wrap_content" />    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="fill_parent"        android:layout_height="fill_parent" /></LinearLayout>

TabPageIndicator的样式修改：

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

<!--Tabindicator的自定义style--> <style name="StyledIndicators" parent="@android:style/Theme.Holo.Light.NoActionBar">     <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>     <item name="android:fitsSystemWindows">true</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">15dp</item>     <item name="android:paddingRight">15dp</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使用，提供图片、颜色等资源来支持自定义样式：

tab_indicator.xml

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

selcetor_tabtext.xml

<?xml version="1.0" encoding="utf-8"?><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/darker_gray"/></selector> 

base_tabpager_indicator_selected.9.png 是指示器的.9图片，大家可以自己画一个

第3步：在Manifest中改用我们自定义的样式：

可以直接在application上修改，也可以单独修改一个activity