[Swift]다양한 디바이스에 맞춰 셀 사이즈를 조정하고자 할 때 + 사이즈가 안 바뀌었을 때 해결방법 (CollectionViewDelegateFlowLayout 프로토콜)

[Swift]다양한 디바이스에 맞춰 셀 사이즈를 조정하고자 할 때 + 사이즈가 안 바뀌었을 때 해결방법 (CollectionViewDelegateFlowLayout 프로토콜)

 

 

제가 화면 짤 때마다 헷갈리는 부분이라 정리해봅니다. 

 

 

 

콜렉션 뷰의 셀 사이즈를 디바이스에 따라서 조정하고 싶을 때 

 

예를 들어 제가 원하는 화면이 아래와 같다고 가정합시다. 저는 콜렉션 뷰에서 두개의 셀이 한 줄에 위치하고, 각 셀 사이의 여백은 20이며, 셀의 비율은 1:1.4정도의 크기를 원하고, inset이 화면 좌우에 없길 원합니다. 저는 제가 아이폰 13 미니를 쓰든, 맥스를 쓰든 보이는 모양새가 아래와 동일하고 싶습니다. 

완성될 화면은 이러한 모양새를 띌 것입니다.

이렇게 일관된 화면을 보여주기 위해서 저는 해당 화면을 담당하는 UIViewController에 UICollectionViewDelegateFlowLayout 프로토콜을 상속받습니다. 

UIViewController : UIViewController, UICollectionViewDataSource, 
	UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    // code 영역 
     override func viewDidLoad() {
        super.viewDidLoad()
    }
}

CollectionView를 구성하기 위해서 기본적으로 필요한 프로토콜인 UIViewcontroller, UICollectionViewDataSource와 UICollectionViewDelegate 를 포함하여 이렇게 쉼표로 구분하영 상속할 수 있지만 가독성과 편의성을 위해 extension으로 따로 정리합니다.

extension UIViewController : UICollectionViewDelegateFlowLayout  {}

해당 프로토콜에서 셀의 사이즈를 결정하는 것은 collectionView 메서드 중 sizeForItemAt 인자가 있는 메서드를 불러와 정의해주면 됩니다. 

 

위 화면을 토대로 완성된 코드는 아래와 같습니다. 

extension UIViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        let margin: CGFloat = 20
        let width: CGFloat = (collectionView.bounds.width - margin) / 2
        let height: CGFloat = width * 1.4

        return CGSize(width: width, height: height )
    }
}

 

* 해당 콜렉션뷰의 가로길이를 구하는 방법

CollectionView.bounds.width

 

CGSize라는 형태로 사이즈를 리턴해야하기 때문에, 사이즈와 관련된 변수들을 CGFloat 으로 타입 명시를 해주었습니다. 

 

꼭 확인할 부분

(위 코드대로 시뮬레이터에서 보이지 않는다면 이 부분을 꼭 체크해보세요) 

여기서 중요한 것은 해당 콜렉션 뷰의 Size Inspector에서 Estimate size 를 None으로 설정해주어야 합니다.

 

참고로 이 사이즈 인스펙터에서 셀과 행간 여백, 헤더 및 푸터 사이즈, 섹션 inset을 지정해줄 수 있습니다. 여기서 Inset을 지정해주었다면 위의 코드 영역에서 해당 inset 값을 포함하여 셀 사이즈를 계산해주어야 합니다. 

 

만약 Automatic으로 할 경우, 자체적으로 스토리보드에서 지정해준 셀 사이즈와 오토레이아웃을 통해 셀 사이즈를 계산하므로 디바이스에 따라 의도한 형태대로 표현되지 않을 수  있습니다.

 

참고링크

1. UICollectionViewDelegateFlowLayout 문서

https://developer.apple.com/documentation/uikit/uicollectionviewdelegateflowlayout

Apple Developer Documentation

 

2. collectionView(_:layout:sizeForItemAt:)

https://developer.apple.com/documentation/uikit/uicollectionviewdelegateflowlayout/1617708-collectionview

Apple Developer Documentation

 

 

---

마치며 

 

오늘도 읽어주셔서 감사합니다.

 

궁금한 점이 있다면 댓글로, 도움이 되셨다면 공감 부탁드립니다.

혹시 수정하거나 피드백하실  내용 있다면 언제든 댓글로 부탁드립니다.

 

감사합니다.