【界面优化】使用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下划线可实现滑动时候随之切换的效果