[iOS] header에 deleteButton 추가하기 (+ custom header)

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
}