UI 구성 작업

club_detail_view

chatting_view

club_detail_view 와 chatting_view 작업을 하던 도중, 네비게이션 바 부분이 겹치는 부분이 많아서 이 부분을 따로 객체로 만들고, VC위에 레이아웃을 잡고 사용하면 좋을 것 같은 생각이 들었습니다.

이를 위해 UIView 를 채택한 CustomNavigationBar class 를 하나 만들어서, 버튼, label 등의 레이아웃을 잡아주었습니다.

final class CustomNavigationBar: UIView {}

이때, 저 두 UI의 차이점이 text와 menuButton의 유무였으므로, text는 사용하지 않을 경우에는 “”(공백)으로 두고, 필요할 경우 init을 통해 주입받아서 사용하도록 설계하였고, menuButton 의 경우에는 hasMenuButton을 통해 분기처리 후 각 상황에 맞춰 layout을 설정해주었습니다.

init(titleLabel: String = "", hasMenuButton: Bool, tintColor: UIColor = .black) {

    super.init(frame: .zero)
    self.hasMenuButton = hasMenuButton
    self.titleLabel.text = titleLabel
    self.tintColor = tintColor
    setUI()
    setStyle()
    setLayout()
    setAddTarget()
}

private func setUI() {
    [backButton,titleLabel,buttonStackView].forEach {
        self.addSubview($0)
    }

    self.buttonStackView.addArrangedSubview(searchButton)

    if hasMenuButton {
        self.buttonStackView.addArrangedSubview(menuButton)
        menuButton.snp.makeConstraints {
            $0.size.equalTo(30)
        }
    }
}

이를 통해 미리 UIView 위에 레이아웃을 잡고 ViewController 에서는 해당 객체를 생성 후 레이아웃만 잡아주면 되는 것 까지 구현을 해주었습니다

// ClubDetailViewController 
private let customNavigationBar = 
    CustomNavigationBar(hasMenuButton: false)
    
// ClubDetailViewController 
    private let customNavigationBar = CustomNavigationBar(
        titleLabel: "",
        hasMenuButton: true
    )

하지만 한가지 문제점이 발생했습니다. 해당 버튼들을 UIViewController 위에 생성을 해준 것이 아닌 UIView 위에 올려두었으므로, VC - View - Button 이런식으로 계층구조가 이루어져 있어서 Button의 동작이 VC에서 감지 및 동작을 못한다는 점이였습니다.

이를 해결해주기 위해서, delegate 패턴을 사용하여 버튼이 동작하였을때, 해당 동작을 VC에 전달해 주는 방법을 채택하였습니다.

protocol CustomNavigationBarDelegate: AnyObject {
    func didTapBackButton()
    func didTapSearchButton()
    func didTapMenuButton()
}