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

Published on: 2011. 11. 18. 10:22 by louis.dev

일반적인 경우라면 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들을 구현한다.
 

 [실행 결과]

 

UITableView - 7. 테이블 셀 이동하기

Published on: 2011. 11. 18. 01:21 by louis.dev

데이블 데이터 삭제하기에 이어 계속 진행 해보도록 하겠다. 테이블 셀을 이동시키는 것은 다음과 같은 delegate method만 구현 하면 된다.

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;
- (void) tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath; 

첫번째 메소드는 이동시킬수 있는 셀인지 아닌지 알아보는 메소드로서 간단하게 YES만 리턴해 주면 된다.
두번째 메소드는 실제 셀이 이동할때 실행되는 메소드이다. 그러므로 여기에서 실제 데이터의 이동을 구현해 주면 된다.


 

UITableView - 6. 테이블 데이터 삭제 하기

Published on: 2011. 11. 17. 18:47 by louis.dev

1. 프로젝트 생성 후 다음과 같이 toolbar와 toolbar button 그리고 그 하단에 TableView를 넣습니다. 레이아웃을 작성합니다.
 

2. TableView의 dataSource와 delegate를 File's owner와 연결 시킵니다.
 

3. ViewController.h와 ViewController.m을 다음과 같이 작성한다.


 

UITableView - 5. Cell tap시 수행되는 delegate method

Published on: 2011. 11. 17. 18:14 by louis.dev
 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIntexPath *)indexPath {
     indexPath.section     //선택된 섹션
     indexPath.row         //선택된 row


UITableView - 4. TableViewCell의 타입과 Accessory

Published on: 2011. 11. 17. 18:07 by louis.dev

1. Cell을 생성할때 Type을 지정해 주고, Accessory타입을 지정하면 쉽게 타입과 악세서리를 설정할 수 있다.

[실행결과]

그리고 다른 Accessory타입과는 다르게 실행화면의 맨마지막에 있는 UITableViewCellAccessoryDetailDisclosureButton(파란원모양의 악세서리)는 delegate를 통해서 터치를 처리 할 수 있다(셀 전체를 터치하는 것이 아니라 파란원 아이콘을 탭했을 때만 실행되는 델리게이트).

해당 터치를 사용하려면 다음의 델리게이트 메소드를 작성하면 된다.
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath