[iOS] UiCollectionView Header 동적으로 높이 조절하기

인스타그램의 프로필 화면을 구현하고 있습니다.

프로필 화면을 CollectionView로 구현하기로 했습니다. 데이터가 많지 않아 TableView보다는 CollectionView가 더 적절할 것 같다고 판단했습니다.

상단 부분을 보면 사용자 피드 화면에서도 같은 UI가 사용되기 때문에 header를 xib 파일로 만들어서 재활용하기로 했습니다.

아래 이미지처럼 storyboard를 이용해서 UI를 구성했습니다.

사용자의 이름과 설명 글을 적는 부분에 따라서 header의 높이가 변경됩니다.

 

라니킴
라니킴의 인스타그램입니다.

이런식으로 최소 1줄, 최대 5줄 작성이 가능하고  label이 작성하는 글에 따라서 높이가 조절되도록 했습니다. 

UserProfileHeader

 

작성하는 글에 따라서 header의 높이가 자동으로 계산되서 UI에 반영되도록 했습니다.

높이가 자동으로 변함

 

header를 적용하는 ViewController에 아래 코드를 추가해주면 됩니다!

extension ProfileViewController: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

        let indexPath = IndexPath(row: 0, section: section)
        let headerView = self.collectionView(collectionView, viewForSupplementaryElementOfKind: UICollectionView.elementKindSectionHeader, at: indexPath)
        
        
        return headerView.systemLayoutSizeFitting(CGSize(width: collectionView.frame.width, height: UIView.layoutFittingExpandedSize.height), withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
        
    }
}