ViewPagerIndicator的集成

1.下载第三方库https://github.com/JakeWharton/ViewPagerIndicator

2.将案列导入as中，运行案例

3.当前项目关联库

4.写布局文件

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

5.使用

  //实例化TabPageIndicator然后设置ViewPager与之关联  
    TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);  
​
    indicator.setViewPager(pager);  
      
   //如果我们要对ViewPager设置监听，用indicator设置就行了  

6.在ViewPager的适配器中重写

  @Override
    public CharSequence getPageTitle(int position) {
        return  children.get(position).getTitle();
  }

7.此时indicator还是没有排版的状态，要进行样式的设置，在工程的功能清单文件，对应的Activity配置样式

    <activity android:name=".MainActivity"
                android:theme="@style/Theme.PageIndicatorDefaults"/>

8.修改样式

<style name="Widget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">12dp</item>
        <item name="android:paddingBottom">12dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@drawable/vpi__tab_textcolor_indicator</item>
        <item name="android:maxLines">1</item>
    </style>

9.修改后的 <item name="android:background">@drawable/vpi__tab_indicator</item>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
​
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
​
<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
​
<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />

</selector>

10.文字颜色

<item name="android:textColor">@drawable/vpi__tab_textcolor_indicator</item>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:color="#000000" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:color="#ff0000" />
​
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:color="#000000" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:color="#ff0000" />
​
    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:color="#000000" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:color="#ff0000" />
​
    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:color="#000000" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:color="#ff0000" />
</selector>