[iOS/Swift] TableView 의 기초 :: UITableView, UITableViewCell

UITableView

class UITableView : UIScrollView

💡A view that presents data using rows arranged in a single column.

UITableView 는 하나의 열을 갖는 여러개의 행으로 데이터를 표현하는 View 이다. UIScrollView 를 상속받은 클래스이므로, 수직으로 스크롤이 가능하다.

 

하나의 긴 리스트를 보여줄 수도 있고, 관련된 rows 를 그룹지어 보여줄 수도 있다. 사진의 Contacts app 을 보면, 알파벳 순으로 그룹지어져 있고 Settings app 도 title 은 없지만 그룹지어져 있다. 

UITableView 예시

Table view 는 일반적으로 계층적인 데이터를 가지고 있는 앱에서 이용되며, navigation view controller 와 함께 이용한다. 예를 들어 테이블의 row 를 선택해 이동하면, Navigation controller 가 main 으로의 이동을 돕는다.

 

상단의 뒤로가기 버튼과 타이틀이 나타나는 것을 Navigation bar 라고 한다. Navigation view controller 에 대해서도 다음에 포스팅 할 예정이다! 🙂

Table view + Navigation view controller

 

UITableViewCell

class UITableViewCell : UIView

💡 The visual representation of a single row in a table view.

UITableView 는 table 의 기본적인 외형을 관리하지만, 각자의 앱에서 실제 content 를 보여줄 cell 을 제공해야 한다. 이 cell 은 UITableViewCell object 이다. 

 

• standard cell 은 text, image 의 기본적인 구성이다.
• custom cell 을 정의하면 원하는 구성으로 content 를 보여줄 수 있다.
• table 의 content 가 절대 변하지 않는다면, table view 의 content 를 static cells 로 지정해주자.

 

아래 사진 중 왼쪽은 custom cell 을 이용한 table view 이고, 오른쪽 사진은 static cells 을 이용한 table view 이다.

Custom Cell, Static Content

 

custom cell 을 이용하는 방법은 다음과 같다. 스토리보드 예제와 함께 정리하도록 하겠습니다! 😄

 

1. UITableViewCell 을 상속받는 클래스를 정의한다. 
2. Storyboard 에서 만든 Table view cell 의 inspector 에서 Custom class 를 위의 클래스를 지정한다.
3. Table view cell 의 objects 를 Custom class 에 연결해준다. (IBOutlet, IBAction)
4. Table view datasource 프로토콜 method 중, tableView(_:cellForRowAt:) 에서 custom cell 를 가져와 데이터를 통해 cell 의 속성들을 업데이트한다. 

혹은, 여기 공식 문서를 읽어보는 것도 도움이 될 것 같다.

---

공식 문서

• Apple Developer Documentation - UITableView
• Apple Developer Documentation - UITableViewCell

참고 문서 및 강의

• 패스트캠퍼스 iOS 강의
• Start Developing iOS Apps(Swift)