UITableView 에 Header, Footer를 넣어보자

참고 링크 : http://translate.google.com/translate?u=http%3A%2F%2Fadeem.me%2Fblog%2F2009%2F05%2F24%2Fiphone-sdk-tutorial-part-4-tips-for-uitableview-design-change-design-add-header-footer-add-background-images-tips%2F&hl=ko&langpair=auto|ko&tbb=1&ie=utf-8

 

테이블에는 여러 섹션이 있을 수 있다.

각 섹션은 헤더와 푸터를 가질 수 있다.

 

위 링크를 참고하여 UITableView의 그룹 스타일필드의 디자인을 변경할지 공부해 보자

 

 

헤더와 푸터의 활용으로 위와 같은 배경이미지 구성이 가능하다. 이쁘지 않은가..

 

 

1. 일단 프로젝트를 하나 만들어 리소스 파일안에 이미지를 넣는다. (아님 폴더를 따로 만들어 준다.)

 

 

이미지를 마구 넣어 준다. 캬캬캬

 

2. TableViewController.xib 파일을 열어 줍니다.  cmd + shift + l (open library) 눌르고  image view를 UITableView 위로 드래그 합니다.

cmd + 3 (image inspector)를 눌러 image x to 0, y to 0 을 width to 320 and height to 460 으로 고쳐줍니다.

이제 인터페이스 빌드의 레이아웃 폼 메뉴의 'Send to Back'을 클릭하여 줍니다.

 

 

 

 

 

 

 

 

 

 

3.  인터페이스 빌더를 닫고 xcode를 엽니다. 빌더를 해봤자 아무런 효과가 없습니다.

(모든 코드 변경은 구현파일(.m)에서 해야 합니다.)

구현파일 viewDidLoad 파일에 아래 줄을 추가하여 줍니다. (UITable의 배경색)

 

tblSimpleTable.backgroundColor = [UIColor clearColor];

 

4. 다시 빌더 하면 배경이미지를 볼 수 있습니다.

 

 

5. 여기서 멈출 수 없습니다.

셀의 악세사리 유형을 추가해 봅시다. 무조건 해보는 겁니다.

cell의 악세사리 형 cellForRowAtIndexPath 함수 안에 다음 코드를 추가합니다.

 

cell.accessoryType =  UITableViewCellAccessoryDisclosureIndicator;

//UITableViewCellAccessoryDetailDisclosureButton,

//UITableViewCellAccessoryCheckmark

 

 

6. 다시 실행하면 액서사리 유형을 볼 수 있습니다.

 

 

7. 이제 뷰를 클릭하여 페이지 이동을 구현 하겠습니다. 

didSelectRowAtIndexPat 함수에 밑에 코드를 추가해 주십시오

 

 [tableView deselectRowAtIndexPath:indexPath animated:YES];

 

8. 배경을 더 선명하게 보이게 하기 위해 UITableViewdml alpha를 고쳐줘야 합니다.

viewDidLoad 함수에 다음을 추가 해봅시다.

 

tblSimpleTable.alpha = 0.9;

 

 

쬐깬 선명해 졌네요

 

9. 마지막으로 헤더와 푸터에 이미지를 넣는 법입니다.

TableViewController.m 파일에 추가해줍시다. 4개의 이미지 파일을 더해줬습니다.

 

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{

return 60.0;

 }

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{

return 60.0;

  }

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{

if(section == 0)

return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AppleProductHeader.png"]];

else

return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AdobeSoftwareHeader.png"]];

}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{

if(section == 0)

return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AppleProductFooter.png"]];

else

return [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"AdobeSoftwareFooter.png"]];

}

 

모르겠다면 무조건 시험해보자..

 

 

 

 

 

 

 

 

 

 

You can watch the screen cast for group UITableView here.





You can watch the screen cast for plain UITableView here.