Android 页面指示器 PageIndicatorView

先什么也不说  直接看效果吧  如图

现在开始定义流程

1、定义一个布局 activity_page_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rg_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorDefaultDark"
    android:orientation="horizontal"/>

 

2、定义指示器元素选中与不选中 selector 文件 btn_indicator_selector.xml

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape>
            <corners android:radius="4dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item android:state_checked="true">
        <shape>
            <corners android:radius="4dp" />
            <solid android:color="@color/colorWhite" />
        </shape>
    </item>
</selector>

3、定义组件类  PageIndicatorView.kt

package com.bbx.bmtc.views

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.util.AttributeSet
import android.view.LayoutInflater
import android.widget.LinearLayout
import android.widget.RadioButton
import android.widget.RadioGroup
import com.bbx.bmtc.R

class PageIndicatorView : LinearLayout {

    private var mContext: Context? = null
    private var currentIdx: Int = 0
    private var size: Int = 4
    private lateinit var radioGroup: RadioGroup
    private var isCallAdd: Boolean = false

    constructor(context: Context?) : super(context) {
        mContext = context
    }

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
        mContext = context
    }

    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        mContext = context
    }

    @SuppressLint("NewApi")
    constructor(
        context: Context?,
        attrs: AttributeSet?,
        defStyleAttr: Int,
        defStyleRes: Int
    ) : super(context, attrs, defStyleAttr, defStyleRes) {
        mContext = context
    }

    fun setCurrentIdx(idx: Int, total: Int) {
        currentIdx = idx
        size = total
        isCallAdd = true
        addChildView(radioGroup)
    }

    override fun onFinishInflate() {
        super.onFinishInflate()
        var view = LayoutInflater.from(mContext).inflate(R.layout.activity_page_indicator, this)
        radioGroup = view.findViewById(R.id.rg_horizontal)

        if (!isCallAdd) {
            addChildView(radioGroup)
        }
    }

    private fun addChildView(radioGroup: RadioGroup) {
        radioGroup.removeAllViews()

        for (idx in 0..size) {
            var radioButton = RadioButton(mContext)
            val rlp = LayoutParams(100, 6)
            rlp.setMargins(0, 0, 30, 0)
            radioButton.layoutParams = rlp

            radioButton.setBackgroundResource(R.drawable.btn_indicator_selector)
            radioButton.buttonDrawable = ColorDrawable(Color.TRANSPARENT)

            radioButton.isChecked = idx == currentIdx
            radioButton.id = idx

            radioButton.setOnClickListener {
                //                currentIdx = radioButton.id
//                addChildView(radioGroup)
                var childView = radioGroup.getChildAt(radioButton.id) as RadioButton
                childView.isChecked = childView == radioButton
            }
            radioGroup.addView(radioButton)

            var layoutParams = radioButton.layoutParams as LinearLayout.LayoutParams
            layoutParams.setMargins(0, 0, 20, 0)//4个参数按顺序分别是左上右下
            radioButton.layoutParams = layoutParams
        }
    }
}

 

4、在布局直接引用

<com.bbx.bmtc.views.PageIndicatorView
    android:id="@+id/pageIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
     />

5、在activity用法

var pageIndicator = root.findViewById<PageIndicatorView>(R.id.pageIndicator)
pageIndicator.setCurrentIdx(2,4)// 参数说明 : idx 当前位置 total 总指示器个数