순정 UITableView에서 Row개수만큼만 데이터 표시하기

UITableView에 데이터를 보여줄 때 데이터의 개수가 적으면 아래 그림처럼 보여지곤 한다. 데이터가 없음에도 화면에 빈 테이블뷰를 보여주는 것은 좀 구리다.

UITableView default

Row 개수만큼만 보여주고 싶으면 어떻게 해야 할까?

UITableView 및 UITableViewCell를 개발자가 별도로 재정의하여야만 할까? 물론 그래도 되지만 UITableView를 개발자가 구현한다면  Cell 재사용, Scroll View등 신경써야 할 부분이 많다.

UITableViewCell은 화면에 보여지는 데이터와 직접적인 관련이 있어 재정의하여 많이 사용된다. 그러나 UITableView는 UITableViewCell만큼 재정의해서 사용되진 않는다. 순정 UITableView를 이용해도 많은 부분 커버된다.

위 문제도 아주 간단한 방법으로 아래 그림처럼 구현이 가능하다.

UITableView after setting footerview

UITableView 하나로 구성된 테스트 프로젝트를 하나 만들었다. 코드는 아래와 같다.


@implementation ViewController{

    NSArray *_dataArray;
}

- (void)viewDidLoad
{

    [super viewDidLoad];
    // 테스트 데이터
    _dataArray = [NSArray arrayWithObjects:[NSString stringWithFormat:@"Row 1"],
                 [NSString stringWithFormat:@"Row 2"],
                 [NSString stringWithFormat:@"Row 3"], nil];

    _tableView.dataSource = self;
    _tableView.delegate = self;

    // tableFooterView를 정의. 사전에 tableFooterView가 기획되지 않았으므로 작은 영역으로 정의한다.
    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 10)];

    // footerView가 화면에 보이지 않도록 배경은 투명하게
    footerView.backgroundColor = [UIColor clearColor];

    // tableFooterView 설정
    _tableView.tableFooterView = footerView;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return _dataArray.count;
}

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

    static NSString *testIdentifer = @"testIdentifier";
    UITableViewCell *cell;

    cell = [tableView dequeueReusableCellWithIdentifier:testIdentifer];

    if(!cell){

       cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:testIdentifer];

    }

    cell.textLabel.text = [_dataArray objectAtIndex:indexPath.row];

    return  cell;
}

코드에서 보는 바와 같이 tableFooterView를 설정함으로써 간단히 구현된다.

UITableView의 배경색을 [UIColor clearColor] 로 설정하고, UITableViewCell을 재정의하여 Cell이 자체의 색상을 갖도록 하면(보통 Cell의 배경색은 UITableView의 배경색을 따름), 데이터가 없는 영역에는 UITableView 바로 아랫단의 뷰(위 예제의 경우 self.view)가 보여져 Row 개수만큼만 UITableView 영역이 설정된 것과 같은 효과를 얻을 수 있다.  (아래 그림)

UITableView with custom UITableViewCell

너무 간단한 방법이라 이렇게 포스팅하는게 우습기도 하지만, 본인이 젤 첨 UITableView를 공부할 때 위와 같은 구현법이 굉장히 궁금했으나 그 방법을 알아내기가 쉽지 않았다. UIView를 이용한 나만의 테이블뷰를 만들어야 하나 생각도 했었다.

UITableView의 tableHeaderView, tableFooterView, sectionHeaderView, sectionFooterView를 이용하면, UITableView만으로 다양한 형태의 화면 구성이 가능하다.

Advertisements
Leave a comment

2 Comments

  1. 덕분에 코드가 깔끔해 져써요 ^^ 감사합니다.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: