TabLayout 的使用 更改下划线的长度,和一个奇葩的问题

使用 TabLayout 

1.xml中添加布局

<android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="@dimen/x500"
    android:layout_height="@dimen/y100"
    android:layout_marginLeft="@dimen/x20"
    android:padding="-1dp"
    app:tabContentStart="0dp"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/blue_293F59"
    app:tabIndicatorHeight="2dp"
    app:tabMode="fixed"
    app:tabPadding="-1dp"
    app:tabPaddingBottom="-1dp"
    app:tabPaddingEnd="-1dp"
    app:tabPaddingStart="-1dp"
    app:tabPaddingTop="-1dp"
    app:tabSelectedTextColor="@color/blue_293F59" />

2.代码中

//文字的集合
tabTitles = new ArrayList<>(); 
//这里我是把需要的文字写到String 里面统一管理（可以直接tabTitles.add()标题也行）
tabTitles = Arrays.asList(getResources().getStringArray(R.array.clerk_good_count_tab));
for (int i = 0; i < tabTitles.size(); i++) {
    String title = tabTitles.get(i);
    //我喜欢引入自定义的布局
    View view = View.inflate(context, R.layout.tab_count_view, null);
    TextView titleText = view.findViewById(R.id.title);
    titleText.setText(title);
    //这里可以加入图片之类的（看自己写的自定义布局）
    tab.addTab(tab.newTab().setCustomView(view));
}
//如果只是单独使用 TabLayout 只需要这个监听就好
tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    // 如果需要选中 和不选中区分颜色之类的操作 可以在下面回调方法中写
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        //这段代码暂时没用 后面讲解
        AnimatorUtils animatorUtils = AnimatorUtils.getInstance();
        if (tab.getPosition() == 4) {
            animatorUtils.viewShowOrHidden((int) context.getResources().getDimension(R.dimen.y90), 1, lDate);
        } else {
            ViewGroup.LayoutParams l = lDate.getLayoutParams();
            final float height = l.height;
            if (l.height == 0) {
                return;
            }
            animatorUtils.viewShowOrHidden((int) height, 0, lDate);
        }

       //这里就是切换后要做的事情
        switch (tab.getPosition()) {
            case 0:

                break;
            case 1:

                break;
            default:
                break;
        }
     //如果需要和ViewPage 一起使用
     //vp.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

//如果需要和ViewPage 一起使用

vp.addOnPageChangeListener(new Page() {
    @Override
    public void onPageSelected(int position) {
        tabTask.getTabAt(position).select();
    }
});

--------------------------------- 以上使用是没什么问题了 --------------------------------

现在就要说说开发中可能遇到的问题（至少是我遇到的）

1.下划线太长，导致不美观，我们发现api里面并没有控制长度的方法

所以就需要用反射的方式来给每一个tab变相设置长度

/**
 * 设置tab下划线的长度
 */
//最好要求一下版本  
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
public void setTabLine(int left, int right) {
    try {
        Class<?> tablayout = tab.getClass();
        Field tabStrip = tablayout.getDeclaredField("mTabStrip");
        tabStrip.setAccessible(true);
        LinearLayout ll_tab = (LinearLayout) tabStrip.get(tab);
        for (int i = 0; i < ll_tab.getChildCount(); i++) {
            View child = ll_tab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                                        0,LinearLayout.LayoutParams.MATCH_PARENT, 1);
            //修改两个tab的间距
            params.setMarginStart(DensityUtil.dp2px(context, left));
            params.setMarginEnd(DensityUtil.dp2px(context, right));
            child.setLayoutParams(params);
            child.invalidate();
        }
    } catch (NoSuchFieldException e) {
        e.printStackTrace();
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    }
}

这样设置2个tab的margin 就可以控制长度了

2.这个是我遇到的一个坑（算是坑吧）

公司需求选择到某一个tab的时候在下面显示一个界面（比如选择时间）而选择其他界面的时候就隐藏这个界面

开始开发都没什么问题，就是手贱了，觉得直接隐藏和显示的界面太生硬，于是就写了一个动画效果，

动态改变布局的高度，来慢慢显示和隐藏。

写好了也没什么问题，突然我就把动画时间延长了5秒，看看慢效果，就发现一个问题，

发现那个下标（下面的那条线）会在动画完成后才移动显示，这个不友好了

然后各种查资料，做实验，终于发现了 如果TabLayout的父布局是RelativeLayout就会有这个奇葩的问题，

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/y120"
        android:padding="-1dp"
        app:tabContentStart="0dp"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/blue_293F59"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabPadding="-1dp"
        app:tabPaddingBottom="-1dp"
        app:tabPaddingEnd="-1dp"
        app:tabPaddingStart="-1dp"
        app:tabPaddingTop="-1dp"
        app:tabSelectedTextColor="@color/blue_293F59" />

</RelativeLayout>

像这样就有问题 把RelativeLayout 改为LinearLayout 就没问题了。