最近在做電動車的充電功能，其中有個充電過程中，隔一段時間去更新充電狀態的功能。充電過程中，相對於數據的改變，電池的電量更受用戶關注。所以這裏面就涉及到自定義View，整個過程主要涉及到測量和繪製，這其中又包括背景顏色繪製、線條的繪製、文本繪製、多邊形的繪製。
測量
測試量設置一個寬高最小值，並且整個自定義包含電池，剩餘部分有文字繪製等，因此電池的寬高並不是測量的寬高。如果對測量模糊的，建議去學一下MeasureSpec，這是我之前寫的一篇文章
MeasureSpec理解
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val dw = MIN_WIDTH + paddingLeft + paddingRight
val dh = MIN_HEIGHT + paddingTop + paddingBottom
measureWidth = resolveSizeAndState(dw, widthMeasureSpec, 0)
measureHeight = resolveSizeAndState(dh, heightMeasureSpec, 0)
batteryHeight = measureHeight / 8 * 5
batteryWidth = if (measureWidth / 10 < limitTextWidth / 2) {
measureWidth - (limitTextWidth / 2 - measureWidth / 10) - LIMIT_TEXT_OFFSET_X
} else {
measureWidth - LIMIT_TEXT_OFFSET_X
}
setMeasuredDimension(measureWidth, measureHeight)
}
多邊形繪製
因爲充電的電池屬於不是長方形，因此不能使用繪製長方形的方式。通過計算進度過程中各個點的座標，連接各個點使之形成一個不規則圖形。項目中主要是繪製等腰梯形，計算每個進度下的四個座標點，當進度有更新的時候去更新path路徑，最後合閉路徑形成梯形。主要代碼如下：
/**
* 繪製進度
*
* @param canvas
* @param path
* @param paint
*/
private fun drawProgress(canvas: Canvas, path: Path, paint: Paint) {
path.reset()
path.moveTo(OFFSET, FLOAT_0)
path.lineTo(FLOAT_0, batteryHeight.toFloat())
path.lineTo((batteryWidth * progress / max).toFloat(), batteryHeight.toFloat())
path.lineTo((batteryWidth - OFFSET * 2) * progress / max + OFFSET, FLOAT_0)
path.lineTo(OFFSET, FLOAT_0)
path.close()
canvas.drawPath(path, paint)
}
說明：其中OFFSET是爲了形成等腰梯形設置一個偏移量，當OFFSET爲0時候則是長方形。
線條繪製
線條的繪製就很簡單，直接調drawLine（）方法，其中關於虛線的繪製，需要設置Paint的屬性pathEffect，其中填虛實線各佔多少。
/**
* 繪製虛線
*
* @param canvas
* @param paint
*/
private fun drawDashLine(canvas: Canvas, paint: Paint) {
val startX = (batteryWidth - OFFSET * 2) / 10f * 9 + OFFSET
val endX = batteryWidth / 10f * 9
canvas.drawLine(startX, FLOAT_0, endX, batteryHeight.toFloat(), paint)
}
文本的繪製
文字的繪製與其他圖形繪製最大的不同就是其繪製的座標點，文本的繪製是找文本的左下座標爲基點。並且文本的繪製還涉及到文本居中的問題，文本的繪製是以textbaseline爲Y方向的座標，這樣才能使文本在垂直方向上居中。其中找textbaseline有兩種方式：
- 第一種：測算獲取文本的高度，這種適合文本不再更改的情況
- 第二種：測算文本FontMetrics屬性，然後計算其baseline
/**
* 繪製進度文本
*
* @param canvas
* @param paint
*/
private fun drawProgressText(canvas: Canvas, paint: Paint) {
progressText = String.format(context.getString(R.string.charging_precent_placeholder), progress)
val textBaseLine = batteryHeight / 2 - (progressFontMetrics.descent + progressFontMetrics.ascent) / 2
canvas.drawText(progressText, 0, progressText.length, (batteryWidth - progressTextWidth) / 2.toFloat(), textBaseLine, paint)
}
狀態保存
自定義View的話有些時候遇到橫豎屏切換，狀態就會改變，因此像系統的很多View組件都是做了狀態保存功能，如果對View狀態保存不是太熟悉的可以上網搜一下相關的文章看一下。
//*************保存進度狀態**********************
override fun onSaveInstanceState(): Parcelable {
val parcelable = super.onSaveInstanceState()
val ss = SavedState(parcelable)
ss.progress = progress
return ss
}
override fun onRestoreInstanceState(state: Parcelable) {
val ss = state as SavedState
super.onRestoreInstanceState(ss.superState)
progress = ss.progress
}
internal class SavedState : BaseSavedState {
var progress = 0
constructor(superState: Parcelable?) : super(superState)
private constructor(save: Parcel) : super(save) {
progress = save.readInt()
}
override fun writeToParcel(restore: Parcel, flags: Int) {
super.writeToParcel(restore, flags)
restore.writeValue(progress)
}
override fun describeContents(): Int {
return 0
}
companion object CREATOR : Parcelable.Creator<SavedState> {
override fun createFromParcel(parcel: Parcel): SavedState {
return SavedState(parcel)
}
override fun newArray(size: Int): Array<SavedState?> {
return arrayOfNulls(size)
}
}
}
完整代碼
代碼
class ChargingProgressView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr) {
companion object {
//屬性默認值
const val PROGRESS = 10 //默認進度
const val LIMIT_MAX = 90 //進度最大值默認
const val PROGRESS_MAX = 100 //默認最大進度
const val BACKGROUND_COLOR = Color.GRAY //默認背景顏色
const val PROGRESS_COLOR = Color.GREEN //默認進度顏色
const val SECONDARY_START_COLOR = Color.TRANSPARENT //默認灰色進度開始顏色
const val SECONDARY_END_COLOR = Color.GREEN //默認灰色進度結束顏色
const val LINE_COLOR = Color.WHITE //默認灰色進度結束顏色
const val LINE_WIDTH = 1F //默認線條寬度
const val PROGRESS_TEXT_COLOR = Color.WHITE //默認進度文本字體顏色
const val PROGRESS_TEXT_SIZE = 15F //默認進度文本字體大小
const val LIMIT_TEXT_COLOR = Color.WHITE //默認限制進度文本字體顏色
const val LIMIT_TEXT_SIZE = 15F //默認限制進度文本字體大小
//參數默認值
const val MIN_WIDTH = 400 //默認最小寬度
const val MIN_HEIGHT = 80 //默認最小寬度
const val OFFSET = 0F //上部偏移量
const val FLOAT_0 = 0F // float 0
const val TRIANGLE_HEIGHT = 10 //三角形高度
const val LIMIT_TEXT_OFFSET_X = 5 //限制進度文本X偏移量
const val LIMIT_TEXT_OFFSET_Y = 5 //限制進度文本Y偏移量
}
//自定義屬性
private var max: Int
private val backgroundColor: Int
private val progressColor: Int
private val secondaryStartColor: Int
private val secondaryEndColor: Int
private val lineColor: Int
private val lineWidth: Float
private val progressTextColor: Int
private val progressTextSize: Float
private val limitTextColor: Int
private val limitTextSize: Float
//可設置屬性 目前只設置這兩種
var limit: Int = LIMIT_MAX
set(value) {
if (value < 0 || value >= max || value == limit) {
return
}
field = value
invalidate()
}
var progress: Int = PROGRESS
set(value) {
if (value < 0 || value > limit || value == progress) {
return
}
field = value
invalidate()
}
//參數
private var measureWidth = 0 //寬度
private var measureHeight = 0 //高度
private var batteryWidth = 0 //電池的寬度
private var batteryHeight = 0 //電池的高度
//繪製背景
private var backgroundPath: Path
private var backgroundPaint: Paint
//繪製線條
private var linePaint: Paint
private var dashLinePaint: Paint
//繪製灰色進度
private var secondaryPath: Path
private var secondaryPaint: Paint
//繪製進度
private var progressPath: Path
private var progressPaint: Paint
//繪製進度文字
private var progressText: String
private var progressTextWidth = 0
private val progressTextPaint: Paint
private val progressTextBound: Rect
private var progressFontMetrics: FontMetrics
//繪製三角形標籤
private val trianglePaint: Paint
private val trianglePath: Path
private val triangleHeight = TRIANGLE_HEIGHT
//繪製進度上限文本
private var limitText: String
private var limitTextWidth = 0
private var limitTextHeight = 0
private val limitTextBound: Rect
private val limitTextPaint: Paint
private val limitFontMetrics: FontMetrics
init {
val ta = context.obtainStyledAttributes(attrs, R.styleable.ChargingProgressView)
progress = ta.getInteger(R.styleable.ChargingProgressView_charging_progress, PROGRESS)
max = ta.getInteger(R.styleable.ChargingProgressView_charging_max, PROGRESS_MAX)
limit = ta.getInteger(R.styleable.ChargingProgressView_charging_limit, LIMIT_MAX)
backgroundColor = ta.getColor(R.styleable.ChargingProgressView_charging_backgroundColor, BACKGROUND_COLOR)
progressColor = ta.getColor(R.styleable.ChargingProgressView_charging_progressColor, PROGRESS_COLOR)
secondaryStartColor = ta.getColor(R.styleable.ChargingProgressView_charging_secondaryStartColor, SECONDARY_START_COLOR)
secondaryEndColor = ta.getColor(R.styleable.ChargingProgressView_charging_secondaryEndColor, SECONDARY_END_COLOR)
lineColor = ta.getColor(R.styleable.ChargingProgressView_charging_lineColor, LINE_COLOR)
lineWidth = ta.getFloat(R.styleable.ChargingProgressView_charging_lineWidth, LINE_WIDTH)
progressTextColor = ta.getColor(R.styleable.ChargingProgressView_charging_progressTextColor, PROGRESS_TEXT_COLOR)
progressTextSize = ta.getFloat(R.styleable.ChargingProgressView_charging_progressTextSize, PROGRESS_TEXT_SIZE)
limitTextColor = ta.getColor(R.styleable.ChargingProgressView_charging_limitTextColor, LIMIT_TEXT_COLOR)
limitTextSize = ta.getFloat(R.styleable.ChargingProgressView_charging_limitTextSize, LIMIT_TEXT_SIZE)
ta.recycle()
//繪製背景
backgroundPath = Path()
backgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
backgroundPaint.color = backgroundColor
backgroundPaint.style = Paint.Style.FILL
//繪製線條
linePaint = Paint(Paint.ANTI_ALIAS_FLAG)
linePaint.color = lineColor
linePaint.strokeWidth = lineWidth
linePaint.style = Paint.Style.FILL
dashLinePaint = Paint(Paint.ANTI_ALIAS_FLAG)
dashLinePaint.color = lineColor
dashLinePaint.strokeWidth = lineWidth
dashLinePaint.pathEffect = DashPathEffect(floatArrayOf(5f, 5f), FLOAT_0)
dashLinePaint.style = Paint.Style.FILL
//繪製灰色進度
secondaryPath = Path()
secondaryPaint = Paint(Paint.ANTI_ALIAS_FLAG)
secondaryPaint.style = Paint.Style.FILL
//繪製進度
progressPath = Path()
progressPaint = Paint(Paint.ANTI_ALIAS_FLAG)
progressPaint.color = progressColor
progressPaint.style = Paint.Style.FILL
//繪製進度文字
progressTextPaint = Paint(Paint.ANTI_ALIAS_FLAG)
progressTextPaint.color = progressTextColor
progressTextPaint.textSize = progressTextSize
progressText = String.format(context.getString(R.string.charging_precent_placeholder), progress)
progressTextBound = Rect()
progressTextPaint.getTextBounds(progressText, 0, progressText.length, progressTextBound)
progressTextWidth = progressTextBound.width()
progressFontMetrics = progressTextPaint.fontMetrics
//繪製三角形標籤
trianglePath = Path()
trianglePaint = Paint(Paint.ANTI_ALIAS_FLAG)
trianglePaint.color = Color.WHITE
trianglePaint.style = Paint.Style.FILL
//繪製進度上限文本
limitTextPaint = Paint(Paint.ANTI_ALIAS_FLAG)
limitTextPaint.color = limitTextColor
limitTextPaint.textSize = limitTextSize
limitText = String.format(context.getString(R.string.charging_limit_max), limit)
limitTextBound = Rect()
limitTextPaint.getTextBounds(limitText, 0, limitText.length, limitTextBound)
limitTextWidth = limitTextBound.width()
limitTextHeight = limitTextBound.height()
limitFontMetrics = limitTextPaint.fontMetrics
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val dw = MIN_WIDTH + paddingLeft + paddingRight
val dh = MIN_HEIGHT + paddingTop + paddingBottom
measureWidth = resolveSizeAndState(dw, widthMeasureSpec, 0)
measureHeight = resolveSizeAndState(dh, heightMeasureSpec, 0)
batteryHeight = measureHeight / 8 * 5
batteryWidth = if (measureWidth / 10 < limitTextWidth / 2) {
measureWidth - (limitTextWidth / 2 - measureWidth / 10) - LIMIT_TEXT_OFFSET_X
} else {
measureWidth - LIMIT_TEXT_OFFSET_X
}
setMeasuredDimension(measureWidth, measureHeight)
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
//先繪製固定背景色
drawBackground(canvas, backgroundPath, backgroundPaint)
//繪製線條
drawLine(canvas, linePaint)
//繪製進度限制線條
drawDashLine(canvas, dashLinePaint)
//繪製灰色進度
drawSecondaryProgress(canvas, secondaryPath, secondaryPaint)
//繪製進度
drawProgress(canvas, progressPath, progressPaint)
//繪製進度文字
drawProgressText(canvas, progressTextPaint)
//繪製三角形標籤
drawTriangle(canvas, trianglePath, trianglePaint)
//繪製最大閾值的文本
drawLimitText(canvas, limitTextPaint)
}
/**
* 繪製進度限度文本
*
* @param canvas
* @param paint
*/
private fun drawLimitText(canvas: Canvas, paint: Paint) {
limitText = String.format(context.getString(R.string.charging_limit_max), limit)
val textBaseLine = batteryHeight + triangleHeight +
limitFontMetrics.descent - limitFontMetrics.ascent + LIMIT_TEXT_OFFSET_Y
canvas.drawText(limitText, 0, limitText.length, (batteryWidth * limit / max - limitTextWidth / 2).toFloat(), textBaseLine, paint)
}
/**
* 繪製進度限度三角標
*
* @param canvas
* @param path
* @param paint
*/
private fun drawTriangle(canvas: Canvas, path: Path, paint: Paint) {
path.reset()
path.moveTo((batteryWidth * limit / max).toFloat(), (batteryHeight).toFloat())
path.lineTo((batteryWidth * limit / max + triangleHeight / 2).toFloat(), (batteryHeight + triangleHeight).toFloat())
path.lineTo((batteryWidth * limit / max - triangleHeight / 2).toFloat(), (batteryHeight + triangleHeight).toFloat())
path.lineTo((batteryWidth * limit / max).toFloat(), (batteryHeight).toFloat())
path.close()
canvas.drawPath(path, paint)
}
/**
* 繪製進度文本
*
* @param canvas
* @param paint
*/
private fun drawProgressText(canvas: Canvas, paint: Paint) {
progressText = String.format(context.getString(R.string.charging_precent_placeholder), progress)
val textBaseLine = batteryHeight / 2 - (progressFontMetrics.descent + progressFontMetrics.ascent) / 2
canvas.drawText(progressText, 0, progressText.length, (batteryWidth - progressTextWidth) / 2.toFloat(), textBaseLine, paint)
}
/**
* 繪製進度
*
* @param canvas
* @param path
* @param paint
*/
private fun drawProgress(canvas: Canvas, path: Path, paint: Paint) {
path.reset()
path.moveTo(OFFSET, FLOAT_0)
path.lineTo(FLOAT_0, batteryHeight.toFloat())
path.lineTo((batteryWidth * progress / max).toFloat(), batteryHeight.toFloat())
path.lineTo((batteryWidth - OFFSET * 2) * progress / max + OFFSET, FLOAT_0)
path.lineTo(OFFSET, FLOAT_0)
path.close()
canvas.drawPath(path, paint)
}
/**
* 繪製灰色進度
*
* @param canvas
* @param path
* @param paint
*/
private fun drawSecondaryProgress(canvas: Canvas, path: Path, paint: Paint) {
path.reset()
path.moveTo((batteryWidth - OFFSET * 2) * progress / max + OFFSET, FLOAT_0)
path.lineTo((batteryWidth - OFFSET * 2) * limit / max + OFFSET, FLOAT_0)
path.lineTo((batteryWidth * limit / max).toFloat(), batteryHeight.toFloat())
path.lineTo((batteryWidth * progress / max).toFloat(), batteryHeight.toFloat())
path.lineTo((batteryWidth - OFFSET * 2) * progress / max + OFFSET, FLOAT_0)
path.close()
paint.shader = LinearGradient(
FLOAT_0, FLOAT_0, batteryWidth.toFloat(),
FLOAT_0, intArrayOf(secondaryStartColor, secondaryEndColor),
null, Shader.TileMode.CLAMP
)
canvas.drawPath(path, paint)
}
/**
* 繪製虛線
*
* @param canvas
* @param paint
*/
private fun drawDashLine(canvas: Canvas, paint: Paint) {
val startX = (batteryWidth - OFFSET * 2) / 10f * 9 + OFFSET
val endX = batteryWidth / 10f * 9
canvas.drawLine(startX, FLOAT_0, endX, batteryHeight.toFloat(), paint)
}
/**
* 繪製線條
* @param canvas
* @param paint
*/
private fun drawLine(canvas: Canvas, paint: Paint) {
for (i in 0..8) {
if (i + 1 != limit * 10 / max) {
val startX = (batteryWidth - 2 * OFFSET) / 10f * (i + 1) + OFFSET
val endX = batteryWidth / 10f * (i + 1).toFloat()
canvas.drawLine(startX, FLOAT_0, endX, batteryHeight.toFloat(), paint)
}
}
}
/**
* 繪製背景
* @param canvas
* @param path
* @param paint
*/
private fun drawBackground(canvas: Canvas, path: Path, paint: Paint) {
path.reset()
path.moveTo((batteryWidth - OFFSET * 2) * progress / max + OFFSET, FLOAT_0)
path.lineTo((batteryWidth * progress / max).toFloat(), batteryHeight.toFloat())
path.lineTo(batteryWidth.toFloat(), batteryHeight.toFloat())
path.lineTo(batteryWidth - OFFSET, FLOAT_0)
path.lineTo((batteryWidth - OFFSET * 2) * progress / max + OFFSET, FLOAT_0)
path.close()
canvas.drawPath(path, paint)
}
//*************保存進度狀態**********************
override fun onSaveInstanceState(): Parcelable {
val parcelable = super.onSaveInstanceState()
val ss = SavedState(parcelable)
ss.progress = progress
return ss
}
override fun onRestoreInstanceState(state: Parcelable) {
val ss = state as SavedState
super.onRestoreInstanceState(ss.superState)
progress = ss.progress
}
internal class SavedState : BaseSavedState {
var progress = 0
constructor(superState: Parcelable?) : super(superState)
private constructor(save: Parcel) : super(save) {
progress = save.readInt()
}
override fun writeToParcel(restore: Parcel, flags: Int) {
super.writeToParcel(restore, flags)
restore.writeValue(progress)
}
override fun describeContents(): Int {
return 0
}
companion object CREATOR : Parcelable.Creator<SavedState> {
override fun createFromParcel(parcel: Parcel): SavedState {
return SavedState(parcel)
}
override fun newArray(size: Int): Array<SavedState?> {
return arrayOfNulls(size)
}
}
}
}
自定義屬性
<declare-styleable name="ChargingProgressView">
<!--進度-->
<attr name="charging_progress" format="integer" />
<!--最大進度-->
<attr name="charging_max" format="integer" />
<!--最大閾值-->
<attr name="charging_limit" format="integer" />
<!--進度條顏色-->
<attr name="charging_progressColor" format="color|reference" />
<!--灰色進度條開始顏色-->
<attr name="charging_secondaryStartColor" format="color|reference" />
<!--灰色進度條結束顏色-->
<attr name="charging_secondaryEndColor" format="color|reference" />
<!--背景顏色-->
<attr name="charging_backgroundColor" format="color|reference" />
<!--線條顏色-->
<attr name="charging_lineColor" format="color|reference" />
<!--線條粗細-->
<attr name="charging_lineWidth" format="float|reference" />
<!--進度文本顏色-->
<attr name="charging_progressTextColor" format="color|reference" />
<!--進度文本字體大小-->
<attr name="charging_progressTextSize" format="float|reference" />
<!--限制進度文本顏色-->
<attr name="charging_limitTextColor" format="color|reference" />
<!--進度文本字體大小-->
<attr name="charging_limitTextSize" format="float|reference" />
</declare-styleable>