Android開發—UIndicator打造多樣式輪播圖指示器

最近在作項目的時候，發現UI對ViewPager輪播圖指示器情有獨鍾，一會要所有是圓點，一會要所有是長條，一會要選中是長條未選中是圓點。而咱們以前的指示器是純自定義的可是隻支持原點，因而先後屢次修改，所以這裏單獨提出來這個指示器，但願能給有須要的朋友帶來一些幫助。這個指示器也對阿里開源庫 UltraViewPager進行了兼容，一樣支持。

UIndicator地址

效果圖

屬性說明文檔

這裏主要就是自定義View，支持的自定義屬性有如下：

<declare-styleable name="Indicator">
        <!--未選中的指示器顏色-->
        <attr name="normal_color" format="reference|color" />
        <!--選中的指示器顏色-->
        <attr name="selected_color" format="reference|color" />
        <!--指示器每一個item之間的間距-->
        <attr name="spacing" format="dimension" />
        <!--指示器排列方向-->
        <attr name="orientation" format="enum">
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1" />
        </attr>

        <!--指示器類型 命名規則：未選中樣式_選中樣式-->
        <attr name="style" format="enum">
            <!--都是圓點-->
            <enum name="circle_circle" value="0"/>
            <!--都是方形-->
            <enum name="rect_rect" value="1" />
            <!--未選中是圓點，選中是方形-->
            <enum name="circle_rect" value="2" />
        </attr>

        <!--都是圓點指示器半徑大小-->
        <attr name="circle_circle_radius" format="dimension" />

        <!--都是方形指示器長度-->
        <attr name="rect_rect_itemWidth" format="dimension" />
        <!--都是方形指示器高度-->
        <attr name="rect_rect_itemHeight" format="dimension" />
        <!--都是方形指示器圓角-->
        <attr name="rect_rect_corner" format="dimension" />

        <!--circle_rect 模式圓點半徑-->
        <attr name="circle_rect_radius" format="dimension" />
        <!--circle_rect 模式方形寬度-->
        <attr name="circle_rect_itemWidth" format="dimension" />
        <!--circle_rect 模式方形高度-->
        <attr name="circle_rect_itemHeight" format="dimension" />
        <!--circle_rect 模式方形圓角-->
        <attr name="circle_rect_corner" format="dimension" />

</declare-styleable>

複製代碼

共用屬性

屬性	說明
normal_color	未選中的指示器顏色
selected_color	選中的指示器顏色
spacing	指示器每一個item之間的間距
orientation	設置指示器排列方向，枚舉類型，有horizontal和vertical
style	枚舉類型，有以下幾種類型

style樣式說明

style	說明
circle_circle	圓點指示器，對應圖中第三個指示器樣式
rect_rect	長條指示器，對應圖中第二個指示器樣式
circle_rect	指示器選中是長條，未選中是圓點，對應圖中第一個指示器樣式

若是style設置爲 circle_circle可設置如下屬性：

屬性	說明
circle_circle_radius	都是圓點指示器半徑大小

若是style設置爲 rect_rect可設置如下屬性：

屬性	說明
rect_rect_itemWidth	條形長度
rect_rect_itemHeight	條形高度
rect_rect_corner	條形圓角

若是style設置爲 circle_rect可設置如下屬性：

屬性	說明
circle_rect_radius	未選中圓點半徑
circle_rect_itemWidth	選中條形長度
circle_rect_itemHeight	選中條形高度
circle_rect_corner	選中條形設置圓角

如何使用

在xml使用的話，例如圖中第四個輪播圖的佈局以下，使用了UltraViewPager：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_marginTop="10dp"
    android:layout_height="120dp">

    <com.tmall.ultraviewpager.UltraViewPager
        android:id="@+id/viewPager4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        app:upv_autoscroll="3000"
        app:upv_infiniteloop="true"
        android:background="@android:color/darker_gray" />

    <com.wzh.viewpager.indicator.UIndicator
        android:id="@+id/indicator4"
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="10dp"
        app:circle_rect_corner="3dp"
        app:circle_rect_itemHeight="4dp"
        app:circle_rect_itemWidth="20dp"
        app:circle_rect_radius="3dp"
        app:normal_color="#99ffffff"
        app:selected_color="#ffffff"
        app:spacing="10dp"
        app:orientation="horizontal"
        app:style="circle_rect" />
</FrameLayout>
    
複製代碼

在代碼裏須要關聯上咱們的ViewPager：

//普通ViewPager使用
...
ViewPager mViewPager1 = findViewById(R.id.viewPager1);
UIndicator uIndicator1 = findViewById(R.id.indicator1);
uIndicator1.attachToViewPager(mViewPager1);

// UltraViewPager使用
...
UltraViewPager mViewPager4 = findViewById(R.id.viewPager4);
UIndicator uIndicator4 = findViewById(R.id.indicator4);
uIndicator4.attachToViewPager(mViewPager4.getViewPager());
複製代碼

如何兼容 UltraViewPager

如下代碼是在UIndicator中：

/**
 * 關聯ViewPager
 * @param viewPager
 */
public void attachToViewPager(ViewPager viewPager) {
    this.viewPager = viewPager;
    PagerAdapter pagerAdapter = viewPager.getAdapter();
    if (pagerAdapter != null) {
        //TODO 若是項目使用了阿里開源庫，UltraViewPager，想要兼容須要用如下方式獲取 itemCount，不然去除這個if條件
        if (pagerAdapter instanceof UltraViewPagerAdapter){
            //從UltraViewPagerAdapter獲取真實的個數
            itemCount = ((UltraViewPagerAdapter)pagerAdapter).getRealCount();
        } else {
            itemCount = pagerAdapter.getCount();
        }
        selection = viewPager.getCurrentItem() % itemCount;
        checkItemCount();
    }

    viewPager.addOnPageChangeListener(this);
}
...
@Override
public void onPageSelected(int i) {
    if (viewPager != null) {
        PagerAdapter pagerAdapter = viewPager.getAdapter();
        if (pagerAdapter != null) {
            //這麼寫能夠兼容循環滾動設置item數量很大的ViewPager
            selection = viewPager.getCurrentItem() % itemCount;
        }
    }
    postInvalidate();
}

複製代碼

結語

關於如何繪製View的這裏就再也不一一展開了，其實很簡單，主要是計算，感興趣的能夠看一下源碼，UIndicator，順便Star支持下O(∩_∩)O~~謝謝~