1. 팀 프로젝트 - 키오스크 만들기

1) UISegmentedControl

카테고리 선택 부분을 UIsegmentedControl로 구현해보았다.

가. 사용자 정의 이니셜라이저

class CategorySegmentedControl: UISegmentedControl {
	override init(frame: CGRect) {
    	super.init(frame: frame)
        setSegments()
        ...
    }
}

class MainView: UIView {
	let categorySegment = CategorySegmentedControl()
}

CategorySegmentedControl 클래스를 생성하여 MainView에서 사용하였는데, 다른 커스텀 뷰처럼 CategorySegmentedControl()로 선언하니 오류가 발생했다.

-> 알고보니, 지금까지는 UIStackView 혹은 UIView만 커스텀하여 사용해왔는데, UIView는 frame을 아규먼트로 넘겨주지 않으면 기본적으로 .zero를 사용한다고 한다.

그래서 let mainView = MainView()와 같은 형태로 선언해도 무방했던 것이다.

UIStackView는 UIView를 상속하므로 마찬가지였다.

하지만 UISegmentedControl은 기본값이 제공되지 않기 때문에 직접 아규먼트를 넘겨주어야 한다.

let categorySegment = CategorySegmentedControl(frame: .zero)

위와 같이 선언하니 문제없이 작동하였다.

나. backgroundColor 설정하기

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

segmentedControl의 배경색을 변경하였으나 제대로 적용되지않고 어두침침하게 나왔다.

segmentedControl은 기본적으로 각 세그먼트에 회색 이미지 뷰를 배치한다고 한다.

즉, backgroundColor 위에 (흐릿한) 회색 이미지 뷰가 올라간다.

그래서 backgroundColor를 변경했음에도 위에 회색이 겹쳐지니 뭔가 칙칙하게 보이는 것이다.

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

segment 수 만큼의 subview로 사용되는 imageView를 가려주면 의도했던 backgroundColor를 볼 수 있다.

단, 각 segment 간의 구분선을 볼 수 없다.

위에서 가린 imageView는 각 segment의 구분선을 함께 포함하고 있어 그런것으로 생각된다.

구분선을 그려주고 싶다면 커스텀 imageView를 생성하여 기본 imageView를 대체해주면 될 것 같다.

참고: How to set backgroundColor of UISegmentedControl to white in iOS 13 - stackOverFlow