ViewPager之標籤的自定義

這篇算是自定義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構造方法

1. PagerTitleStrip (Context context)
   用於在java代碼中直接使用.
2. 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基本一致,只是它能夠和用戶產生交互,當你點擊標籤的前一頁或者後一頁時,能夠跳到對應的頁面.

構造方法

1. PagerTabStrip (Context context)
   用於java代碼中編寫
2. 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)

設置整個標籤的背景顏色.

看一下結果:

這些方法都相對簡單,可是官方提供的都只是入門的方法,如今咱們須要爲它定製實現兩個最簡單那的功能:

1. 設置當前選中頁面的tab顏色高亮
2. 設置當前選中頁面的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佈局文件中的屬性.

下面看一下效果: