[原創]Android自定義View之IndicatorView，顯示當前tab頁所處位置的View

概述

Android IndicatorView的靈感來源於SlidingTabView，雖然有句「不重複」造輪子在先，本着練手的目的，仍是寫了一個功能較爲簡單的相似view。
其比SlidingTabView在功能上欠缺的一點是：暫時沒有添加「當內容顯示不開時自動向左右滑動」的功能。

應用場景

能夠勝任一屏顯示全部tab標題的狀況。

效果圖

全部效果如上圖所示

功能

1. 均等Indicator顯示；
2. 不均等Indicator顯示，根據tab標題的字寬度自動適配；
3. Indicator能夠添加indicator兩端相對多增長的長度；
4. 能夠設置顏色漸變，通常可用來作tab切換，增長美感；
5. 文字也能夠隨Indicator的顏色變化而變化，具備漸變效果；
6. SimpleIndicatorView能夠設置indicator的寬度相對每一個等長單元的寬度比值；
7. SimpleIndicatorView能夠設置滑動方向，即水平方向或者豎直方向，同時能夠設置底部線條的位置；
8. 可與ViewPager聯動；
9. 可首尾循環；
10. 支持padding，支持自定義點擊效果等；
11. 可一同設置文字；
12. java代碼控制很是簡單，若是和ViewPager聯動，那麼只須要一行代碼。

加入項目

compile 'cn.carbs.android:IndicatorView:1.0.1'

使用方法

xml佈局文件中聲明：

SimpleIndicatorView和IndicatorView採用了兩種不一樣的屬性，緣由是二者差距稍大，索性採用兩套屬性。因爲屬性較多，所以xml中的聲明稍微複雜。之因此寫了兩個view，是由於豎直方向顯示時，通常沒有文字描述，另外SimpleIndicatorView較爲輕量化，便於下降耦合。

1.對於IndicatorView，xml中這樣聲明：

<cn.carbs.android.indicatorview.library.IndicatorView
        android:id="@+id/indicator_view"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="20dp"
        android:background="#ffeeeeee"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        app:iv_IndicatorColorEnd="#ffee5544"
        app:iv_IndicatorColorGradient="true"
        app:iv_IndicatorColorStart="#ff3388ff"
        app:iv_IndicatorEven="false"
        app:iv_IndicatorLengthExtra="3dp"
        app:iv_IndicatorTextArray="@array/text_arrays_2"
        app:iv_IndicatorTextGap="20dp"
        app:iv_IndicatorTextSize="20dp"/>

2.對於SimpleIndicatorView，xml中這樣聲明：

<cn.carbs.android.indicatorview.library.SimpleIndicatorView
        android:id="@+id/simple_indicator_view_v"
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        app:iv_SimpleIndicatorColorEnd="#ffee5544"
        app:iv_SimpleIndicatorColorGradient="true"
        app:iv_SimpleIndicatorColorStart="#ff3388ff"
        app:iv_SimpleIndicatorCount="4"
        app:iv_SimpleIndicatorLinePosition="start"
        app:iv_SimpleIndicatorOrientation="vertical"
        app:iv_SimpleIndicatorWidthRation="0.8"/>

各個屬性做用，見說明末尾。

java文件中的控制：

若是想和ViewPager聯動，那麼Java代碼只有一句：

mIndicatorView.setViewPager(mViewpager);

若是想主動改變其顯示的索引值，可經過多種方式：

//使IndicatorView當前指示的索引值加1
  mIndicatorView.increaseSelectedIndexWithViewPager();
  
  //使IndicatorView當前指示的索引值減1
  mIndicatorView.decreaseSelectedIndexWithViewPager();
  
  //使IndicatorView指向任意的索引值
  mIndicatorView.setIndexWithViewPager(int indexDest);

IndicatorView狀態改變後的回調函數：

mIndicatorView.setOnIndicatorChangedListener(new IndicatorView.OnIndicatorChangedListener() {
            @Override
            public void onIndicatorChanged(int oldSelectedIndex, int newSelectedIndex) {
                //若是已經和ViewPager關聯了，那麼不要在此處改變ViewPager的狀態
            }
        });

注意事項

1. IndicatorLengthExtra屬性請暫時使用大於等於0的dimension值，由於我暫時沒有對負值作限制，若是負值太小，可能顯示會有問題;
2. 不支持在Java代碼中生成此view;
3. IndicatorView只能水平方向顯示，而SimpleIndicatorView能夠豎直方向顯示。
4. IndicatorView能與ViewPager聯動，而SimpleIndicatorView不能。

屬性說明

IndicatorView的相關屬性

<declare-styleable name="IndicatorView">
        <attr name="iv_IndicatorEven" format="reference|boolean" /> //每一個單元是不是等寬的
        <attr name="iv_IndicatorColor" format="reference|color" />  //indicator的顏色
        <attr name="iv_IndicatorColorStart" format="reference|color" /> //indicator的起始顏色，indicator的顏色隨着滑動而進行改變，iv_IndicatorColorGradient屬性開啓後有效
        <attr name="iv_IndicatorColorEnd" format="reference|color" />   //indicator的終止顏色，iv_IndicatorColorGradient屬性開啓後有效
        <attr name="iv_IndicatorColorGradient" format="reference|boolean" />//是否容許indicator隨着滑動而改變顏色
        <attr name="iv_IndicatorTextGap" format="reference|dimension" />  //每一個text之間的間距，在單元非等寬的條件下有效(iv_IndicatorEven="false")
        <attr name="iv_IndicatorTextArray" format="reference" />//顯示的tab標題
        <attr name="iv_IndicatorTextSize" format="reference|dimension" />//顯示的tab標題的文字大小
        <attr name="iv_IndicatorTextColorNormal" format="reference|color" />//顯示的tab標題的非選中狀態文字顏色(iv_IndicatorColorGradient="false"條件下有效)
        <attr name="iv_IndicatorTextColorSelected" format="reference|color" />//顯示的tab標題的選中狀態文字顏色(iv_IndicatorColorGradient="false"條件下有效)
        <attr name="iv_IndicatorLengthExtra" format="reference|dimension" />//indicator長於每一個tab標題的長度的一半
        <attr name="iv_IndicatorDuration" format="reference|integer" />//indicator切換時的動畫持續時間
        <attr name="iv_IndicatorSelectedIndex" format="reference|integer" />//默認的選中索引
        <attr name="iv_IndicatorHeight" format="reference|dimension" />//indicator的高度
        <attr name="iv_IndicatorBgTouchedColor" format="reference|color" />//按下某個tab標題時的背景顏色
        <attr name="iv_IndicatorViewPagerAnim" format="reference|boolean" />//按下tab後，與之聯動的ViewPager是否須要有動畫效果，默認true
    </declare-styleable>

SimpleIndicatorView的相關屬性

<declare-styleable name="SimpleIndicatorView">
        <attr name="iv_SimpleIndicatorColor" format="reference|color" />//indicator的顏色
        <attr name="iv_SimpleIndicatorColorStart" format="reference|color" />//indicator的起始顏色，indicator的顏色隨着滑動而進行改變，iv_IndicatorColorGradient屬性開啓後有效
        <attr name="iv_SimpleIndicatorColorEnd" format="reference|color" />//indicator的終止顏色，iv_IndicatorColorGradient屬性開啓後有效
        <attr name="iv_SimpleIndicatorColorGradient" format="reference|boolean" />//是否容許indicator隨着滑動而改變顏色
        <attr name="iv_SimpleIndicatorCount" format="reference|integer" />//一共包含的單元數目
        <attr name="iv_SimpleIndicatorWidthRation" format="reference|float" />//indicator寬度與均分的單元的寬度比值
        <attr name="iv_SimpleIndicatorDuration" format="reference|integer" />//indicator切換時的動畫持續時間
        <attr name="iv_SimpleIndicatorDefaultIndex" format="reference|integer" />//默認的選中索引
        <attr name="iv_SimpleIndicatorLineColor" format="reference|color" />//底部的線條的顏色
        <attr name="iv_SimpleIndicatorLineShow" format="reference|boolean" />//底部線條是否顯示
        <attr name="iv_SimpleIndicatorLineThickness" format="reference|dimension" />//底部線條的高度
        <attr name="iv_SimpleIndicatorOrientation" format="enum">//indicator水平顯示仍是豎直顯示
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1" />
        </attr>
        <attr name="iv_SimpleIndicatorLinePosition" format="enum">//底部線條的位置：水平方向，能夠在頂部，能夠在底部。豎直方向，能夠在左側，能夠在右側。
            <enum name="start" value="0" />
            <enum name="end" value="1" />
        </attr>
    </declare-styleable>

項目地址

Github

TODO

添加「點擊item後，自動調整到合適位置，可顯示超過一屏的tab」的功能