tablayout 疑难杂症全析

从事移动开发也有将近三年的工作经验，经常会遇到标签页的需求，传统的方法我们会手动写出来相应的布局（不知道你们当时是如何写出来的，由于没有接触过，之前一直是自己写出来的），但是google最新推出个新的控件 tablayout  这个在一个新的文件包里面

'com.android.support:design:27.1.0'   所以我们需要添加依赖

然后我们的布局写法

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50sp"
    android:gravity="center">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_height="50dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/light_orange"
        app:tabMaxWidth="@dimen/dp_0"
        app:tabSelectedTextColor="@color/black_color_333333"
        app:tabTextColor="#FF505050" />
</LinearLayout>

里面有几个需要注意的  tabMode 有两个属性  fixed   scrollable  

当我们的标签页相对较少时  我们需要让折标签页平均分布整个屏幕的时候 我们需要设置程fixed  当我们的标签页相对较多的时候 我们设置程scrollable  意思是可以滑动    当我们使用fiexd时候  tabGravity 设置fill    否则设置程center

java 代码

TabLayout tabLayout = mBinding.tabLayout;
tabLayout.addTab(tabLayout.newTab().setText("网易严选"));
tabLayout.addTab(tabLayout.newTab().setText("网易考拉"));
tabLayout.addTab(tabLayout.newTab().setText("数码黑科技"));

这样我们就可以实现简单的 标签页  

但是问题又来了 这样设置时候下划线的宽度太大   有时候我们的需求并不是那么宽 那么这个时候我们就需要想办法设置下划线的宽度了   

 下面 我直接粘贴代码

public void setTabLine(TabLayout tab, 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.dip2px(getActivity(),left));
            params.setMarginEnd(DensityUtil.dip2px(getActivity(),right));
            child.setLayoutParams(params);
            child.invalidate();
        }
    } catch (NoSuchFieldException e) {
        e.printStackTrace();

    } catch (IllegalAccessException e) {
        e.printStackTrace();

    }
}

代码相对比较简单  这个方法需要我们设置完所有的标签页的时候去调用 

tabLayout.post(new Runnable() {
    @Override
    public void run() {
        setTabLine(tabLayout,20,20);
    }
});

注意这里面的宽度并不是下划线的宽度   是两个标签页直接的距离 我们根据调节这个距离 去改变下划线的宽度  
给tablayout 设置标签页改变的监听

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {

        switch (tab.getPosition()) {
            case 0:
                type = "1";
                initGoodList(type);
                break;
            case 1:
                type = "2";
                initGoodList(type);
                break;
            case 2:
                type = "3";
                initGoodList(type);
                break;
        }

    }

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

    }

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

    }
});

j这样我们就可以实现我们简单的需求 如有后续复杂需求可以再行研究 

次博客仅代表个人经验 如有异议可以留言，一起成长