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~~谢谢~