[UIKit] CollectionView의 높이를 콘텐츠 높이에 따라 동적으로 레이아웃 설정하는 법

CollectionView의 높이를 콘텐츠 높이에 따라 동적으로 레이아웃 설정하는 법

대시보드에 마을 주민을 표시해야하는 상황이였는데, 마을 주민을 추가할 때 CollectionView의 높이를 하드코딩하여 임의로 설정하는 것이 아니라 마을 주민이 늘어날 때 마다 높이가 동적으로 설정되었으면 했다.

처음엔 layoutIfNeeded() 메소드만을 사용하여 이를 해결해보려고 했으나, 내가 원하던 동작을 하지 않았다. 어쩔 땐 뷰가 업데이트되고, 업데이트 되지 않는 상황도 있어서 내가 등록한 마을 주민들이 제대로 나오지 않았다.

---

해결 방법

구글링을 통해 여러가지 방법들을 찾아보고 참고하여 문제를 해결해보았다.

private var heightConstraint: NSLayoutConstraint!

먼저 위와 같이 프로퍼티로 constraint를 정의해주었다.

private func updateCollectionViewHeight() {
    let contentHeight = self.collectionView.collectionViewLayout.collectionViewContentSize.height
    self.heightConstraint.constant = contentHeight == .zero ? 60 : contentHeight
}

그리고 CollectionView의 프로퍼티 중 contentSize를 반환하는 프로퍼티를 활용하여 앞서 정의한 heightConstraint 프로퍼티를 업데이트 해주는 기능의 메소드를 구현하였다.

• 콘텐츠가 없어서 높이가 0이라면, 기본값으로 60만큼의 constant를 주도록 하였다.

self.heightConstraint = self.collectionView.heightAnchor.constraint(equalToConstant: 60)

• 그리고 뷰를 맨 처음 초기화 할때는 임의로 constant 값을 60으로 할당해주어 heightConstraint에 값을 할당해주었다.

output.villagers
    .observe(on: MainScheduler.asyncInstance)
    .withUnretained(self)
    .subscribe(onNext: { owner, villagers in

                ...
                        
        owner.updateCollectionViewHeight()
        owner.layoutIfNeeded()
    }).disposed(by: disposeBag)

• 그리고 CollectionView를 바인딩 처리시 마을 주민이 업데이트 될 때마다 앞서 만들었던 메소드를 활용하여 높이를 업데이트 시켜주고 layoutIfNeeded 메소드를 호출하여 뷰를 바로 업데이트하도록 구현하였다.

---

• 참고링크
  • https://stackoverflow.com/questions/52463609/constrain-uicollectionview-height-to-match-height-of-contents
  • https://stackoverflow.com/questions/42437966/how-to-adjust-height-of-uicollectionview-to-be-the-height-of-the-content-size-of