iOS UITableView HeaderView 추가하기 (섹션 헤더 아님)


167

연락처 앱과 같이 테이블 헤더 (섹션 헤더가 아닌)를 추가하고 싶습니다. 여기에 이미지 설명을 입력하십시오

정확히 위와 같습니다-표 위의 이미지 옆에있는 레이블.

모든보기를 스크롤 할 수 있기를 원하므로 테이블 외부에 배치 할 수 없습니다.

어떻게해야합니까?

답변:


245

UITableViewtableHeaderView속성을. 원하는 뷰로 설정하십시오.

new UIView를 컨테이너로 사용하고 텍스트 레이블과 이미지 뷰를 new UIView에 추가 한 다음 tableHeaderView새 뷰로 설정 하십시오.

예를 들어 UITableViewController:

-(void)viewDidLoad
{
     // ...
     UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     [headerView addSubview:imageView];
     UILabel *labelView = [[UILabel alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
     [headerView addSubview:labelView];
     self.tableView.tableHeaderView = headerView;
     [imageView release];
     [labelView release];
     [headerView release];
     // ...
} 

큰! 고마워요. 테이블 뷰 셀을 내부 텍스트만큼 커지게 만드는 속성이 있습니까?
Assaf b

이를 위해서는 문자열이 주어진 셀의 높이를 계산하고 heightForRowAtIndexPath에 해당 값을 전달할 수 있어야합니다. NSString의 메소드 sizeWithFont : constrainedToSize : 함수를 사용하여 크기로 제한 될 때 텍스트의 높이를 알아낼 수 있습니다.
Mark

레이아웃 후에 추가하십시오. 그렇지 않으면 원하는 크기가 아닙니다. 그리고 viewDidLoad는 좋은 곳입니다.
BollMose 5

viewDidLoad 단계에서 뷰의 형상을 설정하는 것이 좋은 방법입니까?
Nandish A

1
좋아, 테이블 소스에서 헤더 뷰를 설정하면 작동하는 것처럼 보입니다. 높이도 설정하십시오. 예 :public override UIView GetViewForHeader(UITableView tableView, nint section) { return headerView; } public override nfloat GetHeightForHeader(UITableView tableView, nint section) { return headerView.Frame.Height; }
panthor314

193

Interface Builder에서 쉽게 할 수 있습니다. 테이블이있는 뷰를 만들고 다른 뷰를 테이블에 놓기 만하면됩니다. 테이블 헤더 뷰가됩니다. 해당보기에 레이블과 이미지를 추가하십시오. 뷰 계층에 대해서는 아래 그림을 참조하십시오. Interface Builder에서 계층보기


12
이 답변을 선호합니다. 왜 코드를 깔끔하게 설정하고 IB에 배치 할 수 있을까요?
Besi

1
힌트 주셔서 감사합니다. BTW 다른 누군가가 궁금하거나 시도한 경우 헤더에 스크롤보기가 필요하지 않습니다. 헤더가 기술적으로 jQuery과의 한 부분이기 때문에 그것은 당신의 헤더에 대한 jQuery과의있는 ScrollView를 사용
롭 R.

2
지금 스토리 보드 편집기에서 작동하는 방법에 대한 언급을 가치 : stackoverflow.com/q/7841167/926907
드미트리 Zaytsev

이를 위해 펜촉을 사용하지 마십시오. 로드하는 데 시간이 더 걸립니다. 코드로 작성하십시오. 재사용 성을 위해 커스텀 클래스를 생성하고 인스턴스를 생성하십시오.
Charles Robertson

1
헤더 뷰에 높이 제한을 추가 할 수는 없습니다.
Ian Warburton

14

에서 스위프트 :

override func viewDidLoad() {
    super.viewDidLoad()

    // We set the table view header.
    let cellTableViewHeader = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewHeaderCustomCellIdentifier) as! UITableViewCell
    cellTableViewHeader.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewHeaderCustomCellIdentifier]!)
    self.tableView.tableHeaderView = cellTableViewHeader

    // We set the table view footer, just know that it will also remove extra cells from tableview.
    let cellTableViewFooter = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewFooterCustomCellIdentifier) as! UITableViewCell
    cellTableViewFooter.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewFooterCustomCellIdentifier]!)
    self.tableView.tableFooterView = cellTableViewFooter
}

iOS 7 이상에서이 접근 방식을 사용하면 런타임 테이블 경고 : "재사용되는 테이블 셀의 인덱스 경로 없음"이 트리거됩니다. 이 오류를 피하기 위해 참조 링크
baskInEminence

11

또한 인터페이스 빌더에서 UIView 만 작성하고 ImageView 및 UILabel을 끌어서 놓아 원하는 헤더처럼 보이게 한 다음 사용할 수 있습니다.

UIView가 원하는 방식으로 표시되면 XIB에서 프로그래밍 방식으로 초기화하여 UITableView에 추가 할 수 있습니다. 즉, IB에서 ENTIRE 테이블을 디자인 할 필요가 없습니다. headerView 만 (이 방법으로 헤더 뷰를 다른 테이블에서도 재사용 할 수 있음)

예를 들어 테이블 헤더 중 하나에 대한 사용자 정의 UIView가 있습니다. 뷰는 "CustomHeaderView"라는 xib 파일로 관리되며 UITableViewController 서브 클래스에서 다음 코드를 사용하여 테이블 헤더에로드됩니다.

-(UIView *) customHeaderView {
    if (!customHeaderView) {
        [[NSBundle mainBundle] loadNibNamed:@"CustomHeaderView" owner:self options:nil];
    }

    return customHeaderView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Set the CustomerHeaderView as the tables header view 
    self.tableView.tableHeaderView = self.customHeaderView;
}

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

    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,tableView.frame.size.width,30)];
    headerView.backgroundColor=[[UIColor redColor]colorWithAlphaComponent:0.5f];
    headerView.layer.borderColor=[UIColor blackColor].CGColor;
    headerView.layer.borderWidth=1.0f;

    UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 5,100,20)];

    headerLabel.textAlignment = NSTextAlignmentRight;
    headerLabel.text = @"LeadCode ";
    //headerLabel.textColor=[UIColor whiteColor];
    headerLabel.backgroundColor = [UIColor clearColor];


    [headerView addSubview:headerLabel];

    UILabel *headerLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, headerView.frame.size.width-120.0, headerView.frame.size.height)];

    headerLabel1.textAlignment = NSTextAlignmentRight;
    headerLabel1.text = @"LeadName";
    headerLabel.textColor=[UIColor whiteColor];
    headerLabel1.backgroundColor = [UIColor clearColor];

    [headerView addSubview:headerLabel1];

    return headerView;

}

질문을 이해하지 못했습니까?
Priyam

2
이것은 잘못이다. 그는 섹션 헤더가 아닌 단일 테이블 헤더 만 원합니다. 두 가지가 매우 다릅니다. 질문을 읽으십시오.
찰스 로버트슨
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.