[iOS / Swift] UICollectionView 만들기

UICollectionView 만들기

UICollectionView 생성

Storyboard에 UICollectionView를 만들어줍니다.
Cocoa Touch Class파일도 UICollectionViewController를 만들어 주고 storyboard의 UICollectionView와 연결해줍니다.

간단한 CollectionView를 만들어보겠습니다.

numberOfItemsInSection

return이 Int 입니다.
section안의 아이템 개수를 정해주는 함수입니다.

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
}

위와 같이 입력하면 10개의 아이템을 가지게 됩니다.

cellForItemAt

아이템에 들어가는 셀을 커스텀하는 함수입니다.
셀을 커스텀하기 위해서는 CollectionViewCell 파일을 만들어주고 Cell과 연결하고 Identifier도 연결해주어야 합니다.
Identifier에 맞게 셀을 정의해줍니다.

간단하게 이미지뷰를 아이템에 넣어보도록하겠습니다.
CollectionViewCell파일에 아웃렛 연결을 해줍니다.

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
        
        cell.imageView.image = UIImage(systemName: "star")
        return cell
}

이런식으로 별모양 imageView를 가진 CollectionView 10개를 볼수있습니다.

CollectionView Layout

위에 만들었던 CollectionView의 Layout을 설정하여 CollectionView의 모양을 2개의 행을 가지게 만들어보겠습니다.

    override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        let spacing: CGFloat = 8 //아이템 사이의 공간 값
        let width = (UIScreen.main.bounds.width - (spacing * 3)) / 2
        //아이템의 가로값: (스크린의 가로길이 - 아이템 사이공간 * (가로에 배치할 아이템 개수 + 1)) / 가로에 배치 할 아이템 개수
        let height = width 
        //아이템의 세로값: 임의로 가로값과 같이 주었습니다.(변경가능) ex) width * 1.2
        
        layout.itemSize = CGSize(width: width, height: height) //아이템 사이즈 초기화
        layout.scrollDirection = .vertical // 아이템 스크롤 방향
        layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing) //아이템 상하좌우 사이값 초기화
        layout.minimumLineSpacing = spacing //아이템 라인 사이값 초기화
        layout.minimumInteritemSpacing = spacing //아이템 섹션 사이값 초기화
        
        collectionView.collectionViewLayout = layout //CollctionView의 Layout 적용
    }

didSelectItemAt

아이템을 선택하면 함수안의 코드를 실행합니다.
indexPath.item별로 조건문을 통해서 각각의 코드를 실행할수있습니다.