Agregar iOS UITableView HeaderView (no encabezado de sección)


167

Quiero agregar un encabezado de tabla (no encabezados de sección) como en la aplicación de contactos, por ejemplo: ingrese la descripción de la imagen aquí

exactamente así: una etiqueta junto a una imagen arriba de la mesa.

Quiero que todas las vistas sean desplazables para que no pueda ubicarlas fuera de la tabla.

¿Cómo puedo hacer eso?

Respuestas:


245

UITableViewTiene una tableHeaderViewpropiedad. Ajústalo a la vista que quieras allí arriba.

Use un nuevo UIViewcomo contenedor, agregue una etiqueta de texto y una vista de imagen a ese nuevo UIView, luego establezca tableHeaderViewla nueva vista.

Por ejemplo, en 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];
     // ...
} 

¡Excelente! Gracias está funcionando. ¿Hay alguna propiedad de hacer que las celdas de la vista de tabla crezcan tanto como el texto dentro?
Assaf b

Para hacer eso, debe poder calcular la altura de la celda dada una cadena y pasar ese valor para heightForRowAtIndexPath. Puede usar el método sizeWithFont: restrictinedToSize: función de NSString para calcular la altura del texto cuando está restringido a un tamaño.
Mark

Agréguelo después del diseño, o su tamaño no será el deseado. Y viewDidLoad es un buen lugar.
BollMose

¿Es una buena práctica establecer la geometría de la vista durante la fase viewDidLoad?
Nandish A

1
ok, si configura la vista de encabezado en el origen de las tablas, parece funcionar, asegúrese de establecer también la altura: ejemplo:public override UIView GetViewForHeader(UITableView tableView, nint section) { return headerView; } public override nfloat GetHeightForHeader(UITableView tableView, nint section) { return headerView.Frame.Height; }
panthor314

193

Puede hacerlo bastante fácil en Interface Builder. Simplemente cree una vista con una tabla y suelte otra vista en la tabla. Esto se convertirá en la vista del encabezado de la tabla. Agregue sus etiquetas e imagen a esa vista. Vea la imagen a continuación para ver la jerarquía de vistas. Ver jerarquía en el generador de interfaces


12
Prefiero esta respuesta porque ¿por qué escribir código cuando puedo configurarlo y colocarlo en IB?
Besi

1
increíble gracias por la pista. Por cierto, no necesita una vista de desplazamiento en su encabezado en caso de que alguien más se lo preguntara o lo intentara. Utiliza el ScrollView de UITableView para su encabezado, ya que el encabezado es técnicamente una parte de UITableView
Rob R.

2
Vale la pena mencionar cómo funciona en el editor de StoryBoard ahora: stackoverflow.com/q/7841167/926907
Dmitry Zaytsev

No uses una punta para esto. Tarda más en cargar. Escríbelo en código. Para la reutilización, cree una clase personalizada e instancia ...
Charles Robertson

1
No me permitirá agregar una restricción de altura a la vista del encabezado.
Ian Warburton el

14

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

El uso de este enfoque para iOS 7 o superior activará una advertencia de tiempo de ejecución: "no se reutiliza ninguna ruta de índice para la celda de la tabla". Para evitar este error, enlace de
baskInEminence

11

También puede simplemente crear SOLO una UIView en el generador de interfaces y arrastrar y soltar ImageView y UILabel (para que se vea como el encabezado deseado) y luego usarlo.

Una vez que su UIView se vea como lo desea, también puede inicializarlo programáticamente desde el XIB y agregarlo a su UITableView. En otras palabras, no tiene que diseñar la tabla COMPLETA en IB. Solo el headerView (de esta manera, la vista del encabezado también se puede reutilizar en otras tablas)

Por ejemplo, tengo una UIView personalizada para uno de mis encabezados de tabla. La vista es administrada por un archivo xib llamado "CustomHeaderView" y se carga en el encabezado de la tabla usando el siguiente código en mi subclase 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;

}

¿No entendiste tu pregunta?
Priyam

2
Esto está mal. Solo quiere un encabezado de tabla único, NO un encabezado de sección. Las dos cosas son muy diferentes. Por favor lea la pregunta.
Charles Robertson el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.