Android Banner Indicator 轮播图指示器

轮播图 ( banner ) 是 android app 中常用控件，指示器也随之多样化

这次项目大改版，指示器如上图效果，因为开发周期很紧，故首先奉行拿来主义，感觉这种常见的效果网上肯定很多，查找之后大跌眼界；

原本项目有 banner ，自带指示器无法满足 UI 要求，查找之后没有发现可直接使用的，最后决定自定义一个简单可直接使用的 BannerIndicatorView

使用方法非常简单：

// 1 设置指示器个数（一般在设置banner数据时同步设置即可）
mIndicator.initIndicatorCount(3)

// 2 在 banner 切换页面时将下标同步于指示器
mIndicator.changeIndicator(position)

BannerIndicatorView 中注释比较详细，这里不再过多描述，直接上代码;如不关心实现过程，直接将 BannerIndicatorView 和 自定义属性 复制项目中即可；

/**
 * 轮播图指示器
 */
class BannerIndicatorView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : LinearLayoutCompat(context, attrs, defStyleAttr) {

    // 指示器颜色，这里不局限于颜色，可设置 xml
    private var selectColor = 0
    private var normalColor = 0

    // 指示器个数
    private var indicatorCount = 0

    // 选中/未选中 指示器宽高
    private var indicatorSelectWidth = 0f
    private var indicatorSelectHeight = 0f
    private var indicatorNormalWidth = 0f
    private var indicatorNormalHeight = 0f

    private var indicatorMargin = 10f

    private fun initXmlAttrs(context: Context, attrs: AttributeSet?) {
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.BannerIndicatorView)
        indicatorSelectWidth = typedArray.getDimension(R.styleable.BannerIndicatorView_indicator_select_width, 0f)
        indicatorSelectHeight = typedArray.getDimension(R.styleable.BannerIndicatorView_indicator_select_height, 0f)
        indicatorNormalWidth = typedArray.getDimension(R.styleable.BannerIndicatorView_indicator_normal_width, 0f)
        indicatorNormalHeight = typedArray.getDimension(R.styleable.BannerIndicatorView_indicator_normal_height, 0f)
        indicatorMargin = typedArray.getDimension(R.styleable.BannerIndicatorView_indicator_margins, 0f)
        selectColor = typedArray.getResourceId(
            R.styleable.BannerIndicatorView_indicator_select_color,
            R.drawable.shape_indicator_select_tint
        )
        normalColor = typedArray.getResourceId(
            R.styleable.BannerIndicatorView_indicator_normal_color,
            R.drawable.shape_indicator_unselect_tint
        )
        typedArray.recycle()
    }

    // 初始化指示器
    private fun initIndicatorView(context: Context) {

        removeAllViews()

        for (i in 0 until indicatorCount) {
            val ivIndicator = AppCompatImageView(context)

            val widthParam = if (i == 0) indicatorSelectWidth.toInt() else indicatorNormalWidth.toInt()
            val heightParam = if (i == 0) indicatorSelectHeight.toInt() else indicatorNormalHeight.toInt()

            val lp = LayoutParams(widthParam, heightParam)
            lp.leftMargin = if (i == 0) 0 else indicatorMargin.toInt()

            ivIndicator.layoutParams = lp

            // 默认第一个指示器设置选中
            ivIndicator.setBackgroundResource(if (i == 0) selectColor else normalColor)

            addView(ivIndicator)

        }

    }

    // 设置指示器个数
    fun initIndicatorCount(count: Int) {
        this.indicatorCount = count
        initIndicatorView(context)
    }

    // 切换指示器选中未选中
    fun changeIndicator(position: Int) {

        val count = childCount
        for (i in 0 until count) {

            val ivIndicator = getChildAt(i) as AppCompatImageView

            val widthParam =
                if (i == position) indicatorSelectWidth.toInt() else indicatorNormalWidth.toInt()
            val heightParam =
                if (i == position) indicatorSelectHeight.toInt() else indicatorNormalHeight.toInt()

            val lp = LayoutParams(widthParam, heightParam)
            lp.leftMargin = if (i == 0) 0 else indicatorMargin.toInt()

            ivIndicator.layoutParams = lp

            ivIndicator.setBackgroundResource(if (i == position) selectColor else normalColor)

        }

    }

    init {
        initXmlAttrs(context, attrs)
    }

}

自定义属性：

    <!-- banner indicator -->
    <declare-styleable name="BannerIndicatorView">
        <!-- 显示多少个 indicator -->
        <attr name="indicator_count" format="integer" />
        <!-- indicator 宽高 -->
        <attr name="indicator_select_width" format="dimension" />
        <attr name="indicator_select_height" format="dimension" />
        <attr name="indicator_normal_width" format="dimension" />
        <attr name="indicator_normal_height" format="dimension" />
        <!-- indicator 之间边距 -->
        <attr name="indicator_margins" format="dimension" />
        <!-- indicator 颜色 -->
        <attr name="indicator_select_color" format="reference" />
        <attr name="indicator_normal_color" format="reference" />

    </declare-styleable>

在需要使用的布局中添加：

                <cn.zheng.BannerIndicatorView
                    android:id="@+id/mIndicator"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:gravity="center"
                    app:indicator_margins="3dp"
                    app:indicator_select_width="10dp"
                    app:indicator_select_height="4dp"
                    app:indicator_normal_width="4dp"
                    app:indicator_normal_height="4dp"
                    app:indicator_select_color="?attr/drawIndicatorSelect"
                    app:indicator_normal_color="?attr/drawIndicatorUnSelect"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/mBannerCardView" />