【界面優化】使用viewpagerindicator添加下划線滑動動畫

開源代碼viewpagerindicator里面沒有實現tab下划線切換過程中的移動動畫，都是很突兀的多個fragement之間的切換，導致用戶體驗略差，google了下相關問題，發現一片博文：

http://blog.csdn.net/lancees/article/details/9164421

重點是如下代碼：

public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{
       public UnderlinePageIndicatorEx(Context context) {
           super(context, null);
           
        }
        public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {
            super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);
            
        }
        public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            
        }
        
        
        @Override
        public void setViewPager(ViewPager viewPager) {
            if (mViewPager == viewPager) {
                return;
            }
//            if (mViewPager != null) {
//                //Clear us from the old pager.
//                mViewPager.setOnPageChangeListener(null);
//            }
            if (viewPager.getAdapter() == null) {
                throw new IllegalStateException("ViewPager does not have adapter instance.");
            }
            mViewPager = viewPager;
//            mViewPager.setOnPageChangeListener(this);
            invalidate();
            post(new Runnable() {
                @Override public void run() {
                    if (mFades) {
                        post(mFadeRunnable);
                    }
                }
            });
        }
}

 

UnderlinePageIndicator是 viewpagerindicator里面的開源代碼：

/**
* Draws a line for each page. The current page line is colored differently
* than the unselected page lines.
*/

 

 

為每個page畫一條線，使得和其他沒選中的page的線條顏色不同。

 

下面主要講下我在項目中修改的步驟和注意點：

1 修改style文件：

   你使用這個開源庫的控件的activity里面必須有如下的style

1.  android:theme="@style/StyledIndicators"，對應styles文件下面：

1. <!-- 下面帶橫線tab的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:background">#00000000</item>
           <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
           <item name="android:textSize">14sp</item>
           <item name="android:textColor">@drawable/viewpager_title_textcolor</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>

    

   


原來的background主要定義了tab的切換時候，下滑

1. <item name="android:background">@drawable/tab_indicator</item>

   對應的drawable中切換的xml代碼：

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

    

其中 base_tabpager_indicator_selected是帶有下划線的.9圖片

 

 

現在將style文件里面的background修改為：

<itemname="android:background">#00000000</item>

 

然后主要是修改布局,主要是添加 UnderlinePageIndicatorEx布局 :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.soyoungboy.view.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@color/white" />
    <com.soyoungboy.view.viewpagerindicator.UnderlinePageIndicatorEx
        android:id="@+id/underline_indicator"
        android:layout_width="fill_parent"
        android:layout_height="3dp"
         />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

 

然后就是代碼里邊的修改：

1. //1，聲明組件 
   private UnderlinePageIndicatorEx mUnderlinePageIndicator;
   //2,代碼實現部分
   mUnderlinePageIndicator = (UnderlinePageIndicatorEx) findViewById(R.id.underline_indicator);
           mUnderlinePageIndicator.setViewPager(viewpager);
           mUnderlinePageIndicator.setFades(false);
           indicator.setOnPageChangeListener(mUnderlinePageIndicator);

如此，ok,完美解決，tab下划線可實現滑動時候隨之切換的效果