Dynamic Height Cell 만들기 - CollectionView + CompositionalLayout

최근 프로젝트를 진행하면서 Dynamic 하게 Cell의 높이를 바꾸고 싶은 경우가 생겼는데,

 

해결하기까지 삽질을 많이 한 것에 비해 해결법이 간단해서 기록으로 남겨보려 합니다.

 

CollectionView 만들기

 

일단 이번글에서는 Compositional Layout을 사용해서 CollectionView를 만들겠습니다.

 

Layout 만들기

func createLayout() -> UICollectionViewCompositionalLayout {
    
    let item = NSCollectionLayoutItem(
        layoutSize: .init(
            widthDimension: .fractionalWidth(1),
            heightDimension: .estimated(1)
        )
    )
    
    let group = NSCollectionLayoutGroup.vertical(
        layoutSize: .init(
            widthDimension: .fractionalWidth(1),
            heightDimension: .estimated(1)
        ), subitems: [item]
    )
    
    let section = NSCollectionLayoutSection(group: group)
    
    section.interGroupSpacing = 5
    
    let layout = UICollectionViewCompositionalLayout(section: section)
    
    return layout
}

 

애플 문서를 보면 estimated는 

 

Use an estimated value if the size of your content might change at runtime, such as when data is loaded or in response to a change in system font size. You provide an initial estimated size and the system computes the actual value later.

 

요약해서 번역하면, estimated를 사용해라 만약 너의 content가 런타임 중에 바뀐다면 데이터가 로드되거나 폰트 사이즈가 바뀌어서 높이를 바꿔줘야 하는 경우처럼.

 

라고 합니다.

 

그래서 높이를 Dynamic하게 바꿔주기 위해 group과 item의 높이를 estimated로 설정해 주었습니다.

 

 

Cell 만들기

 

그리고 이런 셀을 만들어주겠습니다.

import UIKit
import SnapKit

final class DynamicCell: UICollectionViewCell {
    
    static let id = String(describing: DynamicCell.self)
    
    private lazy var myLabel: UILabel = {
        let label = UILabel()
        contentView.addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.font = UIFont.systemFont(ofSize: 18, weight: .bold)
        
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.backgroundColor = .secondarySystemBackground
        layout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func configure(with text: String) {
        myLabel.text = text
    }
}

extension DynamicCell {
    func layout() {
        myLabel.snp.makeConstraints {
            $0.top.equalTo(contentView.snp.top).offset(8)
            $0.leading.equalTo(contentView.snp.leading).offset(12)
            $0.bottom.equalTo(contentView.snp.bottom).offset(-8)
            $0.trailing.equalTo(contentView.snp.trailing)
        }
    }
}

 

UILabel이 약간의 Offset을 가지고 있는 단순한 셀입니다.

 

위의 레이아웃과 셀을 이용해서 간단히 만들면 아래와 같이 잘 나오게 됩니다.

 

 

 

문제가 없어 보이네요, 글의 크기에 맞춰 잘 나옵니다.

 

여기서 셀들을 좀 더 많이 만들어 봅시다.

 

 

오 잘나오는 거 같네요,

 

스크롤을 한 번 해볼까요?

 

 

음 에러가 나오네요.

 

정리해 보자면, 지금 View의 top 이랑 bottom을 셀에서 8씩 inset을 줬는데, 셀의 높이가 1이라서 이것들을 동시에 만족할 수 없다.

 

라는 것 같네요.

 

지금 아래 보이지 않던 셀들은 기본적으로 estimated(1)에서 주어진데로 1로 일단 설정이 되어있어서 나는 오류 같습니다.

 

그래서 estimated를 더 크게 주면 이 에러가 사라지긴 합니다.

 

하지만 셀의 최대 크기를 알지 못한다면 어떨까요 좋은 해결방법이 아닌 거 같습니다.

 

저는 여기서 이 에러를 없애기 위해 참 많은 삽질을 했습니다.

 

해결법부터 말하면, 셀을 만들 때 Constraint에 priority를 잘 설정해주면 됩니다.

 

func layout() {
    myLabel.snp.makeConstraints {
        $0.top.equalTo(contentView.snp.top).offset(8)
        $0.leading.equalTo(contentView.snp.leading).offset(12)
        $0.bottom.equalTo(contentView.snp.bottom).offset(-8)
        $0.trailing.equalTo(contentView.snp.trailing)
    }
}

 

여기서

 

아래와 같이 바꿔줍니다.

 

func layout() {
    myLabel.snp.makeConstraints {
        $0.top.equalTo(contentView.snp.top).offset(8).priority(.high)
        $0.leading.equalTo(contentView.snp.leading).offset(12)
        $0.bottom.equalTo(contentView.snp.bottom).offset(-8)
        $0.trailing.equalTo(contentView.snp.trailing).priority(.high)
    }
}

 

top이랑 bottom에 pritority를 높여줬습니다.

 

다시 실행해 볼까요.

 

 

에러도 안 뜨고 셀 높이도 알맞게 잘 나오네요.

 

 

 

저는 처음에 이 문제를 해결하기 위해 cell의 height constraint를 update 해주는 방법을 사용했는데요,

 

"아 셀의 크기가 너무 작아? 그러면 내가 알맞게 바꿔줄게"라는 생각이었죠..

 

그러면 

 

Changing the translatesAutoresizingMaskIntoConstraints property of a UICollectionViewCell that is managed by a UICollectionView is not supported, and will result in incorrect self-sizing

 

이렇게 네가 바꿀 수 없고 이상하게 나올 거야, 라면서 에러가 나게 됩니다.

 

너가 못하니까 내가 해주겠다는데 왜 막아 이렇게도 생각했었죠. 결국 제가 잘못한 거였지만.

 

그래서 일단은 tableView로 교체하고 automaticDimension을 사용했습니다.

 

특별한 레이아웃이 필요하지 않다면 이것도 좋은 방법인것 같습니다.