[iOS] 옵션 선택을 위한 picker 버튼 만들기

세 개의 버튼과

두 개의 분리선이 있는 custom UIView로 picker 버튼을 만들고 기록합니다. 아자.! (੭•̀ᴗ•̀)੭

---

1. PickerBtnView 클래스 정의 및 초기화:

• "기한임박", "등록순", "최신순" 텍스트 추가, 일반 / 선택 상태에 따라 텍스트 색상이 다르게 설정
• 두 개의 분리선(topSeparator, bottomSeparator)은 얇은 선으로 분리
• buttons 배열을 사용하여 세 버튼에 쉽게 접근
• 초기화 메서드(init(frame:) 및 required init?(coder:))는 setupView와 setupActions를 호출해서 뷰를 설정

class PickerBtnView: UIView {
    
    private let button1: UIButton = {
        let button = UIButton()
        button.setTitle("기한임박", for: .normal)
        button.setTitleColor(.challendarBlack60, for: .normal)
        button.setTitleColor(.white, for: .selected)
        button.titleLabel?.font = .pretendardRegular(size: 17)
        return button
    }()
    
    private let button2: UIButton = {
        let button = UIButton()
        button.setTitle("등록순", for: .normal)
        button.setTitleColor(.challendarBlack60, for: .normal)
        button.setTitleColor(.white, for: .selected)
        button.titleLabel?.font = .pretendardRegular(size: 17)
        return button
    }()
    
    private let button3: UIButton = {
        let button = UIButton()
        button.setTitle("최신순", for: .normal)
        button.setTitleColor(.challendarBlack60, for: .normal)
        button.setTitleColor(.white, for: .selected)
        button.titleLabel?.font = .pretendardRegular(size: 17)
        return button
    }()
    
    private let topSeparator: UIView = {
        let view = UIView()
        view.backgroundColor = .challendarBlack60
        return view
    }()
    
    private let bottomSeparator: UIView = {
        let view = UIView()
        view.backgroundColor = .challendarBlack60
        return view
    }()
    
    private var buttons: [UIButton] {
        return [button1, button2, button3]
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
        setupActions()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

 

 

 

2. 뷰 설정 및 레이아웃:

• setupView 메서드 - 뷰에 세 개의 버튼과 두 개의 분리선을 추가
• SnapKit으로 각 버튼과 분리선의 위치 및 크기 설정 ( 회색 분리선 높이 0.3 수정 필요*)
• 뷰의 모서리를 둥글게 설정(cornerRadius: 12) 하고, 배경색 설정 ( .black 은 팀 컬러에 맞게 수정 필요*)

private func setupView() {
    addSubview(button1)
    addSubview(button2)
    addSubview(button3)
    addSubview(topSeparator)
    addSubview(bottomSeparator)
    
    button1.snp.makeConstraints { make in
        make.top.leading.trailing.equalToSuperview()
        make.height.equalTo(44)
    }
    
    button2.snp.makeConstraints { make in
        make.top.equalTo(button1.snp.bottom)
        make.leading.trailing.equalToSuperview()
        make.height.equalTo(44)
    }
    
    button3.snp.makeConstraints { make in
        make.top.equalTo(button2.snp.bottom)
        make.leading.trailing.bottom.equalToSuperview()
        make.height.equalTo(44)
    }
    
    topSeparator.snp.makeConstraints { make in
        make.top.equalTo(button2.snp.top)
        make.leading.trailing.equalToSuperview()
        make.height.equalTo(0.3) // 얇은 실선의 높이
    }
    
    bottomSeparator.snp.makeConstraints { make in
        make.top.equalTo(button2.snp.bottom)
        make.leading.trailing.equalToSuperview()
        make.height.equalTo(0.3) // 얇은 실선의 높이
    }
    
    layer.cornerRadius = 12
    clipsToBounds = true
    backgroundColor = .black
}

 

 

 

 

3. 액션 설정 및 버튼 클릭 이벤트 처리:

• setupActions 메서드 - 각 버튼에 클릭 이벤트 연결
• 버튼 클릭 시 buttonTapped 메서드 호출
• buttonTapped 메서드 - 클릭된 버튼을 선택 상태로 만들고, 다른 버튼의 선택 상태를 해제

private func setupActions() {
    button1.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
    button2.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
    button3.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
}

@objc private func buttonTapped(_ sender: UIButton) {
    buttons.forEach { $0.isSelected = false }
    sender.isSelected = true
}

 

 

 

4. TodoViewController 클래스 정의 + 뷰 추가:

• pickerBtnView라는 인스턴스를 생성하고, 뷰에 추가
• viewDidLoad 메서드에서 pickerBtnView를 화면에 추가하고, SnapKit을 사용하여 위치와 크기를 설정

class TodoViewController: UIViewController {
    
    private let pickerBtnView = PickerBtnView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .challendarBlack80
        view.addSubview(pickerBtnView)
        
        pickerBtnView.snp.makeConstraints { make in
            make.width.equalTo(77)
            make.height.equalTo(133)
            make.left.equalToSuperview().offset(300) // x 좌표 설정
            make.top.equalToSuperview().offset(134) // y 좌표 설정
        }
    }
}

 

 

 

좌) codebase pickerBtn / 우) 피그마 디자인