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


167

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

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ć?

Odpowiedzi:


245

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];
     // ...
} 

Wspaniały! Dzięki, to działa. Czy jest jakaś właściwość powodująca, że ​​komórki widoku tabeli rosną tak, jak tekst w środku?
Assaf b

Aby to zrobić, musisz być w stanie obliczyć wysokość komórki podanej jako ciąg znaków i przekazać tę wartość jako heightForRowAtIndexPath. Możesz użyć metody sizeWithFont: constrainedToSize: function NSString, aby obliczyć wysokość tekstu, gdy jest on ograniczony do rozmiaru.
Mark

Dodaj go po układzie, albo jego rozmiar nie będzie pożądany. A viewDidLoad to dobre miejsce.
BollMose

Czy dobrą praktyką jest ustawienie geometrii widoku podczas fazy in viewDidLoad?
Nandish A

1
ok jeśli ustawisz widok nagłówka w źródle tabel wydaje się działać, upewnij się, że ustawiłeś również wysokość: przykład:public override UIView GetViewForHeader(UITableView tableView, nint section) { return headerView; } public override nfloat GetHeightForHeader(UITableView tableView, nint section) { return headerView.Frame.Height; }
panthor314

193

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. Wyświetl hierarchię w programie Interface Builder


12
Wolę tę odpowiedź, ponieważ po co pisać kod, skoro mogę go starannie ustawić i ustawić w IB
Besi

1
super dzięki za podpowiedź. BTW, nie potrzebujesz widoku przewijania w nagłówku na wypadek, gdyby ktoś inny się nad tym zastanawiał lub próbował. Używa ScrollView UITableView jako nagłówka, ponieważ nagłówek jest technicznie częścią UITableView
Rob R.

2
Warto teraz wspomnieć, jak to działa w edytorze StoryBoard: stackoverflow.com/q/7841167/926907
Dmitry Zaytsev

Nie używaj do tego stalówki. Ładowanie trwa dłużej. Napisz to w kodzie. Aby umożliwić ponowne użycie, utwórz niestandardową klasę i utwórz instancję ...
Charles Robertson

1
Nie pozwala mi dodać ograniczenia wysokości do widoku nagłówka.
Ian Warburton,

14

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
}

Użycie tego podejścia w systemie iOS 7 lub nowszym spowoduje wyświetlenie ostrzeżenia w czasie wykonywania: „brak ścieżki indeksu do ponownego wykorzystania komórki tabeli”. Aby uniknąć tego błędu,
odsyłaj do

11

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

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

}

Nie zrozumiałeś swojego pytania?
Priyam,

2
To jest źle. Chce tylko jednego nagłówka tabeli, NIE nagłówka sekcji. Te dwie rzeczy są bardzo różne. Przeczytaj pytanie.
Charles Robertson
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.