這篇算是自定義viewgroup的第一篇文章
PagerTitleStrip
ViewPager有一個功能是新增標籤,也就是PagerTitleStrip.先來看一下官方文件:
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.support.v4.view.PagerTitleStrip複製程式碼PagerTitleStrip是ViewPager的當前頁面，下一個頁面和前一頁面的非互動式指示器。它在XML佈局中作為ViewPager的子檢視。Android：layout_gravity設定為TOP或BOTTOM，可以將標籤固定到ViewPager的頂部或底部。 每個頁面的標題由提供給ViewPager的adapter中的getPageTitle（int）方法提供。
PagerTabStrip是PagerTitleStrip的一個子類,它可以為使用者提供互動式的體驗。
PagerTitleStrip構造方法
- PagerTitleStrip (Context context)
用於在java程式碼中直接使用. - PagerTitleStrip (Context context, AttributeSet attrs)
用於在xml檔案中使用.
getTextSpacing方法
返回一個int型別的值,表示兩個title之間所需的距離,用畫素作為單位.
在未設定setTextSpacing方法時,它會生成一個自動的值來平均分配三個標籤,讓每個當前顯示的標籤的前一個和後一個都完全顯示在螢幕內.
setTextSpacing方法
設定標籤之前的間隔距離,此處應傳入一個int值,單位為畫素.
此方法對應getTextSpading方法.
Note:當你設定的數值小於當前自適應的數值時,將會忽略你設定的數值而採用顯示三個完全的標籤.
setGravity方法
設定標籤當中的文字在標籤欄的位置,這個只能使用Gravity中的垂直方向的方法.
setNonPrimaryAlpha方法
設定非當前顯示的標籤頁的透明度.
傳入的值是一個float型別,取值範圍是0-1.
PagerTabStrip
PagerTabStrip是PagerTitleStrip的一個子類.
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.support.v4.view.PagerTitleStrip
↳ android.support.v4.view.PagerTabStrip複製程式碼它的用法和PagerTitleStrip基本一致,只是它可以和使用者產生互動,當你點選標籤的前一頁或者後一頁時,可以跳到對應的頁面.
構造方法
- PagerTabStrip (Context context)
用於java程式碼中編寫 - PagerTabStrip (Context context,AttributeSet attrs)
用於xml佈局中檔案編寫
boolean getDrawFullUnderline ()和void setDrawFullUnderline (boolean drawFull)和void setTabIndicatorColorResource (int resId)
前邊方法返回後邊方法的設定值.為設定的情況下預設返回true,會繪製這個下劃線.
int getTabIndicatorColor ()和void setTabIndicatorColor (int color)
設定當前顯示標籤的指示器的顏色,是一個16進位制數字.這個顏色UnderLine時一個顏色.
void setBackgroundColor (int color)和void setBackgroundResource (int resId)
設定整個標籤的背景顏色.
看一下結果:
這些方法都相對簡單,但是官方提供的都只是入門的方法,現在我們需要為它定製實現兩個最簡單那的功能:
- 設定當前選中頁面的tab顏色高亮
- 設定當前選中頁面的tab文字擴大
這兩個功能並沒有改變PagerTabStrip的結構,只是增加了一些特殊的設定.那我們可以繼續使用原來的一些屬性,增加自己設定的屬性來達到實現上述兩個要求.
首先要分析PagerTitleStrip的結構.
一個PagerTitleStrip的顯示部分被平均分為三個部分(不設定textspace的情況下),第一個指示前一頁的頁面(假如當前頁時第一頁,則顯示為空),中間的一個指示當前頁面(當前頁面始終處在這個位置),最後一個顯示為下一個頁面(若沒有下一個頁面的時候則顯示為空).
實際上我們需要的是改變當前的標籤的設定,而不需要改變其他,那麼我們就可以自定義一個類繼承自PagerTabStrip,目的時增加互動效果,然後設定兩個屬性:currentColor和currentSize,就基本完成了我們的專案.
新增自定義屬性
在values檔案下新增自定義屬性,讓使用者可以通過xml佈局檔案來控制新的屬性:
<declare-styleable name="TabView">
<attr name="currentColor" format="color|reference" />
<attr name="currentSize" format="dimension|reference" />
</declare-styleable>複製程式碼currentColor代表當前標籤文字的高亮顏色,currentSize代表當標籤文字顯示的大小.
新建自定義類
新建自定義類TabView繼承自PagerTabStript,繼承構造方法.
public TabView(Context context) {
super(context);
init(context, null);
}
public TabView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}複製程式碼然後獲取自定義屬性的值:
private void init(Context context, AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TabView);
currentTabSize = ta.getDimension(R.styleable.TabView_currentSize, 20);
currentTabColor = ta.getColor(R.styleable.TabView_currentColor, Color.RED);
ta.recycle();
}複製程式碼最後別忘記回收ta.
獲取當前選中tab標籤
通過前邊的分析,我麼可以知道,因為當前選中的標籤始終處於中間一個,我們首先獲取這個控制元件中的第二個textview,也就是position=1的位置.然後將我們的值賦給獲取的textView.
private void setCurrentTab() {
viewPager = (ViewPager) getParent();
Log.d("tag", "currentIndex" + viewPager.getCurrentItem());
currentTab = (TextView) getChildAt(1);
currentTab.setTextSize(currentTabSize);
currentTab.setTextColor(currentTabColor);
}複製程式碼暴露介面
更多的時候我們既想能從XML佈局檔案設定,又想能在java程式碼中設定屬性,我們就可以暴露出這兩個介面.
public void setCurrentTabColor(int currentTabColor) {
this.currentTabColor = currentTabColor;
}
public void setCurrentTabSize(float size) {
this.currentTabSize = size;
}複製程式碼程式碼中的屬性會覆蓋XML佈局檔案中的屬性.
下面看一下效果: