2014년 2월 3일 월요일

TableViewHeader에 버튼 여러 개 달린 커스텀 뷰 달기

UITableView의 헤더는 뷰의 커스터마이징이 가능하다. (UIKit, xib, storyboard 등으로 가능)

[FIRST][SECOND][THIRD] 버튼을 누르면 해당 버튼 조건에 맞추어 재정렬을 하거나 다른 (테이블)뷰를 보여주는 등의 커스터마이징을 구현하면 된다.

3개의 버튼을 만들었지만 2개로 구성해도 되고 4~5개를 만들어도 된다.


 -------- section header -------
 [FIRST] [SECOND] [THIRD]
=====================
            TableView Cell
 -------------------------------
            TableView Cell
 -------------------------------
                      ...





1. UITableViewController의 implementation에 다음 함수를 추가한다.
(UITableView의 delegate method 중 하나임)

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
     // create a custom view
     UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 34.0)];
     customView.backgroundColor = [UIColor whiteColor];

     UIButton *btnFirst = [UIButton buttonWithType:UIButtonTypeSystem];
btnFirst.frame = CGRectMake(0.0, 0.0, 106, 34);
[btnFirst setTitle:@"FIRST" forState:normal];
[btnFirst setBackgroundColor:[UIColor clearColor]];
[btnFirst addTarget:self action:@selector(sortFirst:) 
        forControlEvents:UIControlEventTouchUpInside];
[customView addSubview:btnFirst];

UIButton *btnSecond = [UIButton buttonWithType:UIButtonTypeSystem];
btnSecond.frame = CGRectMake(107.0, 0.0, 106, 34);
[btnSecond setTitle:@"SECOND" forState:normal];
[btnSecond setBackgroundColor:[UIColor clearColor]];
[btnSecond addTarget:self action:@selector(sortSecond:) 
        forControlEvents:UIControlEventTouchUpInside];
[customView addSubview:btnSecond];

UIButton *btnThird = [UIButton buttonWithType:UIButtonTypeSystem];
btnThird.frame = CGRectMake(214.0, 0.0, 106, 34);
[btnThird setTitle:@"MONTHLY" forState:normal];
[btnThird setBackgroundColor:[UIColor clearColor]];
[btnThird addTarget:self action:@selector(sortThird:)  
         forControlEvents:UIControlEventTouchUpInside];
[customView addSubview:btnThird];

      return customView;
}


// Section Header 높이 지정 델리게이트 메소드
- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 28.0f;    // 헤더의 높이를 지정해줌. 안해주면 정상적인 크기로 출력되지 않는다

}


2. @selector로 지정한 self 메소드를 구현해준다.
  sortFirst:
// 첫 번째 버튼
- (void)sortFirst
{
    // 이 곳에 코드를 채워넣는다

 sortSecond:
// 두 번째 버튼
- (void)sortSecond
{
    // 이 곳에 코드를 채워넣는다

  sortThird:
// 세 번째 버튼
- (void)sortThird
{
    // 이 곳에 코드를 채워넣는다

댓글 없음:

댓글 쓰기