web-dev-qa-db-fra.com

Ajouter iOS UITableView HeaderView (pas l'en-tête de section)

Je veux ajouter un en-tête de tableau (pas d'en-têtes de section) comme dans l'application Contacts, par exemple: enter image description here

exactement comme ça - une étiquette à côté d'une image au-dessus de la table.

Je veux que la vue globale soit déroulable afin que je ne puisse pas les placer en dehors de la table.

Comment puis je faire ça?

iphoneiosuitableview
165
Assaf b

UITableView a une propriété tableHeaderView. Réglez cela sur la vue que vous voulez là-haut.

Utilisez un nouveau UIView comme conteneur, ajoutez une étiquette de texte et une vue d'image à ce nouveau UIView, puis définissez tableHeaderView sur la nouvelle vue.

Par exemple, dans un 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];
     // ...
}
244
peterjb

Vous pouvez le faire assez facilement dans Interface Builder. Créez simplement une vue avec une table et déposez une autre vue sur la table. Cela deviendra la vue en-tête de la table. Ajoutez vos étiquettes et votre image à cette vue. Voir l'image ci-dessous pour la hiérarchie des vues. View Hierarchy in Interface Builder

191
Kirby Todd

Dans 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
}
12
King-Wizard

Vous pouvez également simplement créer UNIQUEMENT un UIView dans le générateur Interface et glisser-déposer ImageView et UILabel (pour lui donner l’en-tête souhaité), puis l’utiliser.

Une fois que votre UIView ressemble à votre guise, vous pouvez l'initialiser par programme à partir du fichier XIB et l'ajouter à votre UITableView. En d'autres termes, vous n'avez pas à concevoir la table ENTIÈRE dans IB. Juste l'en-tête (de cette façon, la vue en-tête peut également être réutilisée dans d'autres tables)

Par exemple, j'ai un UIView personnalisé pour l'un de mes en-têtes de table. La vue est gérée par un fichier xib appelé "CustomHeaderView" et elle est chargée dans l'en-tête de la table à l'aide du code suivant de ma sous-classe 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;
}
11
iansari