[ iOS 시행착오 ]Custom Switch

 

원하는 switch 디자인이 Apple의 기본으로 제공하는 UISwitch와 비슷하면서도 달라 커스텀을 진행했다.

 

 

UISwitch

 

testSwitch.transform = CGAffineTransform(scaleX: 2, y: 0.7)

처음에는 기본으로 제공하는 UISwitch의 크기를 줄여 해결하고자 했다. 하지만 정말 사이즈만 조정되어 원하는 UI로 구성할 수 없었다.

이후로도 UISwitch를 커스텀할 방법을 찾아보았지만 위와 같은 방법만 제시되어 다른 방법을 사용해야겠다고 판단했다.

 

 

UIView

switch를 원하는 디자인으로 만들기 위해 가장 근본적인 UIView를 커스텀하기로 했다.

바탕이 되는 bar와 작동되는 걸 보여주는 원형버튼으로 switch를 구분해 view를 생성했다. 이 두 개의 뷰를 겹쳐 하나의 switch로 보이게 구성해 원하는 디자인의 switch를 만들었다.

private func configureButton(frame: CGRect){
        barView = {
            let view = UIView(
                frame: CGRect(
                    x: 0,
                    y: 0,
                    width: frame.width,
                    height: frame.height
                )
            )
            view.backgroundColor = isOn ? onTintColor : offTintColor
            view.layer.cornerRadius = frame.height / 2
            view.layer.masksToBounds = true
            return view
        }()
        
        circleView = {
            let view = UIView(
                frame: CGRect(
                    x: isOn ? frame.width - (circleHorizontalMargin + (circleSize/2)) : circleHorizontalMargin + (circleSize/2),
                    y: circleVerticalMargin,
                    width: circleSize,
                    height: circleSize
                )
            )
            view.backgroundColor = ColorType.white01.color
            view.layer.cornerRadius = circleSize / 2
            view.layer.masksToBounds = true
            
            return view
        }()
        
        guard let circleView = circleView else { return }
        guard let barView = barView else { return }
        self.addSubviews(barView, circleView)
    }

 

 

touchesBegan

UISwitch가 아닌 UIView를 커스텀했기 때문에 touch 이벤트 또한 개발자가 잡아야 했다. UITapGestureRecognizer를 사용할까도 고민했지만, UITapGestureRecognizer는 특정한 개수의 손가락 터치를 인식해 종류 별로 작업을 진행하는 class라서 커스텀 Switch에서는 단순하게 터치 유무에 따라 작업이 이루어지는 touchesBegan(_:with:)가 더 적합하다고 생각했다.

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        isOn.toggle()
    }

 

 

Animation

Switct의 On/Off를 디자인적으로 구분해 주기 위해 isOn 프로퍼티를 생성해 값이 변경될 때마다 bar와 원형 뷰의 색상을 변경했다. 그리고 switch는 색상 뿐만 아니라 원형뷰의 움직임도 있어야 하기 때문에 애니메이션도 적용해야 했다.

var isOn: Bool = false {
        didSet {
            ...
        }
    }

색상 변경과 원형 뷰의 애니메이션도 잘 진행되기는 했지만 원형 뷰가 계속 범위 밖까지 나가는 문제가 생겼다.

switch를 아직 누르지 않은 초기 상태일때는 원하는 위치에 있었지만, switch를 클릭 하면 초기 상태와는 원형 뷰의 위치가 달랐다.

이 문제를 해결하기 위해 할당하는 값도 바꿔보고, constaint도 바꿔보는 등 여러 노력을 했지만 여전히 원하는 위치에 배치되지 않았다.

오래 고민하다 놓치는 부분이 있는 것 같아 초기 상태와 클릭 이벤트에서 차이가 있다는 사실에 집중했다. 알고보니 초기 설정 시에는 원형 뷰 자체의 x에 값을 할당했고, switch 이벤트가 발생한 후에는 원형 뷰의 center.x에 값을 할당하고 있었다.

circleView = {
            let view = UIView(
                frame: CGRect(
                    x: isOn ? 
												frame.width - (circleHorizontalMargin + (circleSize/2)) 
												: circleHorizontalMargin + (circleSize/2),
                    ...
                )
            )
            ...
        }()

UIView.animate(
            withDuration: animationDuration,
            animations: { [weak self] in
                guard let self = self else { return }
                self.circleView?.center.x = self.isOn ? 
																						frame.width - (circleHorizontalMargin + (circleSize/2)) 
																						: circleHorizontalMargin + (circleSize/2)
            }
        )

애니메이션을 만들 때 코드로 x와 y 좌표를 할당해주는데, 어떤 값의 x 또는 y 좌표인지 잘 파악해야 한다는 걸 느끼게 된 문제였다.

 

 

completion

switch On/Off에 따라 BottomSheet 화면 전환 이벤트가 발생해야했다. 파일에 바로 해당 이벤트를 구현해 낼 수도 있었지만, 커스텀 뷰는 재사용성이 중요할 것 같아 completion 클로저를 생성해 이 커스텀 switch를 사용하는 곳마다 원하는 작업을 구현할 수 있도록 했다.

var completion: ((_ isOn: Bool) -> Void) = { isOn in }

기능을 사용자화하는 방법에는 DelegatePattern도 있는데 클로저를 사용한 이유는 커스텀의 규모가 크지 않았기 때문이다. Delegate를 사용하는 Apple 클래스를 생각해보면 대표적으로 UICollectionView와 UITableView가 있다. 이 둘은 Delegate를 통해 사용할 수 있는 메서드가 정말 많다. 하지만 내가 만든 커스텀 Switch같은 경우 단 하나의 클로저만 구성하면 되기 때문에 Delegate 패턴을 사용하지 않기로 결정했다. 또 다른 이유로는 Delegate 패턴에 비해 클로저는 직관적이기 때문에 추후 재사용할 때 편할 것 같았다.