【界面优化】使用viewpagerindicator添加下划线滑动动画

时间：2015-08-06 14:57:16 阅读：238 评论：0 收藏：0 [点我收藏+]

标签：

开源代码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

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

【界面优化】使用viewpagerindicator添加下划线滑动动画

标签：

原文地址：http://www.cnblogs.com/androidsuperman/p/bd5832871bb60f25d1237b84fedb971f.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行