[부스트코스]iOS 프로그래밍 강좌에 대한 정리글입니다.
[부스트코스]iOS 프로그래밍 Booster 2기 활동 글입니다.
이전 포스트에서 iOS 의 테이블뷰가 무엇인지 알아보았습니다. 그러면 이번에는 테이블뷰를 직접 코드를 통해 구현해보도록 하겠습니다. 이를 위해 Xcode 에서 새로운 프로젝트를 생성해줍니다.
우측 상단의 + 버튼, 라이브러리 버튼을 눌러서 Table View 를 찾습니다.
이를 스토리보드에 추가해줍니다. 그러면 다음과 같이 테이블뷰가 생성됩니다.
테이블뷰를 생성했다면 이제 이 테이블뷰를 위한 테이블뷰 셀도 추가해줍니다. 테이블뷰 셀 또한 마찬가지로 라이브러리에서 찾을 수 있습니다.
다음은 테이블뷰 셀의 스타일을 정해주어야 합니다. 저는 다음과 같이 기본으로 설정했습니다.
Xcode 기준 우측 인스펙터 화면에서 설정할 수 있습니다.
최종적인 뷰의 모습입니다.
다음은 ViewController 에 이 테이블뷰에 대한 IBOutlet 을 생성해줍니다.
@IBOutlet weak var tableView: UITableView!UI 객체와 코드를 반드시 연결해주시기 바랍니다.
tableView 를 조작하기 위해서는 델리게이트와 데이터소스를 추가해 주어야 합니다. 이게 무슨 말인가 하니, 이전 포스트 에서 전 MVC 모델에 대해 다룬 적이 있습니다. 테이블뷰는 뷰(V)의 역할을 하는 객체입니다. 그렇기 때문에 테이블뷰를 제어하기 위한 컨트롤 객체(C)와 데이터 모델(M) 이 필요합니다. 이를 위해 사용되는 것이 바로 델리게이트와 데이터소스입니다.
이를 사용하기 위해서는 뷰 컨트롤러에서 두 클래스를 상속받으면 됩니다. 바로 UITableViewDelegate 와 UITableViewDataSource 입니다.
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
...
}그 이후에는 현재 뷰 컨트롤러가 델리게이트와 데이터소스를 사용한다고 알려주어야 합니다. 이를 코드로 나타내면 다음과 같습니다.
self.tableView.delegate = self
self.tableView.dataSource = self그러면 전체 코드는 다음과 같은 모습이 됩니다.
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.tableView.delegate = self
self.tableView.dataSource = self
}
}그러나 여기까지 정상적으로 진행했다면 Xcode 는 다음과 같은 에러를 보여줍니다.
왜 이 에러가 발생할까요? Fix 를 눌러보면 Xcode 는 다음의 두 메서드를 자동으로 추가해줍니다.
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
}이 에러가 발생하는 이유는 반드시 존재해야하는 메서드를 추가하지 않았기 때문입니다. 테이블뷰를 사용하려면 반드시 두가지 메서드를 정의해주어야 합니다. 하나는 섹션에 행의 갯수를 결정하는 것이고, 다른 하나는 행마다 어떤 셀을 사용할 것인지 결정하는 것입니다. 이 두 메서드는 반드시 사용자가 정의해주어야 합니다. UITableViewDataSource 클래스는 다음과 같이 정의되어 있습니다.
public protocol UITableViewDataSource : NSObjectProtocol {
@available(iOS 2.0, *)
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
// Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:
// Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)
@available(iOS 2.0, *)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
@available(iOS 2.0, *)
optional func numberOfSections(in tableView: UITableView) -> Int // Default is 1 if not implemented
@available(iOS 2.0, *)
optional func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? // fixed font style. use custom view (UILabel) if you want something different
@available(iOS 2.0, *)
optional func tableView(_ tableView: UITableView, titleForFooterInSection section: Int) -> String?
...
}많은 메서드들이 선언되어 있지만 눈여겨보아야 할 점은 대부분이 optional 키워드로 선언되어 있다는 것입니다. 즉 필요하면 선언해서 사용하면 되지만 굳이 하지 않아도 상관없다는 뜻입니다. 그러나 가장 위 두개의 메서드는 optional 키워드가 존재하지 않습니다. 즉 반드시 선언해야 한다는 의미입니다.
저는 간단하게 2개의 섹션을 가지고 있는 테이블뷰를 만들어보겠습니다. 0번 섹션은 가, 나, 다 를 보여주고 1번 섹션은 A, B, C 를 보여주도록 하겠습니다. 이를 위한 코드는 다음과 같습니다. 섹션의 갯수를 설정하기 위해 numberOfSections 메서드를 추가로 사용했습니다.
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var tableView: UITableView!
let cellIdentifier: String = "cell"
let korean: [String] = ["가", "나", "다"]
let english: [String] = ["A", "B", "C"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.tableView.delegate = self
self.tableView.dataSource = self
}
func numberOfSections(in tableView: UITableView) -> Int {
return 2
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
switch section {
case 0:
return korean.count
case 1:
return english.count
default:
return 0
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: self.cellIdentifier, for: indexPath)
let text: String = indexPath.section == 0 ? korean[indexPath.row] : english[indexPath.row]
cell.textLabel?.text = text
return cell
}
}테이블뷰에 나타낼 한글 배열과 영어 배열을 각각 korean, english 로 선언했습니다. 그리고 numberOfSections 메서드를 통해 총 2개의 섹션을 사용하겠다고 알려주었습니다.
numberOfRowsInsection 을 가진 첫번째 메서드는 각 섹션마다 몇개의 행을 가질지 반환하도록 합니다. 두 섹션 다 3개의 행(가,나,다 그리고 A,B,C)을 가지고 있으므로 단순히 3을 반환해도 되지만, 코드의 가독성과 재사용성을 위해 switch-case 구문으로 선언하였습니다.
cellForRowAt 을 가진 두번째 메서드는 행마다 어떤 셀을 표현할 것인지를 반환하도록 합니다. 즉 각 행에 대한 위치정보가 indexPath 로 주어졌을 때, 그 셀이 어떤 정보를 담고 있는지를 반환하도록 합니다. indexPath.section 을 통해 섹션 위치정보를 가져오고 indexPath.row 를 통해 행 위치정보를 가져왔습니다. 그리고 셀의 텍스트를 대입하여 반환한 것을 확인할 수 있습니다. 이 때 사용한 dequeReusableCell 이라는 키워드는 뷰의 재사용성에 관한 메서드로 이후 포스트에서 자세히 설명하도록 하겠습니다.
결과적으로 다음과 같은 테이블뷰가 생성됩니다.
[다음 포스트]iOS 테이블뷰로 할 수 있는 것들 알아보기
