CollectionView Cell 크기 동적 조절

생성일: 2022년 2월 11일 오후 10:15

사용자들의 댓글들을 보여주는 Collection View에서 Cell의 크기를 댓글의 길이에 맞게 동적으로 조절되게 구현해보자 (댓글의 길이가 길면 Cell의 높이가 길어지게)

CommentViewModel.swift

import UIKit

struct CommentViewModel {

// 댓글의 길이에 맞게 cell의 크기를 조절하기 위해 또다른 UILabel을 만들어서 해당 Label의 크기를 사용 (댓글이 길면 cell의 높이가 길어지게)
    func size(forWidth width:CGFloat) -> CGSize {
        let label = UILabel()
        label.numberOfLines = 0
        label.text = comment.commentText
        label.lineBreakMode = .byWordWrapping
        label.setWidth(width)
        return label.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
    }
    
}

해당 기능을 위한 함수를 Comment ViewModel에 생성한다.

size함수는 넓이를 받아와서 해당 넓이와 댓글의 길이에 맞는 최적화된 높이를 구한다.

이를 위해 댓글(commentText)를 담은 UILabel(cell에서 실제로 활용하는 label이 아닌 높이 산정을 위한 임시 label)을 생성하고 numberOfLines, lineBreakMode, setWidth 등의 설정을 준다.

label.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize) 는 해당 label에 맞는 최적화된 CGSize를 반환한다.

CommentController.swift

//MARK: - UICollectionViewDelegateFlowLayout
extension CommentController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let viewModel = CommentViewModel(comment: comments[indexPath.row])
        let height = viewModel.size(forWidth: view.frame.width).height + 32
        return CGSize(width: view.frame.width, height: height)
    }
    
}

앞서 만든 size함수를 실제 cell크기에 적용시키기 위해 UICollectionViewDelegateFlowLayout 프로토콜을 불러온다. 이번에 적용할 cell의 넓이(width)는 화면 전체 넓이기 때문에 fiew.frame.width를 넘겨주고 padidng을 위한 32를 추가적으로 높이에 더해준다.

이렇게 하면 사용자가 입력한 텍스트의 길이에 맞게 자동으로 Cell들의 크기가 늘어나거나 줄어들어서 보기 좋은 comment 화면이 구성된다.