BLOG ARTICLE Table View | 1 ARTICLE FOUND

  1. 2009.06.25 인터페이스빌더 Table View Cell 사용하기

보통 Table View의 Cell은 코드로 만드는 경우가 많습니다. 여기서는 인터페이스빌더에서 Table View Cell을 사용하는 간단한 샘플을 만들어 보겠습니다.





1. 프로젝트 생성과 AppDelegate 변경
Xcode를 실행하고 "New Project"를 클릭하여 "Window-based Application"을 선택하여 프로젝트를 생성합니다. 저는 그냥 IBCell이란 이름으로 프로젝트를 만들었습니다.

1) IBCellAppDelegate.h

@class TableViewController;


@interface IBCellAppDelegate : NSObject <UIApplicationDelegate> {


IBOutlet TableViewController *tableViewController;

    UIWindow *window;

}

2
인터페이스 빌더에서 연결을 위해 tableViewController의 아울렛 변수를 추가합니다.

2) IBCellAppDelegate.m

- (void)applicationDidFinishLaunching:(UIApplication *)application {

  

[window addSubview:[tableViewController view]];

    // Override point for customization after application launch

    [window makeKeyAndVisible];

}


메인 윈도우의 SubView로 tableViewController의 View를 추가합니다.

2. ViewController
1) 생성
UIViewController subclass로 TableViewController란 이름으로 클래스를 생성합니다. SDK 3 부터는 "With XIB for user interface"가 있어 선택할 경우 ViewController 오브젝트와 연결된 별도의 xib를 자동으로 생성하여 줍니다. 여기서는 편의를 위해 선택하지 않았습니다.
* 2009/06/26 추가
오늘 확인해 보니 Objective-C class 선택시에 하단에 Subclass of로 선택할 수 있는 클래스들이 나오네요. 버젼업되면서 왜 줄었나 했더니 여기로 들어 가 있었습니다. 위의 방법말고 아래에서 UITableViewController를 바로 선택하고 사용하시면 됩니다.
 

2) TableViewController.h

#import <UIKit/UIKit.h>



@interface TableViewController : UITableViewController {

IBOutlet UITableViewCell *myCell;

}


- (IBAction)goMyBlog:(id)sender;


@end


부모 클래스를 UIViewController에서 UITableViewController로 변경합니다. 그리고 인터페이스빌더에서 연결을 위해 myCell 아울렛 변수를 추가합니다. 그리고 버튼 클릭시 연결될 goMyBlog 액션 메소드를 선언합니다.

3) TableViewController.m

/* 버튼 클릭시 */

- (IBAction)goMyBlog:(id)sender {

NSURL *url = [NSURL URLWithString:@"http://www.cocoadev.co.kr/"];

[[UIApplication sharedApplication] openURL:url];

}


#pragma mark Table view methods


/* 색션 */

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return 1;

}


/* 색션 타이틀 */

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {

return @"소개";

}


/* */

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

return myCell;

}


/* 높이 */

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

return [myCell frame].size.height;

}


버튼 클릭시 실행될 메소드와 tableView의 delegate, datasource 메소드를 구현합니다.



3. 인터페이스 빌더

1) Table View Controller

인터페이스 빌더를 실행하고 라이브러리의 Controlls의 Table View Controller를 MainWindow.xib로 드래그해서 가지고 옵니다. Class를 TableViewController로 지정합니다.



좌측과 같이 Table View의 Style 속성을 Grouped로 지정합니다.



2) Table View Cell

라이브러리에서 Table View Cell을 MainWindow.xib로 드래그해서 가지고 옵니다.




아래와 같이 TableViewController의 myCell 아울렛에 가져온 Table View Cell을 연결합니다.


사용자 삽입 이미지
라이브러리 윈도우에서 Image View, Label, Rounded Rect Button, Text View를 드래그 해서 Table View Cell에 가져다 놓습니다.



Cell의 높이를 늘리고 각각의 컨트롤들을 아래와 같이 배치합니다. 적당한 이미지를 Xcode 좌측의 Groups & Files 아래의 Resources 그룹으로 드래그해서 프로젝트로 가져옵니다. Image View의 Image 속성에서 해당 이미지를 선택합니다. 입력이 되지 않도록 Text View의 Editable 속성의 체크를 해제합니다.
사용자 삽입 이미지

버튼 클릭시 사파리에서 해당 URL로 이동하기 위해 Text View Controller의 goMyBlog IBAction과 연결합니다.


4. 확인
Xcode에서 Build & Go를 클릭하면 시뮬레이터에서 아래와 같이 확인하실 수 있습니다.
SDK 3을 대충 보기만 하고 처음 사용해 보았는데 곳곳에 바뀐 부분이 눈에 뛰네요. SDK 3도 처음이고 오랫만에 포스팅이라 틀린 부분이 있는지도 모르겠습니다.

'iOS' 카테고리의 다른 글

아이폰 OS 4  (8) 2010.04.09
NSXMLParser로 RSS 읽어오기  (21) 2009.08.05
인터페이스빌더 Table View Cell 사용하기  (0) 2009.06.25
cocos2d 개발환경 설정  (24) 2009.04.13
iPhone SDK 3.0 beta 2  (4) 2009.04.05
UITableView의 메모리 누수 현상  (4) 2009.02.05