UITableView - 8. Interface Builder를 이용한 Custom Cell 만들기

Published on: 2011.11.18 10:22 by krespo

일반적인 경우라면 iOS에서 기본적으로 제공하는 Cell Type을 통해 구현이 가능하지만, 특별히 사용자가 디자인한데로 cell을 만들어 사용하는 방법도 있다. Interface Builder를 통해 cell xib를 만들어 customize 한 cell을 만들어 보자.

1. 프로젝트를 생성하고 "UITableViewCell" 을 상속받은 Objective-C 클래스를 생성한다.


2. Custom Cell을 꾸밀 xib파일을 생성한다.(일반적으로 objective-c 클래스 파일 이름과 xib이름을 동일하게 - CustomCell이라고 - 만든다)

3. xib파일을 열어 우측 하단의 library에서 "Table View Cell"을 끌어다 놓는다. 끌어다 놓은 Table View Cell을 선택하고 "Identity Inspector" 창에서 Custom Class를 위에서 만든 Objective-c Class인 "CustomCell"로 지정한다.

 4. xib에 구성하고 싶은 UI들을 올려놓고 "CustomCell class"에서 IBOutlet을 이용하여 UI component들과 연결을 한다.
 
5. TableView를 사용하기 위한 기본설정을 한다. 기본적인 내용은 여기에서 확인하면 된다.

6. ViewController.h에 TableView에 넣을 NSArray형태의 데이터를 @property로 선언하고 @synthesize로 선언한다.
 //ViewController.h
@property (retain) NSMutableArray *products;
//ViewController.m
@synthesize products; 
 
 
7. 테이블에 들어갈 내용이 상품정보임으로 상품정보를 가지고 있을 Objective-C클래스(domain object)를 만든다.(이름은 Product라는 이름으로 만든다.)
 
 
8. CustomCell에 Product를 넘기면 Product의 property값을 CustomCell에 set해주는 method를 만들어 준다.

9. TableView 사용시 구현해야할 delegate method들을 구현한다.
 

 [실행 결과]

 
초보자 | 2013.07.05 20:49 신고 | PERMALINK | EDIT/DEL | REPLY
알려주신대로 해봤습니다만,
실행 했을때 빈테이블뷰만 나왔습니다.
모두 잘입력한것같은데
무엇이 문제인걸까요?
초보자 | 2013.07.05 20:53 신고 | PERMALINK | EDIT/DEL
앗 해결했습니다.
뷰컨트롤러.xib에서 테이블뷰의 delegate와 datasource를 파일오너에
연결해주었더니 잘되네요~!
초보자 | 2013.07.07 21:59 신고 | PERMALINK | EDIT/DEL | REPLY
질문있습니다.
이번 강좌를 통해 커스텀셀을 성공적으로 만들었습니다.
여기서 더 나아가 만든 커스텀셀을 터치했을때 새로만든 뷰컨트롤러로 전환하는 방법을 알려주실수 있을까요?
Name
Password
Homepage
Secret