CollectionView Left정렬

CollectionView가 왼쪽으로 정렬되어 있습니다.
다 그런거 아닌가요!? 라고 생각할 수 있지만 그렇지 않습니다..

CollectionView는 원래 FlowLayout은 왼쪽정렬로 되어 있지 않아요.

그렇기 때문에 저 분들을 왼쪽으로 정렬해보겠습니다.
왼쪽 정렬로 만드는 방법은 다양하게 많은데, 저는 코드를 사용해서 왼쪽 정렬하는 방법을 사용했어요.

왼쪽 정렬을 하기 위해서는 왼쪽 정렬을 하는 FlowLayout코드를 직접 커스텀해서 짜야해요.

import UIKit

class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) ->  [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)?.map { $0.copy() as! UICollectionViewLayoutAttributes }
        var leftMargin: CGFloat = 15.0
        var maxY: CGFloat = -1.0
    
        attributes?.forEach { layoutAttribute in
            guard layoutAttribute.representedElementCategory == .cell else {
                return
            }

            if layoutAttribute.frame.origin.y >= maxY {
                leftMargin = 15.0
            }
            layoutAttribute.frame.origin.x = leftMargin
            leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
            maxY = max(layoutAttribute.frame.maxY , maxY)
        }

        return attributes
    }
}

이 코드는 UICollectionViewFlowLayout를 직접 커스텀한 코드예요.

leftMargin을 두고 모든 cell들을 왼쪽 정렬 시켜줍니다.

코드를 만들어두기만 하면 CollectionView가 왼쪽 정렬을 자동으로 하는건 아니겠죠.
그래서 우리가 직접 코드를 우리가 왼쪽 정렬하고 싶은 CollectionView에 넣어주어야 합니다.

// MARK: Properties
private let customFlowLayout = LeftAlignedCollectionViewFlowLayout()

// MARK: Action
@objc
func touchUpDown() {
        print("눌렀다")
        if !isClicked {
            downButton.setImage(UIImage(systemName: "chevron.up"), for: .normal)
            isClicked = true
            positionCollectionView.collectionViewLayout = customFlowLayout
            positionCollectionView.isScrollEnabled = false
            NotificationCenter.default.post(name: NSNotification.Name("increaseCell"), object: positions.count)
        } else {
            downButton.setImage(UIImage(systemName: "chevron.down"), for: .normal)
            isClicked = false
            flowLayout.scrollDirection = .horizontal
            positionCollectionView.collectionViewLayout = flowLayout
            positionCollectionView.isScrollEnabled = true
            NotificationCenter.default.post(name: NSNotification.Name("decreaseCell"), object: nil)
        }
}

customFlowLayout이라는 변수를 만들어서 우리가 커스텀한 FlowLayout를 가지게 했어요.

그리고 collectionView의 collectionViewLayout으로 지정해줍니다.

위에 코드에 대해 더 자세하게 알고 싶다면 TableView Cell 높이를 변화시키기를 참고하세요!

위에 코드처럼 특별한 상황이 아니라면 뷰가 처음 시작할때, collectionView.collectionViewLayout에 넣어주시면 됩니다!🙌