TabLayout中的Tab间隔设置方法

姓名:李昕洲    学号:16030120026

【嵌牛导读】:TabLayout和ViewPager搭配使用，有很多方便性，接下来为你讲述设置tab之间的间隔。

【嵌牛鼻子】:TabLayout、Tab间隔。

【嵌牛提问】:TabLayout中的Tab间隔设置方法是什么？

【嵌牛正文】:

一、实现方法，既然这东西不好设置，那就直接在背景上做点事情，布局代码如下：

<android.support.design.widget.tablayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/tl_download_tabs" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_margintop="10dp" android:layout_gravity="center_horizontal" android:overscrollmode="never" app:tabmode="fixed" app:tabpaddingstart="30dp" app:tabpaddingend="30dp" app:tabindicatorheight="0dp" app:tabbackground="@drawable/download_tab_bg_selector" app:tabselectedtextcolor="#000000" app:tabtextcolor="#ffffff"></android.support.design.widget.tablayout>

二、其中关键的地方就在背景的selector上，代码如下：

<!--?xml version="1.0" encoding="utf-8"?-->

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 

<item android:state_selected="true">

  <!--<shape>

          <solid android:color="#ffffff"/>

          <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />

      </shape>-->

  <!--为了让TabLayout内部的Tab有间隔，暂时找不到其他设置方法，只能在背景图形里面设置间隔-->

  <layer-list>

  <item>

    <shape>

    <solid android:color="@android:color/transparent">

    </solid></shape>

  </item>

  <item android:left="5dp" android:right="5dp">

    <shape>

    <corners android:topleftradius="10dp" android:toprightradius="10dp">

    <solid android:color="#ffffff">

    </solid></corners></shape>

  </item>

  </layer-list>

</item>

 

<item android:state_selected="false">

  <!--<shape>

          <solid android:color="#bcbcbc"/>

          <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />

      </shape>-->

  <layer-list>

  <item>

    <shape>

    <solid android:color="@android:color/transparent">

    </solid></shape>

  </item>

  <item android:left="5dp" android:right="5dp">

    <shape>

    <corners android:topleftradius="10dp" android:toprightradius="10dp">

    <solid android:color="#bcbcbc">

    </solid></corners></shape>

  </item>

  </layer-list>

</item>

</selector>

注释掉的地方是原来没间隔的selector，这里直接给背景设置了个左右的padding，效果杠杠的。

缺点：如果间隔过大的话，那这种方式就有一点的缺陷了，就是点击到空白处，也能选中tab。

不过对于间隔不是很大的，基本是感觉不出来的。

三、Activity的使用就很简单了：

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);

        mTabLayout.addTab(mTabLayout.newTab().setText("已下载"));

        mTabLayout.addTab(mTabLayout.newTab().setText("下载中"));

        mTabLayout.setupWithViewPager(mViewPager);