开源代码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下划线可实现滑动时候随之切换的效果
