Android Tab实现之Viewpager+ViewpagerIndicator

仿网易新闻客户端，用到了开源框架ViewpagerIndicator

1.首先导入Viewdicator

2.布局文件

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


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.viewpagerindicator.TabPageIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ImageButton
            android:id="@+id/ib_nexttab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@android:color/transparent"
            android:src="@drawable/news_cate_arr" />

    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_menu_detail"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

3.源代码:

<1>在viewpager的适配器代码中重写getPageTitle方法，返回每页的title

<2>绑定viewpager和viewpagerIndicator :

设置完adapter后，设置绑定方法

  tabPageIndicator.setViewPager(mViewPager);

<3> viewpager的滑动监听事件，此时由indicator接替，而不是viewpager

4.设置主题

<1>application中设置

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/StyledIndicators">

<2>style文件

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

<3>

selector_tabtxt.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#EE2C2C" android:state_selected="true" />
    <item android:color="#EE2C2C" android:state_pressed="true" />
    <item android:color="#EE2C2C" android:state_focused="true" />
    <item android:color="@android:color/black" />
</selector>