[iOS/Swift] Progress Bar Gradient / UIProgressView 프로그래스 바 그레디언트 색 주기, 둥글게

위가 원래 UIProgressView

아래가 라이브러리 적용

 

Smitters/GradientProgress: A gradient progress bar (UIProgressView). (github.com)

GitHub - Smitters/GradientProgress: A gradient progress bar (UIProgressView).

---

팟 설치

pod 'GradientProgress'

---

사용법

 사용을 원하는 프로그래스바를 배치. 비교용으로 두 개를 설치함.

 

그리고 적용을 원하는 프로그래스뷰 CustomClass를 GradientProgressBar로 설정

 

 사용을 원하는 ViewCotroller에 라이브러리를 import

 그리고 사용을 원하는 프로그래스바도 IBOutlet 설정. 그럼 적용은 완료

 설정을 하지 않으면 위와 같이 제일 기본 모습으로 실행

 

// 깃 허브 예시
progressView.gradientColors = [UIColor.yellow.cgColor, UIColor.black.cgColor]

// 내가 사용한 방법
progressView.gradientColors = .gradientColors = [UIColor(red: 0.918, green: 0.118, blue: 0.38, alpha: 1).cgColor, UIColor(red: 0, green: 0.737, blue: 0.827, alpha: 1).cgColor]

위의 코드로 색상 변화 적용

 

myProgressBar.cornerRadius = myProgressBar.frame.height / 2
myProgressBar.clipsToBounds = true

네모면 안 이쁘니 라운드 처리

 

겉 테두리가 아니라 속 테두리까지 둥글게 하는 방법은 아래 스택오버플로우에서

How to make rounded corner progress bar in swift? - Stack Overflow

How to make rounded corner progress bar in swift?

알려주지만 라이브러리가 적용되어서 그런지 실패... 그래서 라이브러리 안에서 수정 진행

 

GradientProgressBar 클래스로 이동

내리다 보면 updateGradientLayer 함수 발견

 

// 변경 전
gradientLayer.cornerRadius = cornerRadius

// 변경 후
gradientLayer.cornerRadius = gradientLayer.frame.height / 2

cornerRadius를 높이 나누기 2를 해주면 아래 사진과 같이 라운드가 잘 먹는 모습을 확인

 

---

주의 사항

1. 위에서 설명한 라운드 적용 방법은 라이브러리를 재설치하면 원상 복귀됨.
   • 라이브러리 파일을 직접 건들이면 프로젝트를 주고받거나 백업할 때 꼭 인지할 수 있게 기록
2. 라이브러리 코드를 직접 수정해서 어디서 어떤 문제가 생길지는 장담 못함.
3. 오버라이딩해서 사용하시거나, 방법을 계속 기억하거나, 라이브러리 폴더를 따로 백업하는 게 안전하다고 판단.
4. 깃 백업으로 프로젝트 전달할 때  꼭 상대방에게 알리기