[iOS] collectionView의 custom header 설정하기

헤더뷰의 위치,

헤더뷰와 셀 사이의 간격,

셀의 bottom과 두번째 헤더뷰의 top과의 간격 등

디테일하게 수정할 부분들이 꽤 있습니다.

오늘은 하나씩 하나씩 UI 디테일을 수정했습니다.

---

 

1. 헤더뷰 위치를 왼쪽 이미지처럼 부모뷰 리딩 좌 상단에 딱 맞추기

오른쪽 이미지가 내가 수정해야할 코드베이스 화면

 

수정 전 (오른쪽 이미지)

header.headerLabel.snp.remakeConstraints { make in
    make.top.equalToSuperview().offset(-2)
    make.leading.equalToSuperview().offset(16) // leading을 16으로 설정
}

 

 

수정 후 코드 (leading을 superview에 맞춰 설정)

header.headerLabel.snp.remakeConstraints { make in
    make.top.equalToSuperview().offset(-2)
    make.leading.equalToSuperview() // leading을 superview에 맞춰 동일하게!
}

 

 

2. 위치는 맞췄는데 헤더 텍스트가 다 안보이고 왼쪽 끝이 짤려서 보였고,

 

아래와 걑이 설정되었던 코드를.. 

    func configureConstraint() {
        addSubview(headerLabel)
        headerLabel.snp.makeConstraints { make in
            make.leading.equalToSuperview().offset(16) 
            make.centerY.equalToSuperview()
        }
    }

 

이렇게 수정헤서 텍스트가 잘리지 않도록 configureConstraints() 재설정 

    private func configureConstraints() {
        headerLabel.snp.makeConstraints { make in
            make.leading.equalToSuperview() // leading을 superview에 맞추도록 설정
            make.centerY.equalToSuperview()
        }
    }

 

 

3. 텍스트 짤린 부분은 해결되었는데.. 텍스트 앞의 리딩 값 16이 사라지지 않아서.. 

 

 

headerLabel을 부모 뷰의 leading과 일치하도록 configureConstraints 메서드를 다시 재설정

    private func configureConstraints() {
        headerLabel.snp.makeConstraints { make in
            make.leading.equalToSuperview() // leading을 superview에 맞추도록 설정
            make.centerY.equalToSuperview()
        }
    }

 

 

리딩 값을 0으로 설정하여 왼쪽에 딱 붙이기 성공! 

 

 

 

 

4. 마지막으로 헤더뷰의 높이를 25 픽셀로 맞춰주기 (height 현재 33 -> 수정 25)

 

 

수정 완료 !  ദ്ദി,,-`_´-)੭

 

 

드디어 된건가.. 커스텀 헤더뷰..

하지만 아직도 오늘 해야할 게 남아있다! 야호!