Android新建水平節點進度條示例
前言
效果圖
前幾天在網上沒有找到合適的橫向節點進度條，自己動手寫瞭一個，先來看看效果圖
圓圈和文字狀態
我們看到小圓圈和文字有幾種狀態呢？
- 第一個空心的小圓圈是處理完成的狀態
- 第二個實心的小圓圈是處理中的狀態
- 第三個實心的小圓圈是待處理的狀態
沒錯，我們看到瞭小圓圈和文字有三種處理狀態
文字居中
我們寫一個類繼承自AppCompatTextView，通過onMeasure方法得到控件的寬高，通過Paint的getTextBounds（）也可以知道文字的寬高，我們看到有5個節點需要處理，我們把屏幕劃分成5個等份，每個等份都相等，這裡用itemWidth 表示每個相同的等份。文字居中的寫法很簡單，
itemWidth / 2 - textWidth / 2
代碼
package cn.wwj.customview.widget
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Rect
import android.text.TextPaint
import android.util.AttributeSet
import android.util.Log
import androidx.annotation.Nullable
import androidx.appcompat.widget.AppCompatTextView
import androidx.core.content.ContextCompat
import androidx.core.view.marginTop
import cn.wwj.customview.R
import cn.wwj.customview.dp2px
import cn.wwj.customview.sp2px
/**
* 節點進度條
*/
class NodePointProcessBar : AppCompatTextView {
/**
* 文字畫筆
*/
private lateinit var mTextPaint: TextPaint
/**
* 圓畫筆
*/
private lateinit var mCirclePaint: Paint
private var isDebug = false
/**
* 已完成文字顏色
*/
private var mCompleteTextColor: Int = ContextCompat.getColor(context, android.R.color.black)
/**
* 處理中文字顏色
*/
private var mProcessTextColor: Int = ContextCompat.getColor(context, R.color.purple)
/**
* 待處理的文字顏色
*/
private var mWaitProcessTextColor: Int = ContextCompat.getColor(context, R.color.gray_text)
/**
* 繪制的節點個數，由底部節點標題數量控制
*/
private var mCircleCount = 0
private var TAG = "NodePointProcessBar"
/**
* 圓的半徑
*/
private var mCircleRadius = 5f.dp2px()
/**
* 圓圈的邊框線
*/
private var mCircleBorder = 1f.dp2px()
/**
* 線的寬度
*/
private var mLineWidth = 1f.dp2px()
/**
* 線之間的左右邊距
*/
private var mLineMargin = 4f.dp2px()
/**
* 文字和圓圈之間的距離
*/
var mTextCircleMargin = 7f.dp2px()
/**
* 文字的水平邊距
*/
private var mTextLeftRightMargin = 8f.dp2px()
/**
* 計算內容的高度 和 寬度
*/
private var mContentHeight = 0f
private var mContentWidth = 0f
/**
* 節點底部的文字列表
*/
private var mTextList: List<String> = mutableListOf()
/**
* 選中項集合
*/
private var mProcessIndexSet: Set<Int> = mutableSetOf()
/**
* 文字同寬高的矩形，用來測量文字
*/
private var mTextBoundList: MutableList<Rect> = mutableListOf()
/**
* 計算文字寬高的矩形
*/
private val mRect = Rect()
constructor(context: Context) : this(context, null)
constructor(context: Context, @Nullable attrs: AttributeSet?) : this(context, attrs, 0)
constructor(
context: Context,
@Nullable attrs: AttributeSet?,
defStyleAttr: Int
) : super(context, attrs, defStyleAttr) {
val appearance = context.obtainStyledAttributes(attrs, R.styleable.NodePointProcessBar)
mCompleteTextColor = appearance.getColor(
R.styleable.NodePointProcessBar_completedTextColor, mCompleteTextColor
)
mWaitProcessTextColor = appearance.getColor(
R.styleable.NodePointProcessBar_processTextColor, mWaitProcessTextColor
)
mProcessTextColor =
appearance.getColor(
R.styleable.NodePointProcessBar_waitProcessTextColor,
mProcessTextColor
)
isDebug = appearance.getBoolean(
R.styleable.NodePointProcessBar_isDebug, isDebug
)
mTextCircleMargin = appearance.getDimension(
R.styleable.NodePointProcessBar_textCircleMargin, mTextCircleMargin
)
mTextLeftRightMargin = appearance.getDimension(
R.styleable.NodePointProcessBar_textLeftRightMargin, mTextLeftRightMargin
)
mCircleRadius = appearance.getDimension(
R.styleable.NodePointProcessBar_npbCircleRadius, mCircleRadius
)
mCircleBorder = appearance.getDimension(
R.styleable.NodePointProcessBar_circleBorder, mCircleBorder
)
mLineWidth = appearance.getDimension(
R.styleable.NodePointProcessBar_lineWidth, mLineWidth
)
mLineMargin = appearance.getDimension(
R.styleable.NodePointProcessBar_lineMargin, mLineMargin
)
initPaint()
show(mTextList, mProcessIndexSet)
}
/**
* 初始化畫筆屬性
*/
private fun initPaint() {
// 設置文字畫筆
mTextPaint = TextPaint()
mTextPaint.isAntiAlias = true
mTextPaint.textSize = textSize
mTextPaint.color = mWaitProcessTextColor
// 設置圓圈畫筆
mCirclePaint = Paint()
mCirclePaint.isAntiAlias = true
mCirclePaint.color = mProcessTextColor
mCirclePaint.style = Paint.Style.STROKE
mCirclePaint.strokeWidth = mCircleBorder
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
Log.d(TAG, "---------------onMeasure()")
measureText()
val widthSize = if (MeasureSpec.EXACTLY == widthMode) {
MeasureSpec.getSize(widthMeasureSpec)
} else {
mContentWidth.toInt()
}
val heightSize = if (MeasureSpec.EXACTLY == heightMode) {
MeasureSpec.getSize(heightMeasureSpec)
} else {
mContentHeight.toInt()
}
/**
* 設置控件的寬高
*/
setMeasuredDimension(widthSize, heightSize)
calcContentWidthHeight()
}
/**
* 測量文字的長寬，將文字視為rect矩形
*/
private fun measureText() {
Log.d(TAG, "---------------measureText()")
mTextBoundList.clear()
for (name in mTextList) {
mRect.setEmpty()
mTextPaint.getTextBounds(name, 0, name.length, mRect)
mTextBoundList.add(mRect)
}
}
/**
* 獲取內容的高度,如果控件的寬度小於內容的寬度,意味著一行放不下瞭,文字的大小減小1sp,重新測量文字的寬高,重新
*/
private fun calcContentWidthHeight() {
// 一開始沒有傳遞文字的
mContentHeight = if (mTextBoundList.isNotEmpty()) {
mCircleRadius * 2 + mTextCircleMargin + mRect.height() + getBaseline(mTextPaint)
} else {
mTextPaint.getTextBounds("中", 0, 1, mRect)
mCircleRadius * 2 + mTextCircleMargin + mRect.height() + getBaseline(mTextPaint)
}
if (measuredWidth == 0 || mTextBoundList.isEmpty()) {
return
}
mContentWidth = 0f
for (rect in mTextBoundList) {
mContentWidth += rect.width()
}
Log.d(TAG, "---------------measuredWidth=$measuredWidth,mContentWidth=$mContentWidth")
// 如果控件的寬度小於內容的寬度加文本的邊距,意味著一行放不下瞭,文字的大小減小1sp,重新測量文字的寬高後,設置控件得高度
// 如果控件的寬度大於內容的寬度加文本的邊距,意味著一行放得下,設置控件得高度
if (measuredWidth - mContentWidth < (mTextLeftRightMargin * (mTextList.size - 1))) {
mTextPaint.textSize = mTextPaint.textSize - 1f.sp2px()
measureText()
calcContentWidthHeight()
return
}
setMeasuredDimension(measuredWidth, mContentHeight.toInt())
}
override fun onDraw(canvas: Canvas) {
//若未設置節點標題或者選中項的列表，則取消繪制
if (mTextList.isEmpty() || mTextBoundList.isEmpty()) {
return
}
//畫灰色圓圈的個數
mCircleCount = mTextList.size
// 每一段文字的Y坐標
val textY = getBaseline(mTextPaint) + height / 2 + marginTop / 2
mCirclePaint.strokeWidth = mCircleBorder
//繪制文字和圓形
for (i in 0 until mCircleCount) {
if (mProcessIndexSet.contains(i)) {
// 正在處理中
if (mProcessIndexSet.size == i + 1) {
mCirclePaint.style = Paint.Style.FILL
// 正在處理中的文字顏色
mTextPaint.color = mProcessTextColor
mCirclePaint.color = mProcessTextColor
} else {
//處理完成圓圈空心
mCirclePaint.style = Paint.Style.STROKE
//處理完成文字顏色
mTextPaint.color = mCompleteTextColor
mCirclePaint.color = mProcessTextColor
}
} else {
//待處理
mCirclePaint.color = mWaitProcessTextColor
mCirclePaint.style = Paint.Style.FILL
mTextPaint.color = mWaitProcessTextColor
}
//每一段文字寬度
val textWidth = mTextBoundList[i].width()
// 每一段寬度
val itemWidth = width * 1f / mCircleCount
// 每一段文字居中
// |----text----|----text----|
// 一段文字 一段文字
//每一段文字起始的X坐標
val textX = itemWidth / 2f - textWidth / 2f + i * itemWidth
canvas.drawText(mTextList[i], textX, textY, mTextPaint)
//每一個圓圈的Y坐標
val circleY = height / 2f - mCircleRadius - mTextCircleMargin / 2
//每一個圓圈的X坐標
val circleX = itemWidth / 2 + i * itemWidth
canvas.drawCircle(
circleX,
circleY,
mCircleRadius,
mCirclePaint
)
// 畫線,兩個圓圈之間一條線段
mCirclePaint.strokeWidth = mLineWidth
if (i < mCircleCount - 1) {
//已經處理過的線顏色
if (mProcessIndexSet.contains(i + 1)) {
mCirclePaint.color = mProcessTextColor
} else {
// 待處理的線段顏色
mCirclePaint.color = mWaitProcessTextColor
}
// 線段起始 x 坐標
val lineStartX = itemWidth * i + itemWidth / 2f + mCircleRadius + mLineMargin
// 線段結束 x 坐標
val lineEndX =
itemWidth * i + itemWidth + itemWidth / 2f - mCircleRadius - mLineMargin
canvas.drawLine(
lineStartX,
circleY,
lineEndX,
circleY,
mCirclePaint
)
}
Log.d("tag", "--------itemWidth=$itemWidth")
}
if (isDebug) {
mCirclePaint.color = Color.RED
canvas.drawLine(
0f,
height / 2f - 1f.dp2px() / 2,
width * 1F,
height / 2f + 1f.dp2px() / 2,
mCirclePaint
)
}
}
/**
* 供外部調用，展示內容
* @param titles 要展示的內容列表
* @param progressIndexSet 節點選中項集合
*/
fun setNodeData(titles: List<String>, progressIndexSet: Set<Int>) {
mTextList = titles
mProcessIndexSet = progressIndexSet
measureText()
calcContentWidthHeight()
invalidate()
}
/**
* 獲取文字的基線
*/
private fun getBaseline(p: Paint): Float {
val fontMetrics: Paint.FontMetrics = p.fontMetrics
return (fontMetrics.bottom - fontMetrics.top) - fontMetrics.descent
}
}
這裡的show()方法用於展示內容，第一個參數要展示的內容列表，第二個參數代表節點選中項集合，緊接著測量文字的寬高，調用這個方法calcContentWidthHeight（）獲取文字的高度，然後設置文字的寬高，代碼中的註釋寫的很詳細，我們就不再細說瞭
聲明下style
attrs.xml
<declare-styleable name="NodePointProcessBar">
<attr name="completedTextColor" format="color" />
<attr name="processTextColor" format="color" />
<attr name="waitProcessTextColor" format="color" />
<attr name="textCircleMargin" format="dimension" />
<attr name="textLeftRightMargin" format="dimension" />
<attr name="npbCircleRadius" format="dimension" />
<attr name="circleBorder" format="dimension" />
<attr name="lineWidth" format="dimension" />
<attr name="lineMargin" format="dimension" />
<attr name="isDebug" format="boolean" />
</declare-styleable>
新建一個ExtendUtil.kt文件
fun Int.sp2px(): Int {
val displayMetrics = Resources.getSystem().displayMetrics
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, this.toFloat(), displayMetrics)
.toInt()
}
fun Float.sp2px(): Float {
val displayMetrics = Resources.getSystem().displayMetrics
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, this, displayMetrics)
}
fun Int.dp2px(): Int {
val displayMetrics = Resources.getSystem().displayMetrics
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, this.toFloat(), displayMetrics)
.toInt()
}
fun Float.dp2px(): Float {
val displayMetrics = Resources.getSystem().displayMetrics
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, this, displayMetrics)
}
接著創建佈局文件
activity_node_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<cn.wwj.customview.widget.NodePointProcessBar
android:id="@+id/nodePointPb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_marginHorizontal="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:isDebug="false"
app:lineWidth="1dp"
app:lineMargin="5dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
再Activity中使用它
package cn.wwj.customview
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import androidx.appcompat.app.AppCompatActivity
import cn.wwj.customview.widget.NodePointProcessBar
/**
* 節點進度Activity
*/
class NodeProgressBarActivity : AppCompatActivity() {
/**
* 數據結合
*/
private val mTextList: List<String> = mutableListOf("提交申請", "商傢處理", "寄回商品", "商傢退款", "退款成功")
/**
* 正在處理的節點索引結合
*/
private var mProgressIndexSet: Set<Int> = mutableSetOf(0, 1,2,3,4,6)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_node_progress_bar)
val nodePointPb: NodePointProcessBar = findViewById(R.id.nodePointPb)
Handler(Looper.getMainLooper()).postDelayed({
nodePointPb.setNodeData(mTextList, mProgressIndexSet)
}, 1000)
}
}
mTextList數據集合
mProgressIndexSet正在處理的節點索引結合，創建Handler對象模擬調用網絡接口，1秒後返回數據
節點全部處理完成.png
項目地址，在customview這模塊下
https://github.com/githubwwj/MyAndroid
以上就是Android新建水平節點進度條示例的詳細內容，更多關於Android水平節點進度條的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- Android開發Kotlin實現圓弧計步器示例詳解
- Android字體相關知識總結
- android實現倒計時動態圈
- Android自定義view實現圓環進度條效果
- Android自定義View實現隨機數驗證碼