[iOS] UITableView + UITableViewCell (4): 커스텀 UITableViewCell

커스텀 셀을 만들어보자

지난 포스트까지 테이블 뷰를 만들어 정적으로 셀을 입력해 넣는 법, 테이블 뷰 컨트롤러 클래스를 새로 생성해서 데이터를 자동으로 셀로 넣는 과정, 그리고 그 안에서 사용되는 data source의 개념과 셀의 재사용에 대해 정리해보았습니다. 이제 테이블 뷰의 마지막 시리즈인데요, 오늘의 목표는 UITableViewCell의 커스텀 클래스를 만들어서 더 유연하게 셀을 구성하는 방법을 정리해보겠습니다. 

 

예제들이 이전 포스트들에서 이어집니다! 특히 이 포스트를 읽지 않으면 예제가 이해가 전혀 안될 수도 있어요! 그럼 시작하겠습니다~!

 

지난 포스트에서는 이런 모양으로 테이블 뷰를 구성했었는데요, 사실 한 가지 빠진 것이 있었습니다.

 

여기에 보이는 수/발신 요일이 빠져있었습니다..! 저희는 테이블 뷰에서 텍스트를 넣어주기 위해서 ContentConfigutration의 text와 secondary text를 사용했었습니다. 그런데 이렇게 하면 요일 레이블을 추가할 수가 없어요.. 그래서 커스텀 셀을 만들어서 내부에 레이블 세 개를 포함하는 셀을 만들어보겠습니다.

 

클래스 추가하기

먼저 커스텀 셀을 위한 클래스를 추가해주겠습니다.

 

퍼알 만들기에서 Cocoa Touch Class를 선택하고요,

 

UITableViewCell을 상속하는 클래스를 추가합니다!

 

이렇게 새로운 클래스가 추가되었는데요, 두 개의 메서드가 기본적으로 생성되어 있습니다. setSelected는 셀이 선택되었을 때의 동작을 지정하는 것 같죠? 그런데 awakeFromNib()은 뭘까요? 주석을 보니 초기화 코드인 것 같은데 더 자세히 알아보기 위해서 이번에도 역시 공식문서를 찾아봤습니다!

awakeFromNib 알아보기

https://developer.apple.com/documentation/objectivec/nsobject/1402907-awakefromnib

Apple Developer Documentation

💡 The nib-loading infrastructure sends an awakeFromNib message to each object recreated from a nib archive, but only after all the objects in the archive have been loaded and initialized. When an object receives an awakeFromNib message, it is guaranteed to have all its outlet and action connections already established.

 

nib는 화면을 구성하는 클래스들을 XML로 정의한 XIB를 컴파일한 파일인데요, nib가 아카이브 되어있다가 객체로 생성될 때 아카이브에 포함된 모든 객체가 생성되고 초기화되면 awakeFromNib 메시지를 내부적으로 객체들에게 보낸다고 합니다. 여기서 아카이브는 어떤 클래스와 그 클래스와 참조 관계에 있는 클래스까지 그래프로 묶어서 저장(아카이빙)하는 것을 의미합니다. 객체들이 이 메시지를 받으면 자신이 가지고 있는 아웃렛 변수와 액션 메서드가 모두 연결되어 있음을 보장하게 됩니다. 간단히 말해서 awakeFromNib은 화면에 보이는 정보들을 담은 객체가 생성&초기화를 모두 완료한 뒤에 호출되는 메서드라고 할 수 있습니다!

 

💡 You must call the super implementation of awakeFromNib to give parent classes the opportunity to perform any additional initialization they require. Although the default implementation of this method does nothing, many UIKit classes provide non-empty implementations. You may call the super implementation at any point during your own awakeFromNib method.

 

awakeFromNib은 반드시 super가 가지고 있는 메서드도 함께 호출해야 합니다. 많은 UIKit 클래스들이 여기에 코드를 포함하고 있다고 하네요. 커스텀 클래스들은 대부분 UIKit 클래스들을 상속하기 때문에 반드시 호출해야겠네요.

 

💡 During the instantiation process, each object in the archive is unarchived and then initialized with the method befitting its type. Objects that conform to the NSCoding protocol (including all subclasses of UIView and UIViewController) are initialized using their initWithCoder: method. All objects that do not conform to the NSCoding protocol are initialized using their init method. After all objects have been instantiated and initialized, the nib-loading code reestablishes the outlet and action connections for all of those objects. It then calls the awakeFromNib method of the objects. For more detailed information about the steps followed during the nib-loading process, see Nib Files in Resource Programming Guide.

 

