[트러블 슈팅] UISearchBar backgroundColor 미적용

⚠️ 문제: UISearchBar.backgroundColor 미적용

 

searchBar.backgroundColor = .red

 

위 코드를 적용했으나 의도한 바와 달리 흐리게 표현되고 있습니다.

 

❗️ 원인: UISearchBarBackground 이미지

 

UI 디버깅을 해보니 .red로 설정된 background 위에 하나의 뷰가 더 올라가 있습니다.

 

UISearchBarBackground 라는 이름의 이미지뷰로 추정됩니다.

 

이때문에 searchBar의 배경 색상 자체는 빨간색으로 잘 변경되었지만 지난번 UISegmentControl 배경 색상을 바꾸면서 겪었던 때와 마찬가지로 이미지뷰가 겹쳐져 의도한 색상으로 보이지 않았던 것 같습니다.

 

🤔 해결과정: backgroundImage를 없애보기

위에서 언급했듯 UISegmentControl.backgroundColor와 비슷한 문제로 보여 당시의 해결 방법을 적용해보았습니다.

searchBar.backgroundImage = nil

 

backgroundImage를 nil로 할당해줘봤는데, 결과는 변하지 않았습니다. (여전히 흐릿한 빨간색)

 

UISearchBar는 3개의 이미지를 가지고 있습니다. 문제 파악을 위해 해당 속성들을 출력해보았습니다.

print(searchBar.backgroundImage)
print(searchBar.scopeBarBackgroundImage)
print(searchBar.largeContentImage)

// 모두 nil 출력

 

세 가지 속성 모두 nil을 출력합니다.

원래부터 존재하지 않았으니 backgroundImage = nil 을 적용하여도 결과가 동일했던 것입니다.

 

그렇다면 커스텀 searchBar를 만들어 layoutSubviews를 건드려봅시다.

class SearchBar: UISearchBar {
	override init(frame: CGRect) {
    	super.init(frame: frame)
        backgroundColor = .red
    }
    
    override func layoutSubviews() {
    	super.layoutSubviews(()
        let imagesView = subviews.compactMap { $0 as? UIImageView }.prefix(1)
        imageView.first!.isHidden = true
    }
}

 

UISegmentControl은 segment 개수만큼 이미지뷰를 가지고 있었습니다.

그래서 layoutSubviews()에서 해당 이미지뷰를 숨기면 설정했던 배경 색상을 그대로 볼 수 있었죠.

 

그러나 UISearchBar에서는 위 방법이 먹히지 않았습니다.

 

우리는 위에서 이미 UISearchBar.backgroundImage 가 nil인 것을 확인했었습니다.

애초에 이미지가 존재하지 않으니 동일한 방법을 사용해도 작동하지 않았던 거겠지요.

 

✅ 해결: searchBarStyle = .minimal로 변경

UISearchBar는 searchBarStyle이라는 속성을 가지고 있습니다.

 

The style UISearchBar.Style.minimal provides no default background color or image but will display one if customized as such.

searchBarStyle | Apple Developer Documentation

 

공식 문서에서 말하길, .default가 아닌 .minimal로 스타일을 설정하면 기본 backgroundColor나 image를 지니고 있지 않다고 합니다.

searchBar.searchBarStyle = .minimal

 

해당 스타일을 적용하자 의도한대로 배경 색상이 적용되었습니다.