最近在做項目的時候，發現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>

共用屬性

style樣式說明

如果style設置為 circle_circle可設置以下屬性：

如果style設置為 rect_rect可設置以下屬性：

如果style設置為 circle_rect可設置以下屬性：

如何使用

在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的這里就不再一一展開了，其實很簡單，主要是計算，感興趣的可以看一下源碼，順便Star支持下O(∩_∩)O~~