[UIKit] Dynamic cell sizing - systemLayoutSizeFitting

 

 

TableView/CollectionView를 포함하여 일반적인 View 사용 시, 텍스트 등의 내부 컨텐츠를 바탕으로 사이즈 구성이 필요한 경우가 있습니다.

 

이런 경우에는 Layout Constrains를 기반으로 뷰의 사이즈를 계산하는 

systemLayoutSizeFitting(_:withHorizontalFittingPriority:verticalFittingPriority:)  을 통해 동적으로 사이즈를 계산할 수 있습니다.

 

쿠팡 로켓프레시 상품 리스트

 

대표적으로 위와 같은 화면에서 컨텐츠(텍스트)에 따른 너비 설정이 필요합니다.

 

위와 비슷한 화면을 구성하면서 사용 방법을 알아보겠습니다.

 

위 코드는 CollectionViewCell contentView에 label을 추가하고, constraint를 설정하는 코드입니다.

 

텍스트 기반으로 contentView의 너비를 구하기 위해, Label의 leading, trailing을 contentView와 연관 지어 설정합니다.

 

이는 label의 intrinintrinsicContentSize를 바탕으로 contentView의 너비를 정할 수 있도록 하기 위함입니다.

 

이제 systemLayoutSizeFitting을 사용하여 Cell Size를 구할 수 있습니다.

 

 

Cell Size를 구하기 위해서는 고정적인 높이 값, 너비를 결정하는 String값이 필요하고, 이는 함수 인자를 통해 받도록 구현했습니다.

 

systemLayoutSizeFitting은 특정 뷰를 width, height의 우선순위에 따라 targetSize에 맞는 Size를 계산하여 반환해주는 함수입니다.

 

contentView의 width는 intrinintrinsicContentSize에 fit한 사이즈여야 하므로

 

target size의 width는 layoutFittingCompressedSize(가능한 최소 크기, 설명 참고) 로 설정하고, height는 받아온 값으로 설정합니다.

 

 

target size를 알고 있으니, 이제 width, height에 대한 우선순위만 정해주면 됩니다.

 

height의 경우, targetSize의 height에 반드시 맞출 필요가 있으므로 가장 우선순위가 높은 required로 설정합니다.

 

반면 width의 경우에는 현재의 target size에 맞추는 것이 아니라  (현재는 layoutFittingCompressedSize.width 이므로 최소 크기)

 

content size에 맞게 늘어나야 하므로 다소 우선순위가 낮은 fittingSizeLavel로 설정합니다.

 

 

다음은 target size와 width, height의 우선순위 기반으로 systemLayoutSizeFitting을 적용한 결과입니다.

적용 결과

 

 

이렇게 쿠팡 로켓프레시 상품 리스트와 유사 화면을 구성하면서 systemLayoutSizeFitting 적용 방법에 대하여 알아보았습니다.

 

결론

1. constraint가 잘 설정되어 있다면, 컨텐츠 기반 사이즈를 구할 수 있다.
2. 사이즈를 직접 계산하는 수고로움에서 벗어날 수 있다. (+ 실수 예방)

 

전체 코드(gist)

gist.github.com/NohEunTae/cc8bd3becf0c67fe8b41a87f6a98c992

DynamicCellSizing

 

 

감사합니다.