CollectionView 2탄 - 디바이스 별 Cell 크기 조정

 

지난 포스팅 때에는 컬렉션뷰를 코드베이스로 만드는 것과 레이아웃 설정에 대해서 간단하게 말씀드렸습니다.

이번 포스팅에서는 디바이스별 셀의 똑같은 형태로 보이게 하기 위해서는 어떻게 할 수 있을지에 대해서 알아보도록 하겠습니다.

 

 

1. Scroll - Horizontal 방식일 때,

 

    private func collecionViewFlowLayout() -> UICollectionViewFlowLayout {
        
        let layout = UICollectionViewFlowLayout()
        let deviceWidth = UIScreen.main.bounds.size.width
    
        let spacing: CGFloat = 4
        let inset: CGFloat = 4
        let cellCount: CGFloat = 3
        
        let objectWidth = (deviceWidth - ((spacing * (cellCount - 1) + (inset*2)))) / cellCount
        
        layout.minimumLineSpacing = spacing
        layout.minimumInteritemSpacing = 0
        
        layout.itemSize = CGSize(width: objectWidth, height: 100)
        layout.sectionInset = UIEdgeInsets(top: 50, left: inset, bottom: 50, right: inset)
        
        layout.scrollDirection = .horizontal
        
        return layout
        
        
    }

• 높이는 임의의 숫자를 두었으며, 본 설명에서는 큰 의미가 없습니다.
• 화면의 3개의 셀만 보이고 싶을 때, 셀의 width를 구하는 방식은 다음과 같습니다.
• (디바이스의 Width - (spacing 개수) + ( left inset + bottom inset)) / 화면의 보일 셀의 개수 
• spacing은 셀 간의 간격이기 때문에, 셀의 개수 - 1을 해줘야 합니다.
• 만약 minimumLineSpacing을 사용 시, 정확한 spacing 값을 넣어줘야 하며, 0으로 설정 시 원하는 동작처럼 안될 수 있습니다. -> section Inset이 다르게 적용되기 때문입니다.

 

2. Scroll - Vertical 방식일 때

    private func collecionViewFlowLayout() -> UICollectionViewFlowLayout {
        
        let layout = UICollectionViewFlowLayout()
        let deviceWidth = UIScreen.main.bounds.size.width
    
        let spacing: CGFloat = 4
        let inset: CGFloat = 4
        let cellCount: CGFloat = 3
        
        let objectWidth = (deviceWidth - ((spacing * (cellCount - 1) + (inset*2)))) / cellCount
        
        layout.minimumLineSpacing = spacing
        layout.minimumInteritemSpacing = spacing
        
        layout.itemSize = CGSize(width: objectWidth, height: 100)
        layout.sectionInset = UIEdgeInsets(top: 50, left: inset, bottom: 50, right: inset)
        
        layout.scrollDirection = .vertical
        
        return layout
        
        
    }

• Vertical 방식에서는 minumumLineSpacing과 InteritemSpacing을 설정해 주는 것이 좋습니다.
• 만약 InteritemSpacing을 설정하지 않을 경우, 예상치 못한 결과가 나올 수 있습니다. UICollectionViewFlowLayout이 간격을 자동으로 계산하기 때문에, 명시를 통해 이상하게 계산하지 않도록 해줘야 합니다.

 

 

 

 

3. minimumLineSpacing, minimumInteritemSpacing

• 최소 Spacing의 간격이기 때문에, 계산에 따라 minimum 이상으로 간격이 늘어날 수 있습니다.
• Horziontal과 Vertical에 따라서 사용방식이 달라질 수 있습니다.
• Cell의 width 크기를 적용할 때, spacing간격만큼 빼주기 때문에, spacing의 크기를 굳이 설정하지 않아도 자동으로 원하는 크기에 맞출 수 있습니다.

스크롤 방향	minimumLineSpacing	minimumInteritemSpacing
vertical(세로, 수직)	행 간의 간격	열 간의 간격
horizontal(가로, 수평)	열의 간격	행(셀) 간의 간격

 

 

 

이번 포스팅에서는 디바이스 간의 셀이 동일한 개수가 나올 수 있도록 구현해 봤습니다.

왜 높이는 조절하지 못하냐는 의문을 가질 수 있는데, safe Area를 침범하는 컬렉션뷰의 경우는 현재 코드에서 width를 구하는 것처럼 가능은 합니다. 하지만 safe Area가 있을 경우 현재 코드기준으로는 view의 높이를 정확히 알 수 있는 방법이 없기 때문에 높이를 정확하게 계산할 수는 없습니다.

다음 포스팅에서는 셀의 크기를 개별적으로 설정하는 법과 함께 높이도 설정하는 법을 말씀드리겠습니다.