web-dev-qa-db-fra.com

iPhone UITableView avec une zone d'en-tête

J'ai une vue qui a été créée avec tous les éléments par défaut UITableView, mais je dois maintenant ajouter une zone d'en-tête au-dessus de la UITableView (de sorte que la UITableView défile normalement, mais le haut ou le haut de l'écran, ou presque, aura un en-tête statique contenu). Je ne vois pas où je peux redimensionner la UITableView dans IB, et je ne sais pas comment faire.

Est-ce que quelqu'un sait?

38
Dan Brown

Pourquoi n'utilisez-vous pas l'en-tête fourni par UITableView?. Comme suit:

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

{
     return @"My Title";
}

De plus, vous pouvez redimensionner votre vue tableau dans IB en faisant glisser les bordures.

46
Oscar Gomez

Vous pouvez utiliser les méthodes UITableViewDelegate pour créer une vue d'en-tête personnalisée pour une table et spécifier la hauteur, à savoir tableView:viewForHeaderInSection: et tableView:heightForHeaderInSection:. Vous pouvez ajouter ce que vous voulez à la vue. Voici un exemple qui ajoute une UILabel alignée à droite: 

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

    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,tableView.frame.size.width,30)];

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

    headerLabel.textAlignment = NSTextAlignmentRight;
    headerLabel.text = [titleArray objectAtIndex:section];
    headerLabel.backgroundColor = [UIColor clearColor];

    [headerView addSubview:headerLabel];

    return headerView;

}

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {

    return  30.0;
}
57
noodl_es

Lorsque vous ajoutez une UIView ou l'une de ses sous-classes à la UITableView en utilisant IB (faites simplement glisser un UIView et déposez-le sur la partie UPPER de UITableView de la vôtre), il ajoute automatiquement ce composant UIView et en fait le composant "tableHeader". 

Chaque UITableView a un tableHeader et un tableFooter réservé ... 

De cette façon, la nouvelle vue ferait partie de UITable et défilerait avec elle ou apparait/disparaissait ou quoi que vous fassiez pour la table. Vous pouvez modifier sa propriété masquée si vous avez besoin d'un comportement conditionnel. 

D'un autre côté, si vous voulez que la vue en-tête reste en place, il est préférable de réduire la taille du tableau et de placer l'en-tête au-dessus de celui-ci, comme suggéré dans d'autres réponses ...

16
lithium

J'ai finalement résolu ce problème correctement sans changer la classe de base. La seule solution pour ajouter la vue au contrôleur de navigation parent est Nice, mais les transitions semblent horribles. 

La solution est en fait facile. L'astuce consiste à créer un setter et un getter personnalisés pour la propriété self.tableView. Ensuite, dans loadView, vous remplacez la vue par une nouvelle UIView et vous y ajoutez la tableView. Ensuite, vous êtes libre d'ajouter des sous-vues autour de la tableView. Voici comment c'est fait:

En en-tête:

@interface CustomTableViewController : UITableViewController
{
    UITableView *tableView;
} 

Dans M:

- (UITableView*)tableView
{
    return tableView;
}

- (void)setTableView:(UITableView *)newTableView
{
    if ( newTableView != tableView )
    {
        [tableView release];
        tableView = [newTableView retain];
    }        
}

- (void)loadView {
    [super loadView];
    //save current tableview, then replace view with a regular uiview
    self.tableView = (UITableView*)self.view;
    self.view = [[UIView alloc] initWithFrame:self.tableView.frame];
    [self.view addSubview:self.tableView];    

    //code below adds some custom stuff above the table
    UIView *customHeader = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 20)];
    customHeader.backgroundColor = [UIColor redColor];
    [self.view addSubview:customHeader];
    [customHeader release];

    self.tableView.frame = CGRectMake(0, customHeader.frame.size.height, self.view.frame.size.width, self.view.frame.size.height - customHeader.frame.size.height);
}

- (void)viewDidUnload
{
    self.tableView = nil;
    [super viewDidUnload];
}

Prendre plaisir! 

6
Steve Potter

Vous devrez incorporer la UITableView dans une UIView avec une autre vue (à laquelle vous vous référez comme section d'en-tête).

Donc, la UIView aura 2 sous-vues. La vue en-tête suivie par la vue tableau.

  • UIView (parent)
    • UIView (en-tête)
    • UITableView (table)

J'espère que cela t'aides.

3
Mihir Mathuria

Supposons avoir votre UITableViewController

@interface MXMTableViewController : UITableViewController <UITableViewDelegate,UIScrollViewDelegate> {
/// your table view interface here
}

et un xib avec votre UITableView simple défini, vous pouvez faire ce que dit Mihir en remplaçant la méthode loadView comme ceci:

- (void)loadView {

    [super loadView];

    UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];

    self.view = mainView;

    [mainView release];

    // Add Header View
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 36)];
    headerView.backgroundColor = [UIColor redColor];
    [self.view addSubview:headerView];

    // now, move your table view down. Check you nib to choose 
    // the right Y-axis offset
    CGRect f = tableView.frame;
    f.Origin.y += headerView.frame.size.height/2;
    tableView.frame = f;

    // Add the table view to the container view
    [self.view addSubview:self.tableView];

    // Add footer
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, self.tableView.frame.size.height, 320, 125)];
    footerView.backgroundColor = [UIColor redColor];
    [self.view addSubview:footerView];
    [footerView release];

    [headerView release];

}

...et c'est tout. Vous avez une UITableView avec en-tête et pied de page fixes.

PS. Vous pouvez maintenant utiliser vos vues personnalisées xib comme vues d'en-tête et de pied de page.

0
loretoparisi

J'ai trouvé une solution chez iphonedevsdk

Au lieu de faire ceci:

[tableViewController.view addSubview:viewSubclass];

fais ça

[tableViewController.navigationController.view addSubview:viewSubclass];

J'aime la réponse de noodl_es (upvoted), car elle fournit la fonctionnalité et le comportement que vous souhaitez, mais vous n'avez pas à vous soucier du redimensionnement de UITableView: celui-ci est géré automatiquement. Cependant, la solution ne convient mieux que si les informations d'en-tête concernent spécifiquement la première section de la table (ou si la table ne comporte qu'une seule section). Si la table a plus d'une section, l'en-tête de la deuxième section repoussera l'en-tête de la première section lors du défilement, de sorte que la vue d'en-tête ne semblera pas s'appliquer à la table entière.

0
rene