BLOG main image
분류 전체보기 (51)
아이폰 개발 이야기 (12)
스마트폰용 홈페이지 (4)
웹표준 개발 (8)
HTML5 (2)
Objective-C (2)
뉴미디어 기획 이야기 (10)
뉴미디어 뉴스 (12)
88,774 Visitors up to today!
Today 56 hit, Yesterday 72 hit
2010/05/27 10:25


안녕하세요. 이제부터 아이폰 어플에 쓰이는 컨트롤러들을 한개씩 간단한 예제와 함께 설명하려 합니다.

그 첫번째 테이블 뷰 입니다.

아마 컨트롤러 중에서  방대하게 쓰이는 게  이 테이블 뷰가 아닐까 생각되네요 ^^

테이블뷰 사용 예제는 4가지로 나눠서 포스팅할게요

1. 간단한 테이블 뷰 예제
2. 네비컨트롤러를 이용한 테이블뷰 예제
3. XML를 이용한 테이블 뷰 예제
4. 테이블 뷰에 셀 디자인 예제


오늘은 그 첫번째 간단한 테이블 뷰 예제 입니다.


새 프로젝트 선택하고  TableTest 라는 이름으로 프로젝트 생성해주세요. 프로젝트 생성해 주실때는 네모칸 친 view_based Application 으로 선택해주세요.



이제 테이블 뷰를 IB에서 집어넣을게요 TableTestViewController.xlb 를 열어주세요.



그림처럼 테이블 뷰를 View 창에 끌어다 넣으세요~ 그럼 화면과 같이 꽉 차게 들어가면 됩니다.
집어넣은 테이블 뷰 선택한 상태에서  네모칸 친곳을 보면 dataSource 와 delegate 가 보일꺼예요
그걸 File;s Owner로 연결해 주세요.  이렇게 함으로 어플이 실행될때 이 테이블 뷰 컨트롤러를 델리게이트로 인식해서 AppDelegate에서 별다른 코드를 넣지 않아도 테이블 뷰를 먼저 띄우게 됩니다.


이제 소스 작업을 하겠습니다. 
TableTestViewController.h 를 열어주시고  아래와 같이 코드를 써주세요


#import <UIKit/UIKit.h>

@interface TableTestViewController : UIViewController <UITableViewDelegate , UITableViewDataSource>{

 NSArray *listData;  //테이블뷰에 들어갈 테이타를 저장 할  배열 변수  선언

@property (nonatomic, retain) NSArray *listData; 
@end


TableTestViewController.m 를 열어주시고  아래와 같이 코드를 써주세요




#import "TableTestViewController.h"

@implementation TableTestViewController

@synthesize listData;  //앞에서 선언한거 synthesize 해주고요

 

//처음 동작할때 로드되는 부분입니다.  저희는 배열에 데이타를 넣는 작업을 했습니다.
- (void)viewDidLoad {
 NSArray *array = [[NSArray alloc] initWithObjects:@"AAAA",@"BBBBB",@"CCCCCC",@"DDDDDD",nil];
 
 self.listData = array;
 [array release];  //선언된 변수 초기화
 
    [super viewDidLoad];
}

- (void)didReceiveMemoryWarning {
 // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
 
 // Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
 // Release any retained subviews of the main view.
 // e.g. self.myOutlet = nil;
 
 self.listData = nil;
 
}

//여기가 본격적인  테이블뷰 코딩 작업입니다.
#pragma mark Table view methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;   //테이블 그룹갯수를 리턴합니다. 저희는 테이블이 따로 그룹이 필요없고 한개만 될 것이기 때문에 1 적어주시고
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.listData count];   //데이타 갯수를 리턴합니다. 배열의 갯수를 리턴합니다.
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
   
    static NSString *CellIdentifier = @"Cell";
   
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        // 셀 스타일을 정하는 구간입니다. 빨간색 부분을  UITableViewCellStyleValue1 / UITableViewCellStyleValue2 / UITableViewCellStyleSubtitle / UITableViewCellStyleDefault  이렇게 4가지 방식으로 바까보세요 셀 형식이 바뀌는걸 보실수 있으실 겁니다 
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
    }
   
 NSUInteger row = [indexPath row];  
 cell.textLabel.text = [listData objectAtIndex:row];     //로우 indexPath와 배열 index와 매칭시켜서 값을 집어넣어요
 cell.detailTextLabel.text = @"서브텍스트";    //서브텍스트라벨에 글자를 집어넣습니다.
 
 cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;   //테이블 뷰 옆에  [>] 이런 화살표 이미지가 이 옵션으로 생깁니다. 필요 없으신 분은 삭제 하셔도 무방하세요~
    return cell;
}

 

- (void)dealloc {
 [listData release];
    [super dealloc];
}


@end



자 그럼 결과를 실행해볼게요 위에 코드 설명에 보면 빨간색으로 표시된 UITableViewCellStyleSubtitle  부분 보이죠
이부분이 셀 스타일을 지정해 주는 것으로

UITableViewCellStyleValue1 / UITableViewCellStyleValue2 / UITableViewCellStyleSubtitle / UITableViewCellStyleDefault   

이 4개중 여러개로 바꿔보시면서 컴파일 해보세요

아래는 스타일에 따른  컴파일 화면입니다.


① UITableViewCellStyleDefault 
   일 경우 




② UITableViewCellStyleValue1    일 경우 



③ UITableViewCellStyleValue2  일 경우





소스파일 첨부합니다. 참고하세요~~



다음번에는  네비게이션을 추가해서 셀을 클릭하면 디테일 뷰로 넘어가는  테이블 뷰를 만들어보겠습니다.









저작자 표시 비영리 동일 조건 변경 허락
Trackback Address :: http://web2log.com/trackback/48 관련글 쓰기
Name
Password
Homepage
Secret