[UIKit] Progress Bar의 높이를 변경하는 방법

Progress Bar의 높이를 변경하는 방법

View를 구성하는 과정에서 ProgressBar를 사용하게 되었는데, 오토 레이아웃으로 높이를 수정해줘도 내가 원하는 모습으로 변화하지 않아서 어떤 방식으로 높이를 설정할 수 있는지 찾아보게 되었다.

• 다양한 방법이 있었다.
  • transform을 활용하기
  • frame을 설정하기

하지만 내가 원했던 방식은 높이를 설정함과 동시에 corenerRadius도 같이 자연스럽게 변경되었으면 했었다.

위 방법은 진짜 높이 조절만 되고 모서리 부분은 전혀 고려하지 않은 방법들이였다.

---

해결 방법

class ProgressBar: UIProgressView {
    private var height: CGFloat = 10
    
    override var intrinsicContentSize: CGSize {
        return CGSize(width: -1.0, height: height)
    }
    
    convenience init(height: CGFloat) {
        self.init(frame: .zero)
        self.height = height
    }
    
    func setHeight(_ height: CGFloat) {
        self.height = height
        setUpCornerRadius()
    }
    
    private func setUpCornerRadius() {
        let radius = layer.bounds.height * 1.5
        layer.cornerRadius = radius
        clipsToBounds = true
        layer.sublayers?.forEach({ layer in
            layer.cornerRadius = radius
        })
        subviews.forEach { view in
            view.clipsToBounds = true
        }
        tintColor = .acHeaderBackground
    }
}

• 먼저 UIProgressView를 상속받은 커스텀 뷰를 만들어 주었고,
• intrinsicContentSize 프로퍼티를 오버라이드하여 편의 이니셜라이저로 초기화시 intrinsicContentSize의 높이를 할당할 수 있도록 구현해주었다.
  • 이렇게 intrinsicContentSize를 직접 건드렸던 이유는 오토 레이아웃을 따로 잡지 않아도 높이를 설정할 수 있게 하고 싶었다.
• 그리고 높이에 따라 radius도 같이 설정하도록 위와 같은 코드를 구현해주었다.
  • UIProgressBar에는 한개의 뷰가 아니라 여러개의 뷰가 있어서 반복문을 통해 모두 변경해줄 수 있도록 구성하였다.
• 이렇게 상속을 통해 커스텀 뷰를 구현하므로써 내가 원하던 뷰를 구현할 수 있게 되었다.
• 프로젝트에서는 위와 같은 커스텀뷰를 재활용하여 사용하고 있다.

---

• 참고링크
  • https://stackoverflow.com/questions/3437564/how-to-increase-height-of-uiprogressview
  • https://medium.com/@aestusLabs/how-to-round-the-corners-of-a-progress-view-with-an-increased-height-effe079271ef