今天自定義了一個操作步驟欄,雖然在平常的項目中用處不大,但是也值得記錄一下,先看下效果圖
圖中紅圈部分的內容就是效果圖
先看下使用方法,代碼使用了kotlin語言,如果是要java代碼的話,可以自行用去轉化,不難。
1.佈局中使用自定義控件
2.在activity或是Fragment中使用
可以看到,使用了建造者模式提供了很多方法供用戶自己設置屬性,用戶可以設置步驟總數,當前處於哪個步驟,是否顯示間隔線以及間隔線的寬度高度顏色等,備註裏寫的很清楚。
以下是完整自定義組件的完整代碼
package com.example.testproject.widget
import android.content.Context
import android.util.AttributeSet
import android.util.TypedValue
import android.view.Gravity
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.TextView
import com.example.testproject.R
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 {
[email protected](this)
return this@RegisterStepsBar
}
}
}