Dodawanie iOS UITableView HeaderView (nie nagłówek sekcji)

Chcę dodać nagłówek tabeli (nie nagłówki sekcji), jak w aplikacji kontaktów, na przykład:

dokładnie tak - etykieta obok obrazu nad tabelą.

Chcę, aby widok całości był przewijalny, więc nie mogę umieszczać ich poza stołem.

Jak mogę to zrobić?

UITableViewposiada tableHeaderViewwłasność. Ustaw dowolny widok, jaki chcesz.

Użyj nowego UIViewjako kontenera, dodaj etykietę tekstową i widok obrazu do tego nowego UIView, a następnie ustaw tableHeaderViewnowy widok.

Na przykład w 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];
     // ...
} 

Możesz to zrobić całkiem łatwo w Interface Builder. Po prostu utwórz widok z tabelą i upuść inny widok na stół. Będzie to widok nagłówka tabeli. Dodaj etykiety i obraz do tego widoku. Zobacz zdjęcie poniżej, aby zobaczyć hierarchię widoków.

W Swift :

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
}

Możesz także po prostu utworzyć TYLKO UIView w narzędziu do tworzenia interfejsów i przeciągnąć i upuścić ImageView i UILabel (aby wyglądał jak żądany nagłówek), a następnie użyć tego.

Gdy Twój UIView będzie wyglądał tak, jak chcesz, możesz go programowo zainicjować z XIB i dodać do swojego UITableView. Innymi słowy, nie musisz projektować CAŁEGO stołu w IB. Tylko headerView (w ten sposób widok nagłówka może być ponownie użyty w innych tabelach)

Na przykład mam niestandardowy UIView dla jednego z moich nagłówków tabeli. Widok jest zarządzany przez plik xib o nazwie „CustomHeaderView” i jest ładowany do nagłówka tabeli przy użyciu następującego kodu w mojej podklasie 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;
}

- (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;

}