CollectionView 1탄 - layout 설정

 

이번 포스팅에서는 CollectionView 1탄으로, CollectionView에 대해서 깔끔하게 정리해보려고 합니다.

*코드베이스 형식으로 스토리 보드와는 일부 차이가 있을 수 있습니다.

 

 

1. CollectionView 등록 및 추가

import UIKit

class ViewController: UIViewController {

    lazy var collectionView = UICollectionView(frame: .zero, collectionViewLayout: collecionViewFlowLayout())
    
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
        
        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
        
        layout()
    }

}

• 코드베이스로 하기 위해서는 xib파일로 생성된 것이 아닌, CollectionViewCell을 상속받고 있는 커스텀 셀을 등록해줘야 합니다.
• 컬렉션뷰의 레이아웃을 설정하기 위해 lazy를 사용했습니다.
• 컬렉션뷰를 만들 때에는 반드시 UICollectionViewLayout를 지정해줘야 합니다.

2. layout 설정

   private func layout() {
        
        view.addSubview(collectionView)
        // Auto Resizng 해제
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        
        // 레이아웃 설정
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
        
        collectionView.backgroundColor = .cyan
              
    }


    
    private func collecionViewFlowLayout() -> UICollectionViewFlowLayout {
        
        let layout = UICollectionViewFlowLayout() 
        layout.itemSize = CGSize(width: 100, height: 100)
        layout.scrollDirection = .vertical//.horizontal
        
        return layout
        
        
    }

• 컬렉션뷰는 뷰의 사이즈에 맞게 설정했으며, 컬렉션뷰의 셀의 크기는 width: 100, heigth: 100으로 설정했습니다.

3. Delegate 설정

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 100
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as? CollectionViewCell else { return UICollectionViewCell() }
        cell.findNumber(num: indexPath.item)
        
        return cell
        
        
    }
}

• 셀의 개수는 100개로 설정했으며, 각 셀의  어떻게 동작하는지 확인하기 위해서 cell의 레이블을 추가해 놓은 상태입니다.

layout.scrollDirection = .vertical

• Vertical 방식의 경우 수직 스크롤형태로 만들어집니다.
• 셀은 화면의 크기만큼 수평으로 생성되다가 화면의 크기를 벗어나게 되면 다음 수평 위치로 이동해서 다시 셀을 그립니다.=

layout.scrollDirection = .horizontal

• horizltonal의 경우 수평 스크롤형태로 만들어집니다.
• 셀은 화면의 크기만큼 수직으로 생성되다가 화면의 크기를 벗어나게 되면 다음 수직 위치로 이동해서 다시 셀을 그립니다.

 

이번 포스팅에서는 컬렉션 뷰 셀의 레이아웃에 대해서 알아보았습니다. 근데, 현재는 고정된 크기를 가지고 있지만, 만약 디바이스마다 동일한 크기의 셀을 만드려고 하면 어떻게 할 수 있을까요? 이 방법은 2탄으로 찾아뵙겠습니다.