[UIKit] collectionView의 셀들을 왼쪽으로 어떻게 정렬할까!? (UICollectionViewFlowLayout, UICollectionViewDelegateFlowLayout)

 

지금 구현해야하는 뷰

Designed by. 안은지 (인스타: @ahnunji)

이렇게 컬렉션뷰를 띄워야한다. 내가 이전에 짜놨던 코드가 있어서 그 코드를 이용할것이다.

 

컬렉션뷰를 띄웠다. 근데 문제가 생겼다.

이렇게 빈공간이 중앙에 생기는 것이다! 기본적으로 컬렉션뷰는 양쪽 레이아웃을 맞추도록 정렬이 되는 것 같다. 그래서 왼쪽으로 정렬하는 코드를 따로 커스텀해주어야한다고 한다.

도전해보자!

 

layoutAttributesForElements()

인터넷에 많은 레퍼런스가 있었고, 그 중 이 메서드를 사용하는 것 같았다.

https://velog.io/@yoonah-dev/CollectionView-Left%EC%A0%95%EB%A0%AC

CollectionView Left정렬

 

class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) ->  [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)?.map { $0.copy() as! UICollectionViewLayoutAttributes }
        var leftMargin: CGFloat = 0.0
        var maxY: CGFloat = -1.0
    
        attributes?.forEach { layoutAttribute in
            guard layoutAttribute.representedElementCategory == .cell else {
                return
            }
            if layoutAttribute.frame.origin.y >= maxY {
                leftMargin = 0.0
            }
            layoutAttribute.frame.origin.x = leftMargin
            leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
            maxY = max(layoutAttribute.frame.maxY , maxY)
        }
        return attributes
    }
}

이렇게 구현하는 것 같았다. 일단 원리를 알아야 내 코드에 적용시킬 수 있으니까 하나하나 뜯어보자.

해당 코드에 대해서 간략히 설명하자면,

커스텀해서 만든 해당 클래스에서는, UICollectionViewLayoutAttributes를 이용해서 컬렉션뷰의 모양을 조절하려고합니다.

• attributes: 여기에는 현재 각각의 셀 내부에 있는 속성들을 전부 map 해서 array 형태로 넣어둔 배열입니다.
  • layoutAttributesForElements : 해당 인스턴스가, 각각의 cell 내부에 있는 모든 레이아웃에 대한 속성을 검색해주고, attributes에 담습니다.
• leftMargin: 왼쪽 정렬을 할 것이기 때문에, 가장 왼쪽에 얼만큼 남기고 왼쪽으로 붙일지 결정하는 수를 CGFloat 형태로 받습니다.
• representedElementCategory: 어떤 범주에 속하는지 카테고리로 나타내줍니다. 즉, 이 속성의 값을 사용하여 레이아웃 속성이 셀, 보조 보기 또는 장식 보기를 위한 것인지 구별할 수 있습니다.

위 속성들을 비교해서, 현재 cell의 속성의 frame이 maxY 보다 크다면, 왼쪽정렬이 되지 않았다고 판단하여 아까 설정한 leftMargin값만 남겨두고 왼쪽으로 붙여버리는 함수입니다.

이렇게 cell에대한 속성을 설정해둔 layout을, CollectionView에 그대로 적용해주면, 왼쪽정렬이 되는 속성을 가진 cell을 layout으로 갖게되어, 왼쪽정렬이 가능해집니다.

이 코드 넣고, flowlayout 넣는 부분에 해당 클래스를 넣어주니까 바로 완료되었다.

private lazy var collectionView: UICollectionView = {
        let layout = **LeftAlignCollectionViewFlowLayout**()
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        layout.scrollDirection = .vertical
        layout.minimumLineSpacing = Size.cellInterval
        layout.minimumInteritemSpacing = Size.cellInterval
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(MyNewsDrawerCollectionViewCell.self, forCellWithReuseIdentifier: MyNewsDrawerCollectionViewCell.className)
        return collectionView
    }()

 

 

코드에서 leftMargin을 제외화고 옆으로 쭉 붙이겠다는 뜻이다. 나는 왼쪽에 완전히 0으로 붙여야하기 때문에 leftMargin을 0으로 바꿔주었다.

 

delegateFlowLayout 이랑 그냥 FlowLayout이랑 차이점?

 

🟣 UICollectionViewFlowLayout

• 아래 처럼, 주로 초기값을 설정하는 경우에 해당 객체를 자주 사용한다. delegate 보다 훨씬 간단하기 떄문이다.

var homeCollectionView: UICollectionView = {
    let layout = **UICollectionViewFlowLayout**()
    **layout.scrollDirection = .vertical
    layout.minimumLineSpacing = 36
    layout.sectionInset = UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0)
    layout.estimatedItemSize = CGSize(width: UIScreen.main.bounds.width - 20*2, height: 200)**

    let collectionView = UICollectionView(frame: .zero,
                                          collectionViewLayout: layout)
    return collectionView
}()

위에처럼 초기 값을 설정하는데 사용 가능하지만, 아래처럼 메서드를 오버라이딩하여 커스텀해준 뒤, 그 레이아웃을 상속받는 방식으로 사용할 수 있다.

class **StretchHeaderLayout**: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        ... 생략
        return layoutAttributes
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

class ViewController: UIViewController {
  @IBOutlet weak var stickyCollectionView: UICollectionView!
	let stickyFlowLayout = **StretchHeaderLayout**()
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

 

동작 방식

아래 그림은 CollectionView와 UICollectionViewFlowLayout 객체가 상호작용하는 방식이다.

그림을 처음 보면, CollectionView가 prepareLayout을 통해서 레이아웃의 초기값을 설정하고, 이후 CollectionView의 크기를 받고, Cell의 크기들을 지정하고 받는 순서대로 이루어진다! 올레 🙌🏻

동작하는 메서드에 대해서 간단하게 알아보쟈굿

• prepare(): 초기에 collectionView의 레이아웃을 설정할 때 호출됩니다. 즉, 사이즈를 위한 어떤 셋팅이 필요할 때, 이 메소드를 override 해서 사용할 수 있다. (CollectionView의 초기설정이 아닌 레이아웃 연산이 일어나기 전이다.)
• layoutAttributesForElements(rectr: ) -> [UICollectionViewLayoutAttributes]? : CollectionView안에 있는 모든 요소에 대한 Layout요소들을 리턴한다. (현재 화면에 보이는 요소)
• layoutAttributesForItem(indexPath: ) -> UICollectionViewLayoutAttributes?: CollectionView에 요구한 IndexPath의 Layout요소들을 리턴한다.
• shouldInvalidateLayout(newBounds: ) -> Bool : Bounds에 변화가 있을 때마다, 함수를 호출할지 결정한다.

 

🟣 UICollectionViewDelegateFlowLayout

• 뷰 컨트롤러에서 해당 프로토콜을 채택해서 데이터에 맞게 collectionView의 레이아웃을 커스텀한다.
• 데이터에 맞게 커스텀헤애햐할 경우에 좋다.
• delegate 대신 써주면 된다..?

참고자료: https://dongminyoon.tistory.com/29