目錄

1、去掉指示線或改變其高度

2、改變tab字體的大小

3、減少圖標和文字的間距

---

在Support Design庫中有一個新的組件TabLayout，配合TabItem實現tab頁面的形式。 但是圖標和文字組合的tab的默認情況下，TabLayout中的tab太高，占據太多布局。 但是如果直接將TabLayout高度改小，很容易出現圖標顯示不全的情況，因為圖標和字體及兩者的間距沒有跟著改變。 這時可以從幾個方面處理：

1、去掉指示線或改變其高度

每個tab下面都有一條指示線，會占據部分高度。 可以去掉或改變它的高度，為TabLayout設置app:tabIndicatorHeight="0dp"即可

2、改變tab字體的大小

默認的tab字體較大，可以改小。 自定義一個樣式如下： <style?name="TabItemText"?parent="TextAppearance.Design.Tab"><item?name="android:textSize">10dp</item> </style>

為TabLayout設置app:tabTextAppearance="@style/TabItemText"即可

也可以通過這種形式改變字體顏色

3、減少圖標和文字的間距

默認的tab中，圖標和文件間距很大。但是沒有很好的解決方法 進過查看源碼發現，這個間距是圖標的ImageView設置了marginBottom導致的，如下： MarginLayoutParams?lp?=?((MarginLayoutParams)?iconView.getLayoutParams()); int?bottomMargin?=?0; if?(hasText?&&?iconView.getVisibility()?==?VISIBLE)?{//?If?we're?showing?both?text?and?icon,?add?some?margin?bottom?to?the?iconbottomMargin?=?dpToPx(DEFAULT_GAP_TEXT_ICON); } if?(bottomMargin?!=?lp.bottomMargin)?{lp.bottomMargin?=?bottomMargin;iconView.requestLayout(); }

TabLayout中將這個marginBottom設置成了DEFAULT_GAP_TEXT_ICON，這是一個常量，導致marginBottom固定為8dp。

這樣就沒有正常途徑的解決方法了，因為常量不能改變。但是在布局完成后（比如onResume）我們可以通過遍歷子view的形式去改變它，代碼如下：

private?void?changeIconImgBottomMargin(ViewGroup?parent,?int?px){for(int?i?=?0;?i?<?parent.getChildCount();?i++){View?child?=?parent.getChildAt(i);if(child?instanceof?ViewGroup){changeIconImgBottomMargin((ViewGroup)?child,?px);}else?if(child?instanceof?ImageView){ViewGroup.MarginLayoutParams?lp?=?((ViewGroup.MarginLayoutParams)?child.getLayoutParams());lp.bottomMargin?=?0;child.requestLayout();}} }

其實就是遍歷TabLayout中的所有View，如果是ImageView，將它的marginBottom修改為其他值即可。

?

總結

以上是生活随笔為你收集整理的减小TabLayout高度而不影响每个tab展示的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。