[트러블 슈팅] UISegmentedControl 배경 색상 설정하기

⚠️ 문제: 설정한 색상이 제대로 반영되지 않음

class CategorySegmentedControl: UISegmentedControl {
	override init(frame: CGREct) {
    	super.init(frame: frame)
        
        ...
        
        backgroundColor = UIColor(...) // 배경 색상 설정 - #FCF5EB
    }
}

 

backgroundColor를 설정하였으나 의도와 달리 색상이 어두침침하게 보입니다.

 

❗️ 원인: UISegmentedControl의 기본 imageView와의 충돌

UISegmentedControl은 기본적으로 각 세그먼트에 회색의 반투명한 이미지 뷰가 배치된다고 합니다.

 

이때문에 실제 backgroundColor는 변경되었지만 이미지뷰가 존재하여 칙칙한 색깔이 되어버리는 것입니다.

 

✅ 해결: imageView를 숨기기 (isHidden)

class CategorySegmentedControl: UISegmentedControl {
	...
    
    override func layoutSubviews() {
    	super.layoutSubviews()
        
        let imageViews = subviews.compactMap { $0 as? UIImageView }.prefix(numberOfSegments)
        imageViews.forEach { $0.isHidden = true }
    }
}

 

backgroundColor를 가리는 이미지뷰를 isHidden = true 를 통해 가려줍니다.

 

layoutSubviews() 에서 숨김 처리를 하는 이유는, segment의 개수가 변경될 가능성이 있기 때문에 레이아웃이 모두 결정된 시점인 layoutSubviews()에서 segment의 수를 파악하여 해당 수 만큼의 이미지뷰를 가리기 위함입니다.

 

위 코드를 적용하니 의도했던 색상을 볼 수 있었습니다.

 

🤔 segment 간의 구분선은 어디갔을까?

이미지뷰를 숨김 처리한 전후를 살펴보면, 세그먼트 사이의 회색 구분선이 사라진 것을 알 수 있습니다.
이미지뷰를 숨긴 후에 사라진 것이기 때문에 해당 이미지뷰가 구분선을 포함하고 있었기 때문에 구분선이 함께 사라진 것으로 추측할 수 있습니다. (다만, 맥 OS를 26버전으로 업데이트한 이후, imageView.isHidden = false로 두더라도 구분선이 보이지 않는 것을 확인했습니다.. 버전이 업데이트 되면서 UISegmentControl의 디자인이 바뀐것인지는 의문입니다.)
본인만의 구분선을 그려주고 싶다면 커스텀 이미지뷰를 생성하여 위에서는 숨김 처리한 기본 이미지뷰를 대체해주면 될 것으로 생각됩니다.