TodoSectionHeader에서 second 헤더 우측 끝에 deleteButton을 추가합니다.
1. deleteButton 추가
- deleteButton이라는 UIButton을 생성하고, 텍스트, 폰트, 텍스트 색상, 배경색 등을 설정
- 버튼은 기본적으로 숨김 상태로 설정(button.isHidden = true)
let deleteButton: UIButton = {
let button = UIButton()
button.setTitle("지우기", for: .normal) // 버튼 텍스트 설정
button.setTitleColor(.challendarBlack60, for: .normal) // 텍스트 색상을 .challendarBlack60으로 설정
button.titleLabel?.font = .pretendardRegular(size: 14) // 폰트를 .pretendardRegular(size: 14)로 설정
button.backgroundColor = .challendarBlack90 // 배경색을 현재 배경과 동일하게 설정
button.isHidden = true // 기본적으로는 숨김 상태로 설정
button.sizeToFit() // 버튼의 크기를 텍스트에 맞게 조정
return button
}()
2. setupViews 메서드
- setupViews 메서드에서 headerLabel과 deleteButton을 TodoSectionHeader에 추가
private func setupViews() {
addSubview(headerLabel)
addSubview(deleteButton)
}
3. configureConstraints 메서드 (디자인 파일과 맞춰 보며 계속 수정.. )
- headerLabel을 leading에 맞추고, centerY를 슈퍼뷰의 중심에 맞추도록 제약 설정 + @
- deleteButton을 trailing에 맞추고, headerLabel의 centerY에 맞추도록 제약 설정 + @
private func configureConstraints() {
headerLabel.snp.makeConstraints { make in
make.leading.equalToSuperview() // leading을 superview에 맞추도록 설정
make.centerY.equalToSuperview().offset(-5) //
}
deleteButton.snp.makeConstraints { make in
make.trailing.equalToSuperview().offset(-23) // 23픽셀 오른쪽으로 이동
make.centerY.equalTo(headerLabel.snp.centerY) // headerLabel의 Y 좌표에 맞추도록 설정
}
}
왜 trailing 에 딱 붙어서 떨어지지 않는지 계층구조를 살펴보니,
아래와 같이 버튼의 너비값이 넓게 잡혀있었다.
너비 값을 delete label의 너비와 동일하게 잡고, trailing 을 make.trailing.equalToSuperview() 로 수정
최종 수정한 configureConstraints 메서드 ▽
private func configureConstraints() {
headerLabel.snp.makeConstraints { make in
make.leading.equalToSuperview() // leading을 superview에 맞추도록 설정
make.centerY.equalToSuperview().offset(-5) // 위치를 위로 5픽셀 올림
}
deleteButton.snp.makeConstraints { make in
make.trailing.equalToSuperview()
make.centerY.equalTo(headerLabel.snp.centerY) // headerLabel의 Y 좌표에 맞추도록 설정
}
}
4. showDeleteButton와 hideDeleteButton 메서드
- showDeleteButton 메서드: deleteButton을 보이도록 설정(button.isHidden = false)
- hideDeleteButton 메서드: deleteButton을 숨기기 (button.isHidden = true)
func showDeleteButton() {
deleteButton.isHidden = false
}
func hideDeleteButton() {
deleteButton.isHidden = true
}
5. viewForSupplementaryElementOfKind 메서드 (TodoViewController.swift 에서!)
- viewForSupplementaryElementOfKind 메서드에서 TodoSectionHeader 구성
- 두 번째 섹션에서만 deleteButton을 표시하고, 다른 섹션에서는 숨기기
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
guard kind == UICollectionView.elementKindSectionHeader else {
return UICollectionReusableView()
}
let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: TodoSectionHeader.identifier, for: indexPath) as! TodoSectionHeader
header.headerLabel.text = indexPath.section == 0 ? "할 일" : "완료된 목록"
// 두 번째 섹션에서만 지우기 버튼을 표시
if indexPath.section == 1 {
header.showDeleteButton()
} else {
header.hideDeleteButton()
}
return header
}
'iOS 앱 개발자 프로젝트' 카테고리의 다른 글
[iOS] Widget - IntentConfiguration (2) (0) | 2024.06.19 |
---|---|
[iOS] Widget - IntentConfiguration (1) (0) | 2024.06.18 |
[iOS] collectionView의 custom header 설정하기 (0) | 2024.06.08 |
[iOS] picker 버튼을 dropdown UIView와 연결하기 (0) | 2024.06.08 |
[iOS] picker 버튼을 UIView로 만들기 (UIButton → UIView) (0) | 2024.06.08 |