iOS How to make a collection view

운영 체제: macOS Monterey 12.5
사용 버전: Xcode 13.4.1, Swift, UIKit, Storyboard
​

iOS How to make a collection view를 알아보겠습니다.

Collection View는 Table View와 비슷하지만 다른 것은 뷰들이 바둑판처럼 모여있는 것을 만들 수 있습니다. 물론 Table View처럼 한 줄씩 만드는 것도 가능하죠.
Collection View를 만들어 봅시다.
​
​
Navigation Controller를 사용합니다. 설정 방법을 모르시면 아래 글을 참조해 주세요.
https://shwoghk14.blogspot.com/2022/08/ios-how-to-use-navigation-controller.html

그 뒤, View Controller를 꾸며줍니다.

collection view를 찾습니다.

추가해 줍니다.

Content View에 우리가 보여줄 것들을 추가해 줍니다.

Image view 하나만 넣어도 꽉 차네요. 크기를 좀 늘려줍시다.

Collection View Cell을 누르고 사각형 끝을 잡아당겨 크기를 늘려줍니다.

Cell 하나를 이렇게 꾸몄습니다.

이제, 이 Cell을 위한 Class를 만들어 줍니다.

File - New - File... 을 눌러줍니다.

Cocoa Touch Class를 만듭니다.

Class에는 아무 글이나 적어줍니다. 저는 KoreanEnglishCollectionViewCell로 적었습니다.

Subclass of에는 UICollectionViewCell을 선택합니다.

Create로 만듭니다.

만들어졌습니다.

Main 스토리보드로 가서 Collection View Cell과 연결시킵니다.

Class에 아까 만든 KoreanEnglishCollectionViewCell을 적습니다.

그리고 Identifier도 설정합니다. 저는 KoreanEnglishCell이라고 적었습니다.

여기에 아까 만든 cell의 항목들을 KoreanEnglishCollectionViewCell에 IBOutlet으로 연결해 줍니다.

Collection View Cell에 넣을 데이터를 만들어줍니다.

여기서는 예시를 위해 Struct로 만듭니다.

새로운 파일을 만들어 줍니다.

File - New - File... 을 눌러줍니다.

Swift File을 선택합니다.

KoreanEnglish로 만들었습니다.

korean, english, imageName 등의 변수를 만듭니다.

Assets.xcassets에는 cell에 사용할 이미지 두 개를 넣어놨습니다.

이제 ViewController.swift로 갑니다.

Cell에 넣을 데이터를 12 번째 줄에서 만듭니다.

UICollectionViewDataSource를 상속받습니다.

collectionView numberOfItemsInSection과 collectionView cellForItemAt 함수를 만듭니다.

collectionView numberOfItemsInSection에는 총개수가 들어갑니다.

collectionView cellForItemAt에는 Cell의 내용이 들어갑니다.

dequeueReusableCell은 재사용할 cell을 지목합니다. 여기서는 KoreanEnglishCell이 재사용 됩니다.

indexPath는 해당 cell의 위치를 나타냅니다. 위치에 맞는 cellData를 불러오고 이 cellData를 cell에다가 넣어줍니다.

Main 스토리보드로 갑니다.

Collection View에서 ctrl 키를 누르고 마우스를 드래그하여 View Controller로 옮깁니다.

마우스를 떼면 선택 창이 나옵니다.

dataSource를 선택합니다.

실행해 봅시다.

짜잔.

​

​

​

끝.

카테고리: iOS