안드로이드에서 원형 프로그레스바를 만들고,
1. 테두리를 부드럽게하고,
2. 그래프 선 끝부분을 둥글게 처리하는 방법을 정리한다.
안드로이드 도넛 그래프(원형 프로그레스바) 만드는 방법은 아래글을 참고
[안드로이드] 커스텀 원형 프로그레스 바(도넛 그래프) 만드는 방법
# 원형 프로그레스바 디자인 다듬기
원형 프로그레스바의 테두리/가장자리가 부드럽고, 끝부분은 둥글게 Round 처리 해보자.
1. 테두리 부드럽게 처리
Paint객체.isAntiAlias = true
* 단, 이 설정은 추가 연산이 필요해서 복잡한 뷰의 경우 성능 이슈가 있을 수 있다고 한다.
2. 그래프 선의 끝 가장자리를 둥글게 처리
Paint객체.strokeCap = Paint.Cap.ROUND
class CustomCircleBarView: View {
// 생성자
constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
// 원형 프로그레스바 그리기
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
// Paint 객체 생성
val paint = Paint()
// 1. 회색 원(배경)그리기
paint.color = Color.GRAY
paint.style = Paint.Style.STROKE
paint.strokeWidth = 40f
// 그래프 선의 테두리/가장자리를 부드럽게 처리
paint.isAntiAlias = true
canvas?.drawArc(200f, 200f, 700f, 700f, 0f, 360f, false, paint)
// 2. 파란 원(프로그레스) 그리기
paint.color = Color.GREEN
// 그래프 선의 끝을 둥글게 처리!
paint.strokeCap = Paint.Cap.ROUND
canvas?.drawArc(200f, 200f, 700f, 700f, -90f, 180f, false, paint)
}
}
참고로 Paint객체의 strokeCap에 설정할 수 있는 값은 3종류가 있다.
- Paint.Cap.BUTT
- Paint.Cap.ROUND
- Paint.Cap.SQUARE
자세한 내용은 레퍼런스 참고
https://developer.android.com/reference/kotlin/android/graphics/Paint.Cap?hl=en#summary
이벤트 발생등으로 인한 값 변경에 따라 원형 프로그레스바의 진행률을 다르게 표현하는 방법은
아래 글을 참고
[안드로이드] 원형 프로그레스바 동적으로 조정하는 방법
'개발(Development) > Android(안드로이드)' 카테고리의 다른 글
[안드로이드] 커스텀 뷰 영역 크기 설정: onMeasure(), setMeasuredDimension() (0) | 2021.08.22 |
---|---|
[안드로이드] 원형 프로그레스바 동적으로 조정하는 방법 (0) | 2021.08.21 |
[안드로이드] 커스텀 원형 프로그레스 바(도넛 그래프) 만드는 방법 (0) | 2021.08.21 |
[안드로이드 코틀린] 커스텀 뷰에 터치 이벤트 리스너 등록 방법 (0) | 2021.08.20 |
[안드로이드 코틀린] 커스텀 View 전용 속성 정의 및 사용 방법: attr.xml (0) | 2021.08.20 |
댓글