Chapter 6Bit Academy 송진석

2011년 9월 17일 토요일

2011년 9월 17일 토요일

학습목표

• 테이블 뷰의 특징과 용도

• 테이블뷰의 MVC기반 이해

• 테이블뷰의 테이터 소스 프로토콜 기본메소드 이해

• 테이블 뷰의 재사용 큐메카니즘 이해

2011년 9월 17일 토요일

테이블뷰테이블뷰는 plain tableview와 grouped tableview가 있다

테이블뷰 구성- section

section headersection footer

- row

테이블뷰는 계층형 테이타 리스트를 표현하는데 적합하다.

2011년 9월 17일 토요일

TableviewCell row는 tableViewCell 객체로 표현된다. 셀은 4가지 타입이 정의되어 있다.

image is allowed image is allowedsubtitle

image is not allowedsubtitle right aligned

image is not allowedmain title is in bluesubtitle left aligned

2011년 9월 17일 토요일

테이블 뷰를 구성하기 위해 필요한 클래스들

• UITableViewController Class : UITableViewDelegate & UITableViewDataSource 프로토콜을 따름, 구현 객체가 됨, TableView 객체를 생성.

• UITableView Class : 계층적 정보목록을 화면에 표시하고 편집하는 방법을 제공

• UITableViewCell Class : row를 표현하는데사용

2011년 9월 17일 토요일

Cell Object 구조

disclosure indicators, detail disclosure controls, control objects such as sliders or switches, and custom views

셀이 재배치가 가능하도록 구성되면 재배치(reordering) 콘트롤이 나타남 재배치 콘트롤을 누른 상태 에서 드래그하면 셀이 테이블 뷰에서 움직여 다른 위치에 놓임

테이블 뷰가 에디팅 모드에 들어가면 에디팅 콘트롤이 나타남, 에디팅 콘트롤은 삭제나 삽입 콘트롤중의 하나임. 셀 콘텐츠는 오른쪽으로 밀림

2011년 9월 17일 토요일

Accessary View

Disclosure indicator—UITableViewCellAccessoryDisclosureIndicator. disclosure indicator를 클릭하면 다음 계층에 놓인 정보목록을 테이블뷰 형태로 보여준다.

Detail disclosure button—UITableViewCellAccessoryDetailDisclosureButton.detail disclosure button을 클릭하게 되면 해당줄의 상세정보 화면을 보여준다. 상세정보화면은 테이블뷰형태 일수도 있고 다른 뷰형태일 수도 있다.

Check mark—UITableViewCellAccessoryCheckmark. 테이블 뷰에 있는 항목라인을 선택하는 경우에 쓰인다. 한라인 항목만 선택되게 할수도 있고 복수개의 라인항목이 선택될 수도 있다.

2011년 9월 17일 토요일

DataSource & Delegate Protocol

- UITableView 객체는 Data Source 프로토콜을 구현한 콜백을 가진 객체와 delegate 프로토콜을 구현한 콜백을 가진 객체를 가져야만 한다. 이들 객체는 application delegate나 custom UITableViewController객체가 될 수 있다.

- data source는 UITableViewDataSource protocol을 delegate는 UITableViewDelegate protocol을 따라야 한다.

- data source는 UITableView 객체가 테이블을 구성하기 필요한 정보를 제공한다. 그리고 테이블의 row를 삽입, 삭제하거나 순서를 변경한 경우 이를 데이타 모델에 반영하기 위한 정보를 제공한다.

- Delegate는 테이블에서 줄을 나타내기 위한 셀들을 제공하고 악세사리 뷰나 선택을 관리하는 기능을 제공한다.

2011년 9월 17일 토요일

Data Source Protocol 구현 및 오브젝트간 관계

테이블뷰객체

Data Source Object(TableViewController

or Application Delegate object)

Delegate

계층적데이타모델

UITableView Data Source ProtocolConfiguring a Table View1 – tableView:cellForRowAtIndexPath:  required method2 – numberOfSectionsInTableView:3 – tableView:numberOfRowsInSection:  required method4 – sectionIndexTitlesForTableView:5 – tableView:sectionForSectionIndexTitle:atIndex:6 – tableView:titleForHeaderInSection:7 – tableView:titleForFooterInSection:

Inserting or Deleting Table Rows1 – tableView:commitEditingStyle:forRowAtIndexPath:2 – tableView:canEditRowAtIndexPath:

Reordering Table Rows1 – tableView:canMoveRowAtIndexPath:2 – tableView:moveRowAtIndexPath:toIndexPath:

테이블뷰객체에 표시된 정보에 변경을 가하면 이는 데이타 모델에 반영되어야 한다.데이타 모델에 변경이 생기면 이는 테이불 뷰의 표시내용에 반영되어야 한다.

이러한 상호반영은 Data Source Object에 구현된 프로토콜의 콜백에 의해서 이루어진다

메소드(콜백)으로 구현

2011년 9월 17일 토요일

Delegate Protocol 구현 및 오브젝트간 관계

테이블뷰객체

Delegate Object(TableViewController

or Application Delegate object) 계층적데이타모델

UITableView DelegateProtocolConfiguring Rows for the Table View1 – tableView:heightForRowAtIndexPath:2 – tableView:indentationLevelForRowAtIndexPath:3 – tableView:willDisplayCell:forRowAtIndexPath:

Managing Accessory Views1 – tableView:accessoryButtonTappedForRowWithIndexPath:2 – tableView:accessoryTypeForRowWithIndexPath: Deprecated in iOS 3.0

Managing Selections1 – tableView:willSelectRowAtIndexPath:2 – tableView:didSelectRowAtIndexPath:3 – tableView:willDeselectRowAtIndexPath:4 – tableView:didDeselectRowAtIndexPath:

