基于TabLayout中的Tab間隔設置方法(實例講解)

更新時間：2017年12月22日 14:41:05 作者：Dway

下面小編就為大家分享一篇基于TabLayout中的Tab間隔設置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

TabLayout和ViewPager搭配使用，是有很多方便性，但是TabLayout這東西還是有很多被人吐槽的地方。

這里只講怎么設置tab之間的間隔，網(wǎng)上找了一堆方法，什么padding和margin的啥都沒用，沒辦法，想用TabLayout只能自己想辦法了。效果如下：

一、實現(xiàn)方法，既然這東西不好設置，那就直接在背景上做點事情，布局代碼如下：

<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"/>

二、其中關鍵的地方就在背景的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內(nèi)部的Tab有間隔，暫時找不到其他設置方法，只能在背景圖形里面設置間隔-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#ffffff"/>
    </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"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#bcbcbc"/>
    </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);

四、原來是線性布局下，放著TabLayout和ViewPager，試著在TabLayout外嵌套多一個RelativeLayout，發(fā)現(xiàn)出來的效果Tab的文字不顯示了，至于網(wǎng)上說的調(diào)換addTab和setupWithViewPager的順序也是坑，可以看到顯示，但是出現(xiàn)了更離譜的情況，前面兩個空白，后面還多了兩個正常的，反正是很奇葩。

最后還是得在Adapter中去處理，把以下方法重寫下就可以了，其實這樣可能更合理些，至少能保證Tab的數(shù)量和ViewPager的頁數(shù)是一致的。

@Override
  public CharSequence getPageTitle(int position) {
   if(position == 0){
    return "已下載";
   }else if(position == 1){
    return "下載中";
   }
   return "";
  }

以上這篇基于TabLayout中的Tab間隔設置方法(實例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: