Tạo Semi Circular Progress cho Android
This post hasn't been updated for 2 years
Mở đầu
Ở bài trước mình đã chia sẽ cách tạo Semi Circular Progress trên iOS, và bài lần này mình sẽ chia sẽ cách làm đối với Android
Ở Android ta có thể vẽ lại View ở hàm onDraw(canvas:), và để vẽ đường tròn khuyết cho progress ta sẽ dùng 1 class rất hữu dụng là Paint cho phép định nghĩa các thuộc tính về màu sắc, kích thước, nét vẽ... được vẽ bằng Canvas.
Demo
Thực hiện
Tạo Custom View
Tạo 1 project mới để demo, từ file dự án tạo file SemiCircleView kế thừa View. Ta sẽ tiến hành vẽ Progress trên CustomView này ở hàm onDraw(canvas:)
Ta sẽ cần 2 paint, 1 cho background màu xám ở dưới và 1 cho phần màu xanh thay đổi được nên ta sẽ tạo ra 2 Paint lần lượt là backgroundPaint và mainPaint, ngoài ra ta sẽ lưu trữ lại giá trị progress để khi hàm onDraw được gọi lại sẽ vẽ lại đúng giá trị mong muốn.
class SemiCircleView constructor(
context: Context, attrs: AttributeSet
) : View(context, attrs) {
private var backgroundPaint: Paint = Paint()
private var mainPaint: Paint = Paint()
private var progress: Float = 0f
private var margin: Float = resources.getDimension(R.dimen.circle_margin) // Lề cho progress, 6dp
}
Hàm cài đặt cho CustomView
Tạo hàm setup với tham số colorRes để truyền vào màu progress mong muốn, sau khi setup paint gọi hàm invalidate để View tiến hành vẽ lại (gọi hàm onDraw)
fun setupUI(colorRes: Int) {
setupPaint(backgroundPaint, R.color.circle_background)
setupPaint(mainPaint, colorRes)
invalidate()
}
setupPaint sẽ thực hiện set các thuộc tính màu sắc, nét vẽ cho Paint
private fun setupPaint(paint: Paint, colorRes: Int) {
paint.isAntiAlias = true // Giúp các viền của view mịn màng hơn
paint.color = ContextCompat.getColor(context, colorRes) // Màu của đường tròn
paint.style = Paint.Style.STROKE // Chọn dạng stroke
paint.strokeCap = Paint.Cap.ROUND // Hình dạng 2 đầu paint (ROUND là bo tròn)
paint.strokeWidth =
resources.getDimension(R.dimen.circle_width) // 12dp, Độ rộng của đường tròn
}
Tiếp theo ở hàm onDraw ta sẽ tiến hành vẽ canvas cho nền và progress dựa trên backgroundPaint và mainPaint
@SuppressLint("DrawAllocation")
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
val frame = RectF(margin, margin,
width.toFloat() - margin,
height.toFloat() - margin) // Set khoảng cách viền margin cho đường tròn không bị tràn lề
canvas?.drawArc(
frame, // Khung bao quanh đường tròn
135f, // Góc bắt đầu vẽ, tính theo độ, full là 360
255f, // Độ dài cung vẽ
false, // Có sử dụng tâm để vẽ không
backgroundPaint
) // Chọn paint vẽ
canvas?.drawArc(frame, 135f, progress * 255f, false, mainPaint) // Vẽ progress
}
Cuối cùng ta sẽ viết hàm để thay đổi giá trị progress
fun setProgress(v: Float) {
val currentProgress = this.progress
val animator = ValueAnimator().apply { // Thực hiện hiệu ứng chuyển động khi thay đổi progress
setValues(PropertyValuesHolder.ofFloat(
"percent",
currentProgress,v
))
duration = 300
interpolator = AccelerateDecelerateInterpolator()
addUpdateListener {
val newValue = it.getAnimatedValue("percent") as Float
this@SemiCircleView.progress = newValue
invalidate()
}
}
animator.start()
}
Demo
Ở layout activity_main ta thêm SemiCircleView (id = circle_view) vừa tạo vào giữa view cha, đặt kích thước 200 x 200, sau đó thêm 1 Textview hiển thị giá trị progress và 1 button để thay đổi progress.
Ở MainActivity tại hàm onCreate ta lần lượt setup circleVuew và gọi hàm setProgress mỗi khi click button sẽ có được giao diện như demo phía trên.
@SuppressLint("SetTextI18n")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val circleView = findViewById<SemiCircleView>(R.id.semi_circle_view)
val progressTv = findViewById<AppCompatTextView>(R.id.progress_tv)
val changeProgressButton = findViewById<AppCompatButton>(R.id.change_progress_button)
circleView.setupUI(R.color.circle_foreground)
changeProgressButton.setOnClickListener {
val progress = Random.nextInt(0,100)
progressTv.text = "$progress %"
circleView.setProgress(progress/100f)
}
}
Kết thúc
Bài viết này mình đã chia sẻ về cách đơn giản để tạo 1 Progress Bar tròn khuyết dùng Paint và vẽ Canvas, mong rằng chia sẻ này sẽ giúp ích cho các bạn.
Xin cảm ơn các bạn đã dành thời gian đọc bài viết và nếu thấy bổ ích hãy cho mình +1 đánh giá động viên nhé!
All Rights Reserved