Android學習筆記--ViewPagerIndicator集成

ViewPagerIndicator

TabPageIndicator

1. 佈局引入，例如：

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:orientation="vertical">
   
       <include layout="@layout/common_top"/>
   
       <com.viewpagerindicator.TabPageIndicator
           android:id="@+id/tab_indictor"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
       </com.viewpagerindicator.TabPageIndicator>
   
       <android.support.v4.view.ViewPager
           android:id="@+id/pager"
           android:layout_width="match_parent"
           android:layout_height="match_parent">
       </android.support.v4.view.ViewPager>
   </LinearLayout>
   

2. 繼承FragmentPagerAdapter重寫public CharSequence getPageTitle(int position)方法。例如：

       @Override
     public CharSequence getPageTitle(int position) {
           return UIUtils.getStringArr(R.array.touzi_tab)[position];
       }
   

3. TabPageIndicator綁定ViewPager例如：

   tabIndictor.setViewPager(pager);
   

   這時的效果是這樣的：
   

4. 經過上面幾步已經引入了TabPageIndicator，TabPageIndicator默認的樣式不滿足我們的需求，下面修改TabPageIndicator的樣式。可以在Application裏面修改樣式，也可以在Activity中修改樣式，如果在Application修改那麼每個Activity的樣式一樣。引入TabPageIndicator樣式，例如：android:theme="@style/Theme.PageIndicatorDefaults"，此時的效果是這樣的：
   
   Theme.PageIndicatorDefaults源碼：

   <style name="Theme.PageIndicatorDefaults" parent="android:Theme">
       <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
       <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
   </style>
   
   <style name="Widget">
   </style>
   
   <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">12sp</item>
       <item name="android:maxLines">1</item>
   </style>
   
   <style name="TextAppearance.TabPageIndicator" parent="Widget">
       <item name="android:textStyle">bold</item>
       <item name="android:textColor">@color/vpi__dark_theme</item>
   </style>
   
   <style name="Widget.IconPageIndicator" parent="Widget">
       <item name="android:layout_marginLeft">6dp</item>
       <item name="android:layout_marginRight">6dp</item>
   </style>
   

   自定義viewpagerIndicator樣式

     <style name="StyledIndicators" parent="@android:style/Theme.Light">
           <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
           <item name="android:windowNoTitle">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">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>

   最後再引入(如果是多個Fragment嵌套顯示，而且是用 View.inflate方法引入，context必須是activity不能是Application的Context，因爲Application的Context不帶有樣式。)

   android:theme="@style/StyledIndicators"