UIProgressView

다음과 같은 화면을 만들어야 하는데 투표 결과 bar를 어떻게 구현할지 고민을 하다가 UIProgressView를 쓰게 되었다. 

처음에는 UIView 두개를 겹쳐, 가로 길이를 변경할까 생각도 했는데 너무 번거롭더라. 

Progress 수치를 자동으로 표현해주기 위해 UISlider와 UIProgressView 정도를 생각했는데, 굳이 터치를 사용하여 수치를 조정할 필요는 없으므로 간단하게 UIProgressView를 사용해보았다. 

1. ProgressView 추가

먼저 ProgressView를 화면에 추가해준 후, 뷰컨트롤러에 연결해준다. 

@IBOutlet weak var progressView: UIProgressView!

2. 기본설정

1) Style 설정

progressView에는 다음과 같이 두가지 스타일이 제공된다. 

.default는 모서리가 둥근 스타일

.bar는 모서리가 각진 네모

progressView.progressViewStyle = .default
progressView.progressViewStyle = .bar

2) Color 설정

trackTint가 배경색, progressTint가 progress 색상

progressView.progressTintColor = .green
progressView.trackTintColor = .lightGray

2. progress 수치 설정하기

다음과 같이 수치를 바로 설정해줄 수도 있고

progressView.progress = 0.4

다음 함수를 이용해서 animation을 줄 수도 있다. 

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

progressView.setProgress(0.5, animated: true)

이렇게만 설정해주면, 보통 Progress Tint 는 좌측 수치에 적용된다. 

왼쪽이 아니라 오른쪽 수치에 색을 설정해주고 싶다면 다음과 같이 해줄 수 있다. 

progressView.semanticContentAttribute = .forceLeftToRight //default
progressView.semanticContentAttribute = .forceRightToLeft //오른쪽부터 수치 적용

 

 

 

참고 : Customize UISlider and UIProgressView, ProgressView 사용법