Modifying the Header and Footer of Sections1 – tableView:viewForHeaderInSection:2 – tableView:viewForFooterInSection:3 – tableView:heightForHeaderInSection:4 – tableView:heightForFooterInSection:

Editing Table Rows1 – tableView:willBeginEditingRowAtIndexPath:2 – tableView:didEndEditingRowAtIndexPath:3 – tableView:editingStyleForRowAtIndexPath:4 – tableView:titleForDeleteConfirmationButtonForRowAtIndexPath:5 – tableView:shouldIndentWhileEditingRowAtIndexPath:

Reordering Table Rows1 – tableView:targetIndexPathForMoveFromRowAtIndexPath:toProposedIndexPath:

RowAtIndexPath에 의해 지정된 행의 모양이나 사용자의 상호작용등을 처리하도록 Delegate 객체가 콜백으로 구현해야할 프로토콜을 명기나타낸다. 콜백내에서 데이타 모델에 대한 반영도 같이 이루어진다.

메소드(콜백)으로 구현

2011년 9월 17일 토요일

예제코드 설명

2011년 9월 17일 토요일

TableView 동작

TableView 객체DataSource& Delegate객체

데이타 객체NSArray

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1;}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {" int rowCount = [[self appDelegate].personnel count]; return rowCount;} 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {  static NSString *CellIdentifier = @"Cell";  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease]; } " NSArray *personnel = [self appDelegate].personnel;" NSDictionary *employee = [personnel objectAtIndex:indexPath.row];" cell.textLabel.text = [employee valueForKey:@"nameOfEmployee"];" cell.detailTextLabel.text = [employee valueForKey:@"departmentOfEmployee"]; return cell;}

- (void)applicationDidFinishLaunching:(UIApplication *)application {" personnel = [[NSArray alloc] initWithArray:[self createEmployees]];" [window addSubview:[navigationController view]]; [window makeKeyAndVisible];}

TableView 객체는 Data Source가 알려준 섹션수와 각 섹션당 row 갯수를 바탕으로 tableView:cellForRowAtIndexPath: 콜백을 반복적으로 불러 cell객체를 받아 TableView를 채운다.

RootViewController.m SimpleHumanResourceAppDelegate.m

2011년 9월 17일 토요일

재사용큐

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {  static NSString *CellIdentifier = @"Cell";  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease]; } " NSArray *personnel = [self appDelegate].personnel;" NSDictionary *employee = [personnel objectAtIndex:indexPath.row];" cell.textLabel.text = [employee valueForKey:@"nameOfEmployee"];" cell.detailTextLabel.text = [employee valueForKey:@"departmentOfEmployee"]; return cell;}

테이블뷰를 스크롤시 화면에서 사라진 셀오브젝트를 재사용큐에 저장했다가 새로보여질 cell 오브젝트를 재사용큐에서 검색해서 같은 타입이면 새로생성하지 않고 큐에 있는 셀을 사용 한다. 생성시간을 절약해서 성능을 향상, 타입은 reuseIdentifier로 구분한다.

셀생성시 reuseIdentifier를 설정한다

2011년 9월 17일 토요일

XCode를 이용한 제작1. In Xcode, choose New Project from the File menu.2. Select the Navigation-based Application template project and click Choose.3. Specify a name and location for the project and click Save.

RootViewController : datasource, delegate 콜백 메소드 구현MyTableViewAppDelegate : application delegate 구현MainWindow.xib:RootViewController.xib:

Navigation-based application template은 네비게이션 콘트롤러와 테이블

2011년 9월 17일 토요일

MainWindow.Xib 구조어플리게이션이 시작되면 MainWindow.xib nib file은 메모리에 로드되고 어플리케이션 델리게이트는 초기화면을 네비게이션 콘트롤러를 통해 네비게이션 바에 있는 Root View Controller의 View 즉 Table View를 표시한다.

The application delegate displaying the initial user interface- (void)applicationDidFinishLaunching:(UIApplication *)application {

[window addSubview:[navigationController view]];

[window makeKeyAndVisible];

}

네비게이션콘트롤러는 네비게이션바를 네비게이션바는 보여질 view를 관리하는 viewController를 관리한다. RootViewController는 TableViewController의 서브클래스로 tableView를 관리한다.

2011년 9월 17일 토요일

root view controller’s nib for view

document window에서 Root View Controller object를 선택한다. 속성창을 선택하면 NIB Name 필드에 RootViewController가 정해진 것을 볼수 있다. 어플리케이션 델리게이트가 네비게이션 콘트롤러에게 뷰를 요청하면 네비게이션 콘트롤러는 root view controller에게 뷰를 요청하고 root view controller는 NIB Name 필드에 설정된 RootViewController.Nib화일을 불러 뷰를 만든다.

2011년 9월 17일 토요일

RootViewController.xib

RootViewController와 table view간의 연결관계를 보기위해 , File’s Owner(RootViewController)선택하고 연결관계 탭을 선택한다.

TableView 클래스에 있는 propertydataSourceThe object that acts as the data source of the receiving table view.

@property(nonatomic, assign) id<UITableViewDataSource> dataSourceDiscussionThe data source must adopt the UITableViewDataSource protocol. The data source is not retained.

delegateThe object that acts as the delegate of the receiving table view.

@property(nonatomic, assign) id<UITableViewDelegate> delegateDiscussionThe delegate must adopt the UITableViewDelegate protocol. The delegate is not retained.

tableView (UITableViewController Class)Returns the table view managed by the controller object.

@property(nonatomic, retain) UITableView *tableView

view property inherited from UIViewController

RootViewController객체를 참조하는 Table View 객체의 property들TableView 객체의 dataSource protocol과 delegate protocol을RootViewController객체에서구현한다.

2011년 9월 17일 토요일