Tạo Semi Circular Progress cho Android

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é!