天天看點

android TabLayout實作京東詳情效果自定義icon添加到tab

google在2015的io大會上,給我們帶來了更加詳細的material design設計規範,同時,也給我們帶來了全新的android design support library,在這個support庫裡面,google給我們提供了更加規範的md設計風格的控件。最重要的是,android design support library的相容性更廣,直接可以向下相容到android 2.2。

這兩天需要做一個仿京東詳情的頁面,上面的tab切換,以前都是自己寫viewpager+fragment,或者indicator的深度定制,一直想嘗試一下tablayout,于是就有了下面的坑。

android TabLayout實作京東詳情效果自定義icon添加到tab

然後下面是我簡單的實作效果(個人覺得很坑,還不如自己自定義的導航器)

android TabLayout實作京東詳情效果自定義icon添加到tab

添加引用庫

我們來看一下實作的布局:

這布局檔案最關鍵的一點就是android.support.design.widget.tablayout 标簽中的app:tabmode=”scrollable”,他設定tab的模式為“可滑動的”。

其他的用法和indicator的用法差不多,都需要設定擴充卡,然後通過資料實作頁面的适配。直接上代碼

adapter

首頁面的相關邏輯,這裡的fragment就是簡單的fragment。

上面的代碼都比較簡單不做過多的解釋,在使用tablayout的時候需要注意一點:

tabmode有兩個屬性值:

mode_fixed:fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.

mode_scrollable:scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.

mode_scrollable适合很多tabs的情況,是可以滾動的,如果你要實作京東的那種擠在一起的效果就需要mode_fixed了。

為了更好的滿足開發需要,tablayout實作了自定義tablayout的樣式,然後通過引入

目前的tablayout沒有方法讓我們去添加icon,我們可以使用spannablestring結合imagespan來實作

運作,發現沒有顯示,這是因為tablayout建立的tab預設設定textallcaps屬性為true,這阻止了imagespan被渲染出來,可以通過下面的樣式檔案定義來改變:

然後在getpagetitle方法中設定上有标題的tab

tablayout還支援自定義view,通過gettabview來設定,這裡就不講怎麼實作了,有興趣的可以自行研究。

android TabLayout實作京東詳情效果自定義icon添加到tab

繼續閱讀