[TIL],[UIKit],[TRY],[UIButton 커스텀 뷰]

1. 왜 UIButton을 커스텀하게 되었는가?

위의 이미지처럼 버튼을 3번 사용하게 되는데 중복되는 코드들을 줄일 수 없을까?라는 고민에서 시작하게 되었다.

그 고민의 결과로 UIButton을 커스텀해보자는 생각을 하게 되었다.

2. 사용 전과 후 비교

    func setUpCheckListButton(){
        view.addSubview(checkListButton)
        checkListButton.setTitle("title", for: .normal) // 중복
        checkListButton.setTitleColor(.link, for: .normal) // 중복
        checkListButton.snp.makeConstraints { make in
            make.centerX.equalTo(view.snp.centerX)
            make.top.equalTo(logoImage.snp.bottom).offset(Constant.defalutHeightPadding)
        }
        checkListButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
    }
    
    func setUpCmpListButton(){
        view.addSubview(cmpListButton)
        cmpListButton.setTitle("title", for: .normal) // 중복
        cmpListButton.setTitleColor(.link, for: .normal) // 중복
        cmpListButton.snp.makeConstraints { make in
            make.centerX.equalTo(view.snp.centerX)
            make.top.equalTo(checkListButton.snp.bottom).offset(Constant.defalutHeightPadding)
        }
        cmpListButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
    }
    
    func setUpProfileVCButton(){
        view.addSubview(profileVCButton)
        profileVCButton.setTitle("title", for: .normal) // 중복
        profileVCButton.setTitleColor(.link, for: .normal) // 중복
        profileVCButton.snp.makeConstraints { make in
            make.centerX.equalTo(view.snp.centerX)
            make.top.equalTo(cmpListButton.snp.bottom).offset(Constant.defalutHeightPadding)
        }
        profileVCButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
    }

이렇듯 중복되는 코드들이 있는 것을 확인할 수 있다.

하지만 아래의 코드처럼 MainButton을 커스텀하여 만들어 보자

class MainButton: UIButton {

    init(title:String, fontColor: UIColor) {
        super.init(frame: CGRect.zero)
        self.setTitle(title, for: .normal)
        self.setTitleColor(fontColor, for: .normal)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

private let checkListButton = MainButton(title: "할일 확인하기", fontColor: .link)

private let cmpListButton = MainButton(title: "완료한일 보기", fontColor: .link)

private let profileVCButton = MainButton(title: "ProfileViewContorller", fontColor: .link)


func setUpCheckListButton(){
    view.addSubview(checkListButton)
    checkListButton.snp.makeConstraints { make in
        make.centerX.equalTo(view.snp.centerX)
        make.top.equalTo(logoImage.snp.bottom).offset(Constant.defalutHeightPadding)
    }
    checkListButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
}

func setUpCmpListButton(){
    view.addSubview(cmpListButton)
    cmpListButton.snp.makeConstraints { make in
        make.centerX.equalTo(view.snp.centerX)
        make.top.equalTo(checkListButton.snp.bottom).offset(Constant.defalutHeightPadding)
    }
    cmpListButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
}

func setUpProfileVCButton(){
    view.addSubview(profileVCButton)
    profileVCButton.snp.makeConstraints { make in
        make.centerX.equalTo(view.snp.centerX)
        make.top.equalTo(cmpListButton.snp.bottom).offset(Constant.defalutHeightPadding)
    }
    profileVCButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
}

컴포넌트를 선언하는 시점에 title과 fontColor를 이니셜라이저로 받아 코드를 줄일 수 있었다.

또 한 이러한 경험을 바탕으로 다양한 컴포넌트들에 대한 속성을 미리 커스텀하거나 인자를 받아서 간결한 코드를 구현할 계획이다.