記一次TabLayout字型太粗解決辦法

b10l07發表於2018-11-15

最近接到一個需求,需要顯示多個可滾動的分類列表,第一個想到的就是用TabLayout實現。實現是實現了,但是遇到同樣字號,但是tab顯示太粗的問題。先看看是怎樣一個問題。

1758438-233e7e5668c5346a.png
系統預設狀態

圖片我們可以看到,上面tab頁的item明顯比下面這個要粗,尤其是英文字母,更加的明顯了,我設定的tab和下面這個TextView是同樣的字號。除此之外,並無其他自定義屬性了。

  • 為什麼同樣的字號tab頁的item顯示更粗呢?

我初初認為有可能是TabLayout實現的時候自己把字型給加粗了。帶著這個問題,我去檢視了TabLayout的原始碼,發現其實現也是用TextView實現的,但是全域性搜尋之後發現,並沒有看到起有設定字型style,亦或是typeface的相關程式碼。這就很奇怪了。於是,我將TabLayout的TextApperance Style加了一條屬性textStyle為bold。

1758438-b10ad9b953ce5282.png
textStyle

ummmmmmm~~~~驚奇的發現。。。

1758438-94a11b194c264793.png
太粗了!

所以說,前面的預設狀態是沒有加粗的,它就是這麼粗!蒼天饒過誰,設計嫌我的太粗了!由於也沒有很仔細的看原始碼,至此也未明瞭tab為什麼會這麼粗。

  • 如何解決tab顯示粗問題?

TabLayout是可以自定義tabItem,或許這種方式可以解決這個問題。但是這裡其實就只是顯示文字而已,就無所謂自定義了。所以就放棄了這種方案,另尋方案。

因為涉及到分類,所以列表顯示肯定是要有的,這裡實現的是TabLayout + ViewPager的實現方式,這兩個控制元件搭配在一起可以實現聯動,不需要自己add tab,只需要在viewpager的adapter裡面重寫getPagerTitle方法就可以了。這個方法返回一個CharSequence,這意味著什麼呢?這意味著我們可以在返回tab文字之前進行一點加工。

1758438-2d1e88c977725f79.png
重寫getPagerTitle方法

我們知道,TabLayout裡面的實現其實也是一個TextView,而這裡返回的又是CharSequence,那麼我們是可以給字串設定span的,從而改變顯示的一些屬性。這裡先是構建了一個SpannableString物件,然後對這個物件設定了span,因為前面已經認為不是TabLayout自己對文字進行加粗了,所以這裡就懷疑是字型的原因,所以這裡,設定了TypefaceSpan,來看一看設定後的效果。

1758438-22a554e1ed36beef.png
設定了TypeSpan

變瘦了!不要兩個月!不要兩星期!也不需要兩天!你只需要一行程式碼,就可以變瘦了!看來我們設定了Typeface之後,確實是使得TabLayout顯示看起來是正常的了,但是至於預設狀態下為什麼是較粗的,現在還是不得解,哪位兄dei知道的,麻煩@一下?。

至此,這個問題勉強算是解決了TabLayout預設狀態下字型較粗的問題,這個方案對我來說是最簡單最快的,但是或許自定義TabItem可能實現得更好,如果你跟我一樣的需求,不妨也試試這個方法??

相關文章