开源代码viewpagerindicator里面没有实现tab下划线切换过程中的移动动画，都是很突兀的多个fragement之间的切换，导致用户体验略差，google了下相关问题，发现一片博文：
重点是如下代码：
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
android:theme="@style/StyledIndicators"，对应styles文件下面：
-
<!-- 下面带横线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的切换时候，下滑
-
<item name="android:background">@drawable/tab_indicator</item>
对应的drawable中切换的xml代码：
<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，声明组件
private UnderlinePageIndicatorEx mUnderlinePageIndicator;
//2,代码实现部分
mUnderlinePageIndicator = (UnderlinePageIndicatorEx) findViewById(R.id.underline_indicator);
mUnderlinePageIndicator.setViewPager(viewpager);
mUnderlinePageIndicator.setFades(false);
indicator.setOnPageChangeListener(mUnderlinePageIndicator);
如此，ok,完美解决，tab下划线可实现滑动时候随之切换的效果