溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
TabLayout和ViewPager搭配使用，是有很多方便性，但是TabLayout這東西還是有很多被人吐槽的地方。
這里只講怎么設置tab之間的間隔，網上找了一堆方法，什么padding和margin的啥都沒用，沒辦法，想用TabLayout只能自己想辦法了。效果如下：
一、實現方法，既然這東西不好設置，那就直接在背景上做點事情，布局代碼如下：
<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內部的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，發現出來的效果Tab的文字不顯示了，至于網上說的調換addTab和setupWithViewPager的順序也是坑，可以看到顯示，但是出現了更離譜的情況，前面兩個空白，后面還多了兩個正常的，反正是很奇葩。
最后還是得在Adapter中去處理，把以下方法重寫下就可以了，其實這樣可能更合理些，至少能保證Tab的數量和ViewPager的頁數是一致的。
@Override
public CharSequence getPageTitle(int position) {
if(position == 0){
return "已下載";
}else if(position == 1){
return "下載中";
}
return "";
}
以上這篇基于TabLayout中的Tab間隔設置方法(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
