[iOS/UI] 컬렉션뷰셀 자동으로 크기 조정하고 왼쪽 정렬하기 (CollectionViewCell Automaticsize & LeftAlign)

안녕하세요 Foma 👟 입니다.

 

오늘은 셀을 왼쪽으로 정렬시키고 셀 안에 있는 텍스트에 따라서 자동으로 크기가 조정되는 것을 알아보도록 할게요!

 

(일반적으로 컬렉션뷰셀을 만들면 아래와 같이 될거에요!)

 

 

오늘은 아래와 같이 만들어 보겠습니다.

바로 시작할게요~

---

StoryBoard

 

스토리보드는 아래와 같이 설정해주세요.

 

---

CollectionViewCell

 

컬렉션뷰셀에 레이블을 연결해줍니다.

 

class CollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var label: UILabel!
}

---

ViewController

 

뷰컨트롤러에 컬렉션뷰를 연결해줍니다.

 

@IBOutlet weak var collection: UICollectionView!

 

컬렉션뷰 딜리게이트와 데이터소스를 현재 뷰컨트롤러로 설정해주세요.

 

 func configure() {
        collection.delegate = self
        collection.dataSource = self
    }

 

글자를 표시할 letters 배열도 만들어줍니다.

 

let letters = ["안녕","안녕하세요","안녕하세요 저는 포마입니다.","안녕하세요 만나서 정말 반갑습니다."]

 

딜리게이트와 데이터소스를 아래와 같이 설정해주세요!

 

extension ViewController:UICollectionViewDelegate {
    
}

extension ViewController:UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return letters.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collection.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
        
        cell.label.text = letters[indexPath.item]
        
        return cell
    }
}

---

CollectionViewLeftAlignFlowLayout

 

이번 글의 핵심인 왼쪽으로 정렬되는 플로우레이아웃 클래스를 만들어줍니다.

 

class CollectionViewLeftAlignFlowLayout: UICollectionViewFlowLayout {
    let cellSpacing: CGFloat = 10
 
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        self.minimumLineSpacing = 10.0
        self.sectionInset = UIEdgeInsets(top: 12.0, left: 16.0, bottom: 0.0, right: 16.0)
        let attributes = super.layoutAttributesForElements(in: rect)
 
        var leftMargin = sectionInset.left
        var maxY: CGFloat = -1.0
        attributes?.forEach { layoutAttribute in
            if layoutAttribute.frame.origin.y >= maxY {
                leftMargin = sectionInset.left
            }
            layoutAttribute.frame.origin.x = leftMargin
            leftMargin += layoutAttribute.frame.width + cellSpacing
            maxY = max(layoutAttribute.frame.maxY, maxY)
        }
        return attributes
    }
}

---

ViewController

 

다시 뷰컨트롤러로 돌아와서

 

컬렉션뷰에 컬렉션뷰레이아웃을 위에서 만들어준 CollectionViewLeftAlignFlowLayout으로 설정해주세요.

 

 collection.collectionViewLayout = CollectionViewLeftAlignFlowLayout()

 

이제 앱을 실행시키면 다음과 같이 나올거에요.

 

이렇게 나오는 이유는 플로우 레이아웃에서 셀의 크기를 지정해주지 않았기 때문인데요.

 

 

아래와 같이 flowLayout의 estimatedItemSize를 UICollectonViewFlowLayout.automaticSize로 지정합니다.

 

if let flowLayout = collection?.collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
          }

 

반드시 위에서 만들어준 CollectionViewLeftAlignFlowLayout 인스턴스를 생성해준 뒤 설정해주셔야 합니다.

 

collection.collectionViewLayout = CollectionViewLeftAlignFlowLayout()
        
        if let flowLayout = collection?.collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
          }

 

이렇게 실행하면 사이즈도 자동으로 조정이 되고 왼쪽으로 정렬된 컬렉션뷰 셀을 만들 수 있습니다!

 

---

 

 

Source Code

 

 

---

오늘은 컬렉션뷰 셀의 사이즈를 자동으로 조정하고 왼쪽으로 정렬하는 법에 대해서 알아보았습니다.

 

혹시라도 궁금하신 점이나 틀린 점이 있다면 댓글로 알려주세요!

---

Reference

 

iOS Tutorial: Left-align CollectionView Cell | DaddyCoding - Learn Swift, SwiftUI, iOS, RxSwift Programming