Swift 커스텀뷰 만들어서 재사용하기 (UIButton)

세팅

링크 참고하여 만듬 https://medium.com/flawless-app-stories/reusable-uiviews-in-swift-3f9dca63eaf4

NextButton 이라는 View 클래스와 xib 파일 만들고

xib 에서 디자인 하고 , view에서 init 함수만 만들어준다.

그리고 nib을 클래스 이름과 맞춰 로드 해준다.

class NextButton: UIView {

    @IBOutlet weak var nextButton: UIButton!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    func commonInit(){
        guard let view = loadViewFromNib() else {return }
        self.addSubview(view)
    }
    
    func loadViewFromNib() -> UIView? {
        let nib = UINib(nibName: "NextButton", bundle: nil)
        return nib.instantiate(withOwner: self, options: nil).first as? UIView
    }

}

사용

uiview를 불러온 다음 위치와 크기를 세팅하고

CustomClass -> class 를 아까 만든 NextButton 클래스로 지정해줌

에러1

Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file Code_Sketch/NextButton.swift, line 24

2021-04-21 10:58:05.125149+0900 Code-Sketch[69938:8817026] Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file Code_Sketch/NextButton.swift, line 24

 

NextButton 클래스에서 IBOutlet에 접근했었는데

이게 addSubview가 되기 전에 nil 인 관계로 접근을 할수 없었다.

addSubview 이후로 접근하여 에러 해결

에러2

Thread 1: EXC_BAD_ACCESS (code=2, address=0x16d737ff8)

해결

Files Owner 에도 class 를 지정해주고

UIView에도 Class를 지정해줬었는데 이것을 지우니까 해결됨

 

이벤트 설정

버튼에대한 터치 이벤트는 view 클래스에서 간단히 사용할수 있다.

@IBAction func onTouchDown(_ sender: UIButton) {
        sender.isHighlighted = false
        button.backgroundColor = UIColor(hexString: "45d6df")
        button.tintColor = UIColor(hexString: "ffffff")
        button.setTitleColor(UIColor(hexString: "ffffff"), for: .normal)
        button.borderWidthV = CGFloat(0)

    }
    @IBAction func onTouchUp(_ sender: UIButton) {
        button.backgroundColor = UIColor(hexString: "ffffff")
        button.tintColor = UIColor(hexString: "158d95")
        button.setTitleColor(UIColor(hexString: "158d95"), for: .normal)
        button.borderWidthV = CGFloat(2)
    }

 

그러나 만약 해당 커스텀 view를 사용하는 view 컨트롤러에서

커스텀뷰에 클릭 이벤트를 설정하고 싶다면 rx를 사용해서 쉽게 구현이 가능하다.

뷰 컨트롤러에서 ExitButton(커스텀뷰) 를 불러온 상태이고

커스텀 뷰에서

는 button 이 있다.

뷰 컨트롤러에서 커스텀뷰 안에있는 button에 접근 하면된다.