[IOS] 원형 프로그레스바(circular progress bar)를 만드는 방법

16 Aug 2023

원형 프로그레스바(circular progress bar)를 만드는 방법에는 여러 가지가 있지만, 가장 일반적인 방법 중 하나는 Core Graphics 프레임워크를 사용하여 직접 그리는 것입니다. 다음은 Core Graphics를 사용하여 원형 프로그레스바를 만드는 예제 코드입니다.

class CircularProgressView: UIView {
    
    var progress: CGFloat = 0 {
        didSet {
            setNeedsDisplay()
        }
    }
    
    override func draw(_ rect: CGRect) {
        // 원의 경로 생성
        let circlePath = UIBezierPath(ovalIn: rect)
        // 원 내부 채우기 색상
        UIColor.lightGray.setFill()
        circlePath.fill()
        
        // 원형 프로그레스바 그리기
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = min(rect.width, rect.height) / 2 * 0.8
        let startAngle = -CGFloat.pi / 2 // 12시 방향부터 시작
        let endAngle = startAngle + progress * 2 * CGFloat.pi // 프로그레스 비율에 따라 끝 각도 결정
        let progressPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        progressPath.lineWidth = 10
        UIColor.blue.setStroke()
        progressPath.stroke()
    }
    
}` 

위 코드에서 progress 프로퍼티를 업데이트하면, 해당 프로그레스바가 다시 그려집니다. 원의 내부를 채우는 색상과 프로그레스바의 색상, 두께 등은 상황에 따라 다르게 설정할 수 있습니다. 또한, 사용자 인터페이스 요소로 사용하기 위해 원형 프로그레스바를 UIView의 서브클래스로 구현하였습니다.

위 코드를 사용하여 원형 프로그레스바를 만들 수 있으며, 원하는 위치에 해당 뷰를 추가하여 사용할 수 있습니다.