Chapter 8Custom TableView Cell

Bit Academy 송진석

2011년 9월 17일 토요일

학습목표

• 커스텀 테이블 뷰셀을 만들어 본다

• NIB을 다이나믹하게 로드한다.

• NIB의 Top Level 오브젝트를 이해한다.

• 태그를 이용해 뷰에 접근한다.

2011년 9월 17일 토요일

테이블뷰셀구조• 테이블뷰셀은 에디트콘트롤 영역, 컨텐트뷰영역, 액세서리뷰 영역으로 구성된다.

• 커스터마이제이션은 컨텐츠뷰영역에 대해서 이루어진다.

• 커스터마이제이션은 UITableViewCell 클래스를 서브클래스해서 프로그래밍으로 만드는 방법과 인터페이스 빌더를 통해 시각적으로 디자인하는 방법이 있다.

2011년 9월 17일 토요일

IB를 이용한 셀 커스터마이제이션 방법

테이블뷰셀 NIB구성

셀을 구성하는각각의 구성요소에태그 붙이기

셀내의 구성요소에내용 채워넣기

테이블뷰의 크기조정

2011년 9월 17일 토요일

테이블뷰셀NIB구성

• File->New를 선택한후 IOS에서 User Interface를 선택한후 View선택한후 Next를 클릭 PhotoTableCell로 저장

• PhotoTableCell.xib가 생김

• PhotoTableCell.xib를 클릭하고 IB에서 View객체를 지우고 TableViewCell 객체를 채움 TableViewCell의 콘텐츠뷰에 UIImageView, UILabel을 라이브러리 패널에서 가져온다.

• UIImageView 어트리뷰트 탭에서 Mode속성을 Aspect To Fit으로 설정한다.

2011년 9월 17일 토요일

셀구성요소에 태그 붙이기• 태그는 IB에서 만든 오브젝트를 프로그램내에서 참조하는데 사용

• 프로그램내에서 IB에서 만든 객체를 참조하기 위한 IBOutlet property 변수를 만들 필요가 없음

• viewWithTag: 메서드를 활용해 객체 포인터를 프로그램에서 알수 있음

• Tag값은 항상 0이 아닌 값을 사용해야 한다.

2011년 9월 17일 토요일

셀구성요소에 내용채워넣기

• tableView: cellForRowAtIndexPath:에서 테이블뷰를 채움, PhotoTableCell.nib을 로드하고 tag를 이용해 셀내의 커스텀 객체의 주소를 가져옴

• nib화일을 위치는 번들(어플이 저장된 데렉토리)에 저장됨

• 번들값을 알기 위해 [NSBundle mainBundle]을 이용

2011년 9월 17일 토요일

NSBundle Class• NSBundle은 어플 관련된 화일이 화일시스템에 저장된 장소에 관한 정보를 저장하는 객체이다.

• mainBundle : 어플의 실행 파일이 저장된 디렉토리를 나타내는 NSBundle 객체를 반환한다. + (NSBundle *)mainBundle

• - (NSArray *)loadNibNamed:(NSString *)name owner:(id)owner options:(NSDictionary *)options

name nib화일의 이름 The name of the nib file, which need not include the .nib extension. owner :nib화일의 File's Owner object. options : A dictionary containing the options to use when opening the nib file. For a list of available keys for this dictionary, see “Nib File Loading Options. Nib화일에 저장된 Toplevel 객체를 어레이형태로 반환하는 메소드 (최상위 오브젝트는 뷰계층에서 root View가 0인 객체들이다.)

category로 NSBundle 클래스에 추가된 메소드

2011년 9월 17일 토요일

tableView: cellForRowAtIndexpath:메소드변경

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [[self appDelegate].photoArray count];}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { //cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease]; NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"PhotoTableCell" owner:self options:nil]; cell = [topLevelObjects objectAtIndex:0]; //커스텀 셀객체의 포인터를 읽어옴 } ! NSDictionary *photoData = [[self appDelegate].photoArray objectAtIndex:indexPath.row];!! // cell.textLabel.text = [photoData valueForKey:@"Country"];! // cell.detailTextLabel.text = [photoData valueForKey:@"Region"];! // cell.imageView.image = [photoData valueForKey:@"Thumbnail"]; UIImageView *imageView = (UIImageView *) [cell viewWithTag:1]; imageView.image = [photoData valueForKey:@"Thumbnail"]; UILabel *label; label = (UILabel *) [cell viewWithTag:2]; label.text = [photoData valueForKey:@"Country"]; label = (UILabel *) [cell viewWithTag:3]; label.text = [photoData valueForKey:@"Region"];

! cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

return cell;}

2011년 9월 17일 토요일

테이블뷰의 크기조정• RootViewController.xib에서 Tableview의 Row의

height와 PhotoTableCell.xib의 height를 같게 맞춰준다.

2011년 9월 17일 토요일