Skip to content

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

Ari edited this page Jul 24, 2022 · 1 revision

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 메소드를 호출하여 뷰를 바로 업데이트하도록 구현하였다.

Clone this wiki locally