iOS How to make a table view

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

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

UIkit에는 목록을 보여주는 table을 그리기 위해서 UITableView를 제공해 줍니다. 우리는 이 UITableView를 활용하여 목록을 그려보겠습니다.
​
​
다음과 같은 파일이 있습니다.
Main 스토리보드로 갑니다.
​
Navigation Controller를 사용합니다. 설정 방법을 모르시면 아래 글을 참조해 주세요.
https://shwoghk14.blogspot.com/2022/08/ios-how-to-use-navigation-controller.html

그 뒤, View Controller를 꾸며봅시다.

table view를 찾습니다.

끌어서 넣어줍니다.

그다음, Table View Cell을 선택합니다.

끌어서 넣어줍니다.

Table View Cell의 Style을 조정해 줍니다.

Table View Cell을 누르고 오른쪽 패널의 Style을 봅니다. 현재는 Custom으로 되어 있습니다.

저 Style을 Subtitle로 변경해 줍니다.

그리고 Identifier를 적어줍니다.

저는 KoreanEnglishCell로 적었습니다.

그 뒤, dataSource를 연결해 줍니다.

Table View에서 ctrl을 누른 상태로 드래그합니다. 위의 View Controller 아이콘에서 마우스를 땝니다.

dataSource를 선택합니다.

테이블에 넣을 데이터를 만듭시다. 저는 Struct로 만들어보려고 합니다.

새로운 파일을 하나 만듭니다.

File - New - File... 을 누릅니다.

Swift File을 선택합니다.

​

​

아무 파일 이름이나 적습니다. 저는 KoreanEnglish라고 만들었습니다.

자 새로 만든 파일에는 무엇을 하느냐하면 테이블에 들어갈 정보를 저장할 struct를 만들 겁니다.

기본적으로 image, title, subtitle이 들어가게 만듭니다.

ViewController.swift 파일로 갑니다.

아무것도 없는 상태입니다.

여기에 UITableViewDataSource를 상속받습니다. 그리고 tableView cellForRowAt, tableView numberOfRowsInSection을 추가합니다.

cellForRowAt에는 각 cell 하나마다 어떤 내용을 넣을 건지를 결정하는 내용이 들어갑니다.

numberOfRowsInSection에는 총 몇 개의 cell이 들어갈 것인지를 적습니다.

​

일단 들어갈 데이터를 만들어 봅시다.

저는 Assets.xcasseets에 미리 Korean과 Oldest Korean이라는 이미지 파일을 넣어뒀습니다. 여러분은 여러분 만의 이미지를 넣으시면 됩니다.

ViewController에 cellDatas라는 것을 만들어서 넣어줍니다. 아까 만든 KoreanEnglish 구조체를 사용합니다.

다음으로는 비어있는 code 부분을 수정해 봅시다.

dequeueReusableCell는 재사용할 Cell을 정합니다. withIdentifier에는 Main.storyboard에서 정한 Cell의 Identifier를 적어줍니다. cellData는 해당 행에 들어갈 데이터입니다. indexPath.row는 몇 번째 행인지를 나타냅니다.

실행해 봅시다.

짜잔.

​

​

끝.

카테고리: iOS