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>