[UIKit] TableView Controller 에 대하여 (1/2)

안녕하세요 하노입니다:)

오늘은 TableView Controller에 대하여 알아보겠습니다.

TableView Controller는 글을 쓰다 보면 너무 양이 방대 해질 것 같아 2부로 나누려고 합니다.

 

그럼 시작하겠습니다!

 

---

1. TableView Controller 란?

 

TableView Controller 공식 문서:

https://developer.apple.com/documentation/uikit/uitableviewcontroller

Apple Developer Documentation

 

 

TableView Controller 란, 간단하게 얘기하면 카카오톡 친구창, 대화창, 멜론 플레이리스트 등 한 개 이상의 셀이 열로 나열되어있는 형태

라고 생각하시면 될 것 같습니다.

 

 

2. TableView Controller StoryBoard로 만들기

그럼 바로 TableView Controller를 StoryBoard로 이용하여 만들어보겠습니다.

 

 

1. StoryBoard에 TableView Controller를 생성합니다.

 

 

2. TableView Controller를 클릭하여 인스펙터 영역에서 Is Initial View Controller를 클릭합니다.

 

이로써 처음 앱이 시작될 때 TableView Controller 화면이 제일 먼저 보이게 됩니다.

 

 

 

 

3. TableView Controller를 상속하는 파일을 만들어줍니다.

 

 

 

4. 만든 파일과 TableView Controller를 연결시켜줍니다.

 

 

 

5. 앱 실행을 위하여 만든 파일에 기본적인 코드를 작성해줍니다.

 

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return 1
}
    
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "myCell")!
        
    cell.textLabel?.text = "텍스트"
        
    return cell
}

 

첫번째 메서드는 TableView cell의 개수를 return 해주는 함수입니다.

 

두 번째 메서드는 TableView cell의 디자인, 및 데이터를 return 해주는 함수입니다.

 

두 번째 메서드에서 중요하게 봐야 할 것이 "cell"이라는 이름으로 선언된 상수 오른쪽에 "myCell"이라고 적혀있습니다.

이 것은 TableView cell의 identifier의 이름인데, 만약 이것을 선언해주지 않거나, 잘못 선언해줬을 경우 에러가 발생합니다.

 

저희는 TableView cell의 identifier을 선언해주지 않았으므로 마저 선언해주겠습니다.

 

 

 

StoryBoard로 가서 TableView cell을 클릭 후 인스펙터 영역을 가보면 Identifier 영역이 있습니다.

여기에 저희가 설정해주었던 "myCell"을 입력해주겠습니다.

 

 

 

그리고 빌드를 해보면,

 

 

 

위 화면처럼 잘 동작하는 것을 확인할 수 있습니다.

 

이 외 StoryBoard 내 TableView cell의 인스펙터 영역에서 폰트, 이미지 추가 등 설정을 변경할 수 있습니다.

 

 

 

---

 

오늘은 TableView Controller에 대하여 알아보았습니다.

TableView Controller는 정말 많이 쓰이기도 하고, 특히 커스텀해서 사용하면 UI가 정말 무궁무진하게 많은 방향으로 나올 수 있습니다.

하지만 블로그 글에서 다루기엔 정말 양이 많기도 하고, 직접 인스펙터 영역에서 선택하여 보다 보면 금방 익숙해지실 거예요.

 

그럼 다음 글은 TableView Controller를 코드로 설정 및 구현하는 방법에 대하여 알아보겠습니다.

 

감사합니다 :)