iOS 라이브러리 - KDCircularProgress

상벌점 조회 프로젝트를 진행하던 중 그래프를 그려야 할 일이 생겼습니다.

iOS의 가장 대표적인 그래프 라이브러리인 Charts를 써봤지만

내가 하는 프로젝트의 디자인과 잘 맞지 않는 것 같았어요.

아래 사진과 같은 디자인을 맞춰주어야했는데, 마음대로 되는 게 아니더라고요.

그래서 제 맘에 맞는 라이브러리를 찾기 시작했고, 몇 번의 검색 끝에 제 마음에 드는 라이브러리를 찾을 수 있었습니다!

 

Github : https://github.com/kaandedeoglu/KDCircularProgress

kaandedeoglu/KDCircularProgress

---

아래는 예시 결과물입니다.

 

결과물

---

예제 프로젝트 만들기

 

먼저 pod 설치를 하고,

 

pod 'KDCircularProgress'

 

라이브러리 설치가 끝났다면 view를 스토리보드에 생성해줍니다.

그리고 뷰의 클래스를 KDCircualrProgress로 바꾸면 스토리보드에서 작업할 수도 있습니다!

 

Angle - 화면상으로 보이는 수치
Start Angle - 시작각도
Clockwise - 그래프가 시계방향일지, 반시계방향일지를 지정함
Rounded Corners - 그래프의 모양을 사각으로 처리할것인지 둥글게 처리 할 것인지를 지정함
Lerp Color Mode - 그래프의 컬러를 2개 이상 사용했을때 자연스럽게 처리 할것인지 아닌지 지정함

이 외에도 트랙의 두께, progress의 두께, 발광 효과를 적용할 것인지, 안의 색을 채울 것인지를 지정해줄 수 있어 유용했던 것 같아요.

Rounded Corners를 껐을 때

 

Rounded Corners를 켰을 때

스토리보드를 쓰지 않고, 코드상으로 기능을 구현하고 싶을 때는

import KDCircularProgress

@IBOutlet weak var chart: KDCircularProgress!

라이브러리를 import, IBOulet으로 변수로 지정을 해준 다음

chart.startAngle = -90 // 시작위치 지정
chart.progressThickness = 0.2 // 채우는 선의 굵기 조정
chart.trackThickness = 0.6 // 트랙의 굵기 조정
chart.clockwise = true // 시계방향 or 반시계방향 설정
chart.gradientRotateSpeed = 2 // 그라데이션의 색 바뀜 속도 조절
chart.roundedCorners = false // 그래프의 모양을 둥글게 할것인지 조정 
chart.glowMode = .forward // 그래프 발광 모드 조절
chart.glowAmount = 0.9 // 그래프 발광 모드의 밝기를 조절
chart.set(colors: UIColor.cyan) // 그래프의 색을 조정
chart.animate(toAngle: 90, duration: 0.5, completion: nil) // 그래프에 애니메이션 효과를 어느각도로, 얼마동안 줄지 결정

이런 식으로 조정을 하면 그래프 뷰를 추가할 수 있어요.

 

아래에 전체 소스코드 남겨 놓겠습니다!

import UIKit
import KDCircularProgress

class ViewController: UIViewController {

    @IBOutlet weak var chart: KDCircularProgress!
    @IBOutlet weak var point: UILabel!

    var currentCount:Double = 0
    var maxCount:Double = 5

    override func viewDidLoad() {
        super.viewDidLoad()
        chart.angle = 0
        // Do any additional setup after loading the view.
    }

    // 버튼이 클릭되었을때
    @IBAction func btntapped(_ sender: Any) {
        // 현재 카운트가 최고 카운트와 같거나 작을경우
        if currentCount <= maxCount {
            // 현재 카운트 1증가
            currentCount += 1
            // 새로운 각도 값을 받아옴
            let newAngleValue = newAngle()
            
            // 라벨의 텍스트를 바꿈
            point.text = "\(Int(currentCount))점"
            // 차트의 애니메이션 효과를 적용하여 새로운 각도를 적용
            chart.animate(toAngle: newAngleValue, duration: 0.5, completion: nil)
        }

        // 현재 카운트가 최고 카운트 이상일 경우
        if currentCount > maxCount {
            // 현재 카운트를 0으로 초기화
            currentCount = 0
            // 라벨의 텍스트를 0으로 초기화
            point.text = "0점"
            // 차트의 애니메이션 효과를 적용하여 새로운 각도를 적용
            chart.animate(toAngle: 0, duration: 0.5, completion: nil)
        }
    }
    
    // 현재 카운트를 최고 카운트로 나누고 360을 곱하여 각도를 알아냄
    func newAngle() -> Double {
        return Double(360 * (currentCount / maxCount))
    }
}