IB 없이 하기, UITableView끝장보기 (3) 셀의 구조

전 글까지 그룹과 셀을 구현해봤습니다

이번에 셀의 구조를 다루어 보겠습니다

UITableViewCell은 기본적으로 이미지뷰, 라벨뷰와 커스텀뷰(악세사리뷰)로 되어 있습니다

 

 

코딩해보겠습니다

프로젝트에서 리소스에 이미지를 추가합니다

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

셀을 만드는 함수에서 

cell.image = [UIImage imageNamed:@"이미지 파일명"];

이미지뷰를 따로 설정할 필요 없이 이미지만 설정하면 알아서 배치됩니다

 

 

라벨뷰의 경우

cell.text = @"test"; 

방법으로 문자열을 설정할수 있으며

 

cell.font = [UIFont systemFontOfSize:20.0];

글자 크기및 폰트는 위 방법으로 설정하실수 있습니다

그러나 지원되는 폰트가 한계가 있고 한국어의 경우 기본 폰트 하나 밖에 지원되지 않습니다

그래서 다른 폰트를 사용하려면 이미지로 맵핑하는 방법이 있습니다만

결국 보통 방법으로는 안된다는 거죠...

라벨뷰에 적힐 문자열의 배치(정렬)도 정할수 있습니다

cell.textAlignment = UITextAlignmentCenter;

정렬은  UITextAlignmentLeft(왼쪽), UITextAlignmentCenter(가운데), UITextAlignmentRight(오른쪽) 이 세가지로 설정하시면 됩니다

설정하지 않으면 기본값으로 UITextAlignmentLeft가 선택되게 됩니다

글자색 설정하는건 

cell.textColor = [UIColor redColor]; 

방법으로 설정하실수 있습니다.

이 외에도 다양한 설정 옵션들이 있습니다만 기능하나하나 설명하려하면 내용이 너무 길어지는 관계로 

기본적인 기능만 설명하겠습니다 좀더 자세한 정보는 라이브러리에 API를 보시거나 UITableViewCell의 헤더를 열어보시길 추천합니다

한번 코딩하고 돌려보겠습니다

 

 

 

 

글자색은 빨강색으로하고 정렬을 가운데로, 그리고

왼쪽에 위치한 이미지뷰에는 임의의 이미지를 설정해봤습니다.

 

이번에는 악세사리뷰를 해보겠습니다

악세사리뷰는 두가지 방법으로 구현됩니다.

시스템에서 기본 제공되는 설정을 사용하거나 자신이 원하는 뷰를 만들어 넣을수 있습니다

직접 제작하는 뷰의 경우  너무 커서는 안되겠죠.

우선 시스템에서 제공되는 악세사리는 사용해 보겠습니다

시스템 악세사리에는 총 4가지가 제공됩니다

 UITableViewCellAccessoryNone

    기본적인 형태로 악세사리뷰에 아무것도 없을때 씁니다 (기본값)

 UITableViewCellAccessoryDisclosureIndicator

    > 표시를 이미지로 넣어진 악세사리입니다 보통 그 셀의 정보를 한단계 더 들어갈때 표현합니다.

    예) 영화관 리스트 -> 상영 목록 

 UITableViewCellAccessoryDetailDisclosureButton

    그 셀의 정보를 보고자 할때 표현 합니다

    예) 상영 목록 -> 영화 정보

 UITableViewCellAccessoryCheckmark

    채크 이미지로 리스트에서 특정 셀이 선택되었다고 표현할때 씁니다.

시스템 악세사리 설정은 

cell.accessoryType = UITableViewCellAccessoryNone;

방법으로 설정하시면 됩니다.

한번 코딩해보겠습니다

 

 

 

일일이 하나해보고 스샷찍고 하기에는 번거로아서

switch문으로

0번째 셀에는 none(없음)으로,

1번은 UITableViewCellAccessoryDisclosureIndicator,

2번은 UITableViewCellAccessoryDetailDisclosureButton, 그리고

3번은 UITableViewCellAccessoryCheckmark뜨게 해보았습니다.

 

이번에는 커스텀 악세사리뷰를 만들어 보겠습니다

커스텀 악세사리뷰는

cell.accessoryView = ?

방식으로 설정하게 됩니다

*악세사리뷰가 설정되면 기본 제공 악세사리는 무시됩니다.

accessoryView는 UIView으로 정의되어 있습니다.

앞서 설명한 이미지 뷰는 이미지 실제 크기에 이미지뷰가 맞춰지게 됩니다

그리고 셀의 왼쪽에 위치하기 때문에 왼쪽에서 오른쪽으로 늘어 나게 됩니다

악세사리뷰의 경우 셀의 오른쪽에 위치하기 때문에 뷰의 크기에 따라 오른쪽에서 왼쪽으로 늘어나게 됩니다

한번 악세사리뷰에 이미지뷰를 만들어서 붙여보겠습니다

cell.accessoryView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"p1.png"]] autorelease];

아까 올린 이미지가 있으니 재활용 해봤습니다

 

 

 

 

 

 

아까의 스위치문에서 조금 바꿔 주는 방법으로 고쳐봤습니다

셀이 0번부터 3번까지는 제공 악세사리를 사용하고 그외 셀은 이미지뷰를 넣도록 했습니다

 

셀의 갯수가 5개라 그중 4개가 사용되었으니 한개만 이미지뷰로 뜬것을 알수있습니다.

이번에는 셀의 갯수를 늘리고

UISwitch와 UISlider를 넣어서 응용해보겠습니다.

셀의 갯수를 7개로 수정해주고

스위치 문에 

case 4:

cell.accessoryView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"p1.png"]] autorelease];

break;

case 5:

cell.accessoryView = [[[UISwitch alloc] initWithFrame:CGRectZero] autorelease];

break;

case 6:

cell.accessoryView = [[[UISlider alloc] initWithFrame:CGRectMake(0.0, 0.0, 200.0, 20.0)] autorelease];

break;

다음을 추가해 주었습니다

 

 

우선 셀의 갯수를 7로 늘려주고

 

 

 

switch 문에 추가..

 

 

 

여기서 잠시 주의사항*

이상태에서 스크롤을 내리셨다가 다시 위로 올리면

이상한 현상을 보실수 있습니다

 설명했듯이

테이블뷰는 화면에 보이는 셀만으로 재사용 하며 계속 데이터를 보여주는 방식을 쓰고 있습니다

그래서 전에 설정된 데이터가 남아 있다는 거죠

위의 스샷을 보시면 아무것도 없어야할 0번 셀에 UISwitch가 있는걸 보실수 있습니다

앞서 알려 드렸듯이 악세사리뷰가 설정되면 제공 악세사리설정은 무시됩니다

그래서 None으로 설정해도 악세사리뷰가 남아 있기 때문에 저런 현상이 뜨는겁니다

그래서

셀에 새로운 데이터를 적용하기 전에 한번 초기화 하는 작업을 해줍니다

cell.text = nil;

cell.image = nil;

cell.accessoryView = nil;

cell.accessoryType = UITableViewCellAccessoryNone;

상황에 따라 할 필요가 없기도 합니다만, 그건 개발자 몫이죠

 

 

 

- 객체를 생성시 일단 초기화를 해 준다.

 

오늘은 이만...