[Swift] UICollectionView에서 Cell을 왼쪽 정렬(Left Alignment) 하는 방법

안녕하세요~

 

오늘은 CollectionView에서 셀들을 왼쪽정렬하는 방법을 알아보다가 

괜찮은 방법이 있어 정리하려고 합니다.

 

 

 

 

---

먼저 사용하게 될

UICollectionViewFlowLayout에 대해서 간략히 소개하고 시작하겠습니다.

 

FlowLayout

• UICollectionViewFlowLayout 클래스를 이용하여 셀을 원하는 형태로 정렬할 수 있다.
• FlowLayout은 레이아웃 객체가 셀을 선형 경로에 배치하고 최대한 많은 셀을 채우는 것을 말합니다.
• 현재 행에서 레이아웃 객체의 공간이 부족하면 새로운 행을 생성하게 됩니다.

역할

• 플로우 레이아웃 객체를 작성해 컬렉션뷰의 레이아웃 객체로 지정
• 셀의 너비와 높이를 구성
• 셀의 간격을 조절
• 섹션의 헤더 혹은 섹션 푸터를 크기를 지정
• 스크롤 방향을 설정

속성

아래의 이미지를 보면 Attributes는 총 5가지의 메서드를 이용해

셀, 헤더, 푸터의 너비, 높이, 간격 등을 지정해 줄 수 있습니다.

 

 

왼쪽 정렬을 하기 위해 첫 번째 메서드인 ForElements를 사용했습니다.

 

만약 아이템별로 사이즈를 조절하거나 간격 등을 조정하고 싶다면 ForItem을 사용하시면 되고

헤더 혹은 푸터를 조정하고 싶다면 SupplementaryView를

컬렉션뷰의 백그라운드뷰를 조정하고 싶다면 DecorationView를 활용하시면 됩니다.

 

나중에 기회가 된다면 나머지 메서드와 컬렉션뷰에 대해 자세한 내용을 포스팅해 보겠습니다 : - )

방법

플로우 레이아웃 객체를 하나를 만들고, 앞서 말한 ForElements 메서드를 오버라이딩해서 사용하면 됩니다.

// Left Aligned
class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)
        
        var leftMargin = sectionInset.left
        var maxY: CGFloat = -1.0
        attributes?.forEach { layoutAttribute in
            if layoutAttribute.representedElementKind == nil {
                if layoutAttribute.frame.origin.y >= maxY {
                    leftMargin = sectionInset.left
                }
                
                layoutAttribute.frame.origin.x = leftMargin
                
                leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
                maxY = max(layoutAttribute.frame.maxY, maxY)
            }
        }
        return attributes
    }
}

위의 코드는 Cell을 왼쪽 정렬하기 위해 ForElement를 오버라이딩하여 구현한 것입니다.

 

코드를 하나씩 살펴보겠습니다.

 

1. attributes를 선언하고 하고 super 클래스의 Attribute를 가지고 옵니다.

let attributes = super.layoutAttributesForElements(in: rect)

2. leftMargin을 초기 Section.left으로 주는 이유는 시작점을 섹션의 왼쪽 인셋과 같은 값을 주기 위해서입니다. 프로퍼티를 비교해 가면서 행이 바뀌면 다시 같은 값으로 돌아오게 되죠.

var leftMargin = sectionInset.left
if layoutAttribute.frame.origin.y >= maxY {
    leftMargin = sectionInset.left
}

 

3. maxY는 0 이하의 값으로 시작해 셀의 각 y포지션을 비교해 가면서 y포지션을 관리하는 변수라고 생각하시면 좋을 것 같습니다. 셀의 행이 다음인지 아닌지 비교하기 위해 max 메서드를 이용해 비교하고 다음 행으로 넘어가게 되는 원리입니다.

var maxY: CGFloat = -1.0
maxY = max(layoutAttribute.frame.maxY, maxY)

 

4. leftMargin을 이용해 각 셀의 x포지션을 정해주고 해당 셀의 넓이와 간격을 더해가면서 다음 위치를 정할 수 있게 됩니다.

layoutAttribute.frame.origin.x = leftMargin
leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing

5. 적용

작성한 FlowLayout을 CollectionView에 적용해 주시면 됩니다.

let collectionView: UICollectionView = {
        
        let layout = LeftAlignedCollectionViewFlowLayout()
        layout.minimumLineSpacing = 10
        layout.minimumInteritemSpacing = 10
        
        let collectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
        
        return collectionView
}

 

정리

 

위 코드를 구현하고 확인해 보면 다음과 같이 셀이 왼쪽 정렬되어 있는 것을 확인할 수 있습니다.

 

 

[ 내가 하고 싶은 ] 섹션을 보면

[ 코딩 ] , [ 앙큼퐉스! ] , [ 게임 ] 그다음 오게 되는 것이 [ 음주, 가무, 게임 ]인 것을 확인할 수 있습니다.

[ 음주, 가무, 게임 ] 셀이 차지하는 공간이 [ 게임 ] 뒤에 올 수 없게 되니 자연스럽게 다음 행으로 넘어가게 되는 것입니다.

 

앞서 설명했던

"현재 행에서 레이아웃 객체의 공간이 부족하면 새로운 행을 생성하게 됩니다."와 같은 특성 때문입니다.

 

결과적으로

왼쪽의 기준점을 만들어주고 차곡차곡 쌓아가다

셀의 길이가 레이아웃의 범위를 초과한다면 다음행으로

다시 왼쪽 기준점을 만들어 위의 과정을 반복한 것입니다.

 

 

---

 

UICollectionView의 셀들을 왼쪽 정렬하는 방법을 작성해 봤습니다.

조금 더 편한 방법이 있거나 좋은 방법이 있다면 언제든지 댓글 달아주세요. 

감사합니다.

 

그럼 이만 👋🏻 👋🏻 👋🏻