[iOS] Progress View 사용해보기

승아·2021년 6월 6일

✅⠀Progress View

1. Progress View를 생성하고 Constraints를 추가해줍니다.

저는 Leading, Trailng 은 20 Top은 100으로 설정해주었습니다.

2. Progress View를 꾸며줍니다.

꾸며주기 전 IBOutlet을 추가해줍니다.

progressViewStyle

progressView.progressViewStyle = .default

.default
.bar

default는 모서리가 둥글고 track이 보이네요. 물론 bar도 track color를 설정해주면 보입니다.

ProgressView Color

progressView.progressViewStyle = .default
progressView.progressTintColor = .green
progressView.trackTintColor = .lightGray

색은 이런식으로 바꿔주시면 됩니다. 저는 progressColor를 green으로 trackColor를 lightGray로 설정해주었습니다.

ProgressView 크기 설정

progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)

scaledBy(x:, y: )함수를 사용해 늘려줍니다. x는 너비 y는 높이 값을 나타냅니다.

크기를 늘리다 보니 둥근 모서리가 납작하게 펴졌네요 ... 다시 둥글게 만들어봅시다 !

ProgressView CornerRadius

progressView.clipsToBounds = true 
progressView.layer.cornerRadius = 8
progressView.clipsToBounds = true
progressView.layer.sublayers![1].cornerRadius = 8// 뒤에 있는 회색 track
progressView.subviews[1].clipsToBounds = true

cornerRadius를 설정해주었는데도 모양이 이상하네요 ... 이럴 땐

progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)

우선 크기를 늘려주기 위해 사용했던 위 코드를 지우고

Progress View의 Height을 설정해줍니다. 저는 16으로 설정해주었습니다.

확실히 이게 낫네요 🤭 🤭 🤭

Progress 설정하기

progress를 사용해 progress가 몇 퍼센트 찼는지 정의해줍시다. 0.0 ~ 1.0 사이의 값을 입력하시면 됩니다.

progressView.progress = 0.1

Progress Animation

setProgress 함수를 사용하여 Animation을 적용해봅시다.

func setProgress(_ progress: Float, animated: Bool)

0.0 부터 1.0 사이의 값을 입력합니다.

progressView.setProgress(0.7, animated: true)

시뮬레이터 상에선 완전히 겹쳐보이는데 캡쳐하면 저렇게 나오네요... 😅
아무튼 setProgress를 설정하면 저런식으로 animation이 동작합니다.

Progress Animation Custom

위의 animation이 너무 빠르게 동작하니 지속 시간을 Custom 해봅시다. 제가 보여드리는 방법은 2가지 입니다.

1️⃣ animate(withDuration:animations:)
animate 함수를 사용한 방법입니다.

class func animate(withDuration duration: TimeInterval, 
        animations: @escaping () -> Void)

Animate changes to one or more views using the specified duration.

UIView.animate(withDuration: 3) {
            self.progressView.setProgress(1.0, animated: true)
}

animate 함수를 사용하여 지속시간을 설정해줍니다.

2️⃣ Timer 사용

var time: Float = 0.0
var timer: Timer?

time과 timer를 선언해주고

timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(setProgress), userInfo: nil, repeats: true)

@objc func setProgress() {
    time += 0.1
    progressView.setProgress(time, animated: true)
    if time >= 0.7 {
        timer!.invalidate()
    }
}