今天自定义了一个操作步骤栏，虽然在平常的项目中用处不大，但是也值得记录一下，先看下效果图
图中红圈部分的内容就是效果图
先看下使用方法，代码使用了kotlin语言，如果是要java代码的话，可以自行用去转化，不难。
1.布局中使用自定义控件
2.在activity或是Fragment中使用
可以看到，使用了建造者模式提供了很多方法供用户自己设置属性，用户可以设置步骤总数，当前处于哪个步骤，是否显示间隔线以及间隔线的宽度高度颜色等，备注里写的很清楚。
以下是完整自定义组件的完整代码
class RegisterStepsBar : LinearLayout {
private var mCurrentBackground: Int = R.drawable.shape_circle_step //当前圆圈背景色
private var mPassedBackground: Int = R.drawable.shape_circle_white //通过的圆圈背景色
private var mNormalBackground: Int = R.drawable.shape_circle_gray //未通过的圆圈背景色
private var mSpaceBetween: Int = 25 //间隔
private var mNormalWidth: Int = 14 //未通过的宽度
private var mCurrentWidth: Int = 18 //当前的宽度
private var mCurrentStep: Int = 0 //默认当前步骤下标为0
private var mStepCount: Int = 3 //默认总共3个步骤
private var mLineWidth: Int = 20 //间隔线宽度 默认是20
private var mLineHeight: Int = 1 //间隔线高度 默认是1
private var isShow: Boolean = true //是否显示分隔线
private var currentTextColor: Int = 0 //当前步骤的字体颜色
private var passTextColor: Int = 0 //通过的步骤的字体颜色
private var normalTextColor: Int = 0 //未通过的步骤的字体颜色
private var lineColor: Int = 0 //间隔线颜色
private var textSize: Float = 13f //步骤的字体颜色
private var contentText = emptyArray<String>() //设置文本内容
private var lineView: View? = null
private var tvCurrentStep: TextView? = null
constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
/**
* dp转换为px
*/
private fun dp2px(dp: Float): Int {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resources.displayMetrics).toInt()
}
/**
* 初始化控件，先布局后动态创建组件
*/
fun init() {
if (mStepCount <= 0)
return
if (childCount > 0)
removeAllViews()
orientation = HORIZONTAL
gravity = Gravity.CENTER_VERTICAL
for (item: Int in 0 until mStepCount) {
tvCurrentStep = TextView(context)
if (item < mStepCount - 1 && isShow) {//创建间隔线
lineView = View(context)
lineView!!.setBackgroundResource(lineColor)
val params1 = LayoutParams(dp2px(mLineWidth.toFloat()), dp2px(mLineHeight.toFloat()))
params1.gravity = Gravity.CENTER
params1.leftMargin = mSpaceBetween
lineView!!.layoutParams = params1
}
var background: Int
var width: Int = mNormalWidth
when {
item < mCurrentStep -> {
background = mPassedBackground
tvCurrentStep!!.setTextColor(context.resources.getColor(passTextColor))
}
item == mCurrentStep -> {
background = mCurrentBackground
width = mCurrentWidth
tvCurrentStep!!.setTextColor(context.resources.getColor(currentTextColor))
}
else -> {
background = mNormalBackground
tvCurrentStep!!.setTextColor(context.resources.getColor(normalTextColor))
}
}
tvCurrentStep!!.gravity = Gravity.CENTER
tvCurrentStep!!.textSize = textSize
if (contentText.isNotEmpty())
tvCurrentStep!!.text = contentText[item]
else
tvCurrentStep!!.text = (item + 1).toString()
val params = LayoutParams(width, width)
if (item > 0)
params.leftMargin = mSpaceBetween
tvCurrentStep!!.layoutParams = params
addView(tvCurrentStep)
if (lineView != null) {
addView(lineView)
lineView = null
}
if (tvCurrentStep is ViewGroup)
tvCurrentStep = getChildAt(0) as TextView
tvCurrentStep!!.setBackgroundResource(background)
}
}
/**
* 从Builder中获取到数据
*/
fun setData(barBuilder: BarBuilder) {
this.mCurrentBackground = barBuilder.mCurrentBackground
this.mPassedBackground = barBuilder.mPassedBackground
this.mNormalBackground = barBuilder.mNormalBackground
this.mSpaceBetween = barBuilder.mSpaceBetween
this.mNormalWidth = barBuilder.mNormalWidth
this.mCurrentWidth = barBuilder.mCurrentWidth
this.mCurrentStep = barBuilder.mCurrentStep
this.mStepCount = barBuilder.mStepCount
this.mLineWidth = barBuilder.mLineWidth
this.mLineHeight = barBuilder.mLineHeight
this.isShow = barBuilder.isShow
this.lineColor = barBuilder.lineColor
this.currentTextColor = barBuilder.currentTextColor
this.passTextColor = barBuilder.passTextColor
this.normalTextColor = barBuilder.normalTextColor
this.textSize = barBuilder.textSize
this.contentText = barBuilder.contentText
}
/**
* 建造者模式类 ---------------------------------------------------------------------------
*/
inner class BarBuilder {
var mCurrentBackground: Int = R.drawable.shape_circle_step //当前圆圈背景色
var mPassedBackground: Int = R.drawable.shape_circle_white //通过的圆圈背景色
var mNormalBackground: Int = R.drawable.shape_circle_gray //未通过的圆圈背景色
var mSpaceBetween: Int = 25 //间隔
var mNormalWidth: Int = 36 //未通过的宽度
var mCurrentWidth: Int = 38 //当前的宽度
var mCurrentStep: Int = 0 //默认当前步骤下标为0
var mStepCount: Int = 3 //默认总共3个步骤
var mLineWidth: Int = 20 //间隔线宽度 默认是20
var mLineHeight: Int = 1 //间隔线高度 默认是1
var isShow: Boolean = true //是否显示分隔线
var lineColor: Int = R.color.colorPrimary //间隔线颜色
var currentTextColor: Int = R.color.colorPrimary //当前步骤的字体颜色
var passTextColor: Int = R.color.colorPrimary //通过的步骤的字体颜色
var normalTextColor: Int = R.color.colorPrimary //未通过的步骤的字体颜色
var textSize: Float = 13f //步骤的字体颜色
var contentText = emptyArray<String>() //设置文本内容
/**
* 动态设置多少步骤
*/
fun setUp(stepCount: Int, currentStep: Int): BarBuilder {
this.mStepCount = stepCount
if (currentStep > 0)
this.mCurrentStep = currentStep - 1
return this
}
/**
* 设置分割线的宽度
*/
fun setLineWidth(width: Float, height: Float): BarBuilder {
mLineWidth = dp2px(width)
mLineHeight = dp2px(height)
return this
}
fun setTextSize(size: Float): BarBuilder {
this.textSize = size
return this
}
/**
* 设置圆圈背景色
*/
fun setBackground(currentBg: Int, passedBg: Int, normalBg: Int): BarBuilder {
mCurrentBackground = currentBg
mPassedBackground = passedBg
mNormalBackground = normalBg
return this
}
/**
* 设置圆圈的大小
*/
fun setCircleWidth(currentWidth: Int, normalWidth: Int): BarBuilder {
mCurrentWidth = currentWidth //当前步骤圆圈大小
mNormalWidth = normalWidth //非当前步骤圆圈大小
return this
}
/**
* 是否显示间隔线
*/
fun isShowLine(isShow: Boolean): BarBuilder {
this.isShow = isShow
return this
}
/**
* 设置间隔线的颜色
*/
fun setLineColor(color: Int): BarBuilder {
this.lineColor = color
return this
}
/**
* 设置步骤文本内容
*/
fun setContent(content: Array<String>): BarBuilder {
if (content.size != mStepCount)
return this
else
contentText = content
return this
}
/**
* 设置圆圈跟分隔线的间距或是圆圈跟圆圈之间的间距
*/
fun setSpace(space: Int): BarBuilder {
mSpaceBetween = space
return this
}
/**
* 设置字体的颜色
*/
fun setTextColor(currentTextColor: Int, passTextColor: Int, normalTextColor: Int): BarBuilder {
this.currentTextColor = currentTextColor
this.passTextColor = passTextColor
this.normalTextColor = normalTextColor
return this
}
fun build(): RegisterStepsBar {
this@RegisterStepsBar.setData(this)
return this@RegisterStepsBar
}
}
}