객체들의 인스턴스가 생성되고 awakeFromNib이 불리기까지의 과정에 대한 더 자세한 설명입니다. 각 인스턴스가 생성되는 과정에서 아카이브 되었던 각 객체들은 언아카이브가 되면서 생성자를 호출합니다. 이때 NSCoding 프로토콜을 채택하고 있는 객체들은 모두 initWithCoder 메서드를 호출하고 그 외의 객체들은 자신의 생성자를 호출합니다. 모든 객체의 인스턴스가 생성되면 nib-loading 코드가 객체들이 가지고 있는 outlet과 action을 다시 연결하는 작업을 합니다. 이 작업이 완료되면 마지막으로 awakeFromNib 메서드를 호출합니다.

 

💡 Typically, you implement awakeFromNib for objects that require additional set up that cannot be done at design time. For example, you might use this method to customize the default configuration of any controls to match user preferences or the values in other controls. You might also use it to restore individual controls to some previous state of your application.

 

awakeFromNib은 인스턴스가 생성되는 순간에 하지 못하는 일들 구현해둘 수 있습니다. Control에 대한 설정을 추가하거나 이전 상태를 복원하는 코드를 추가할 수 있죠!

 

커스텀 셀 만들기

그럼 이제 커스텀 셀을 만들어서 방금 생성했던 클래스와 연결해주겠습니다. 사실 커스텀 셀을 만드려면 XIB를 만드는 것이 맞겠지만 여기서는 생략하고 이전 포스트에서 사용했던 재사용 셀에 클래스만 입혀주도록 할게요.

 

먼저 지난 포스트에서 만들어두었던 재사용 셀에 클래스를 생성한 커스텀 클래스를 추가해줍니다.

 

세 종류의 레이블이 필요하겠죠? 

 

그리고 이 레이블들에 접근해서 값을 지정해주어야 하니, Outlet 변수를 만들어야합니다.

 

이렇게 3개의 UILabel에 대한 Outlet 변수를 만들고,

 

스토리보드로 이동해서 이렇게 Outlet과 만들어둔 레이블을 연결합니다. 

 

그럼 이제 준비는 된 것 같네요. 이제 뷰 컨트롤러로 이동해서 셀 인스턴스를 만들어 테이블 뷰에게 반환해주는 cellForRowAt 메서드를 구현해보겠습니다.

셀에 데이터를 입혀 반환하기

이전 포스트에서 구현했던 메서드에서 수정할 사항들이 생겼습니다! 먼저 dequeueReusableCell에서 셀을 꺼내서 데이터를 입혀주어야 하는데요,

이 메서드는 우리가 만든 커스텀 클래스의 상위 클래스인 UITableViewCell 클래스를 반환합니다. 그래서 이 상태로는 우리가 만든 레이블들의 Outlet 변수에 접근할 수가 없죠. 이를 위해서 반환받은 UITableViewCell을 커스텀 클래스로 다운캐스팅을 해주어야합니다.

 

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
.
.
.

이렇게요!

 

그럼 이제 Outlet 변수들에 접근할 수 있겠죠? 지금부터는 이전 포스트에서 구현했던 내용을 조금만 변경해주면 됩니다~!

 

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        cell.name.text = sections[indexPath.section][indexPath.row].name
        cell.callType.text = sections[indexPath.section][indexPath.row].type
        cell.day.text = sections[indexPath.section][indexPath.row].day
        cell.accessoryType = .detailButton
        return cell
    }

재사용 셀 인스턴스가 가진 Outlet 변수인 레이블들에 현재 인덱스에 맞는 데이터들을 불러와 넣어주고 그대로 반환하면 끝입니다! 

 

그럼 실행해보죠!

이제 제법 연락처 앱의 테이블과 비슷해졌네요~! 

 

주말을 모두 썼던 테이블 뷰 정복하기 프로젝트가 끝났습니다ㅠㅠ XIB를 만들어서 커스텀 셀을 만들고 코드로 넣어주는 것도 하고싶은데 이번주 중으로 이 포스트에 업데이트 해보도록 하겠습니다. 읽어주셔서 감사합니다!!