快捷導(dǎo)航

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

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

下面小編就為大家分享一篇基于TabLayout中的Tab間隔設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

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

一、實(shí)現(xiàn)方法，既然這東西不好設(shè)置，那就直接在背景上做點(diǎ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"/>

二、其中關(guān)鍵的地方就在背景的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有間隔，暫時(shí)找不到其他設(shè)置方法，只能在背景圖形里面設(shè)置間隔-->
  <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>

注釋掉的地方是原來(lái)沒(méi)間隔的selector，這里直接給背景設(shè)置了個(gè)左右的padding，效果杠杠的。

缺點(diǎn)：如果間隔過(guò)大的話(huà)，那這種方式就有一點(diǎn)的缺陷了，就是點(diǎn)擊到空白處，也能選中tab。

不過(guò)對(duì)于間隔不是很大的，基本是感覺(jué)不出來(lái)的。

三、Activity的使用就很簡(jiǎn)單了：

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);
  mTabLayout.addTab(mTabLayout.newTab().setText("已下載"));
  mTabLayout.addTab(mTabLayout.newTab().setText("下載中"));
  mTabLayout.setupWithViewPager(mViewPager);

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

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

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

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

您可能感興趣的文章: