세 개의 버튼과
두 개의 분리선이 있는 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 좌표 설정
}
}
}
'iOS 앱 개발자 프로젝트' 카테고리의 다른 글
[iOS] picker 버튼을 UIView로 만들기 (UIButton → UIView) (0) | 2024.06.08 |
---|---|
[iOS] picker 버튼에 이미지 추가하기 (UIButton) (0) | 2024.06.05 |
[iOS] YZCenterFlowLayout 이해하기 (0) | 2024.06.04 |
[iOS] UICollectionView에서 제네릭으로 코드 수정하기 (0) | 2024.06.03 |
[iOS] UICollectionView 내의 Carousel UI 수정하기 (2) (0) | 2024.06.03 |