UITableView cabecera personalizada (como Foodspotting aplicación)

enter image description here UITableView cabecera personalizada (como Foodspotting aplicación)

Podría alguien explicar cómo esta aplicación (Foodspotting), crea su cabecera sección personalizada? Tiene un fondo negro translúcido, una imagen del usuario y un texto agradable (sin embargo, cargado desde un servidor). Mis 2 grandes preguntas aquí son:

1. ¿Cómo obtiene la aplicación la agradable translucidez negra en el encabezado de la sección? 2. ¿Cómo obtienen esa pequeña flecha triangular unida al encabezado?

Puedo descifrar casi todo lo demás en base al uso de una vista personalizada para el encabezado de sección.

Fuente

2012-04-24 Apollo

El Section header is a UIView como cualquier otro. Puede crearlo tan bello, complejo o elaborado como desee, utilizando Interface Builder si lo desea, etc. El delegado de su mesa tableView:viewForheaderInSection es responsable de devolverlo, al igual que para otras filas de celdas.

En cuanto al pequeño triángulo: sí, esto nos echó un poco (queríamos algo similar en nuestra aplicación) hasta que descubrimos que puede superponerse a la vista con la fila "mintiendo" sobre su altura: es decir tableView:heightForHeaderInSection: devoluciones un valor levemente menor de lo que realmente es. Puede que no sea la manera "correcta", pero funcionó muy bien para nosotros. De esta manera:

enter image description here

Así que la cabecera es en realidad un rectángulo perfecto, sobre todo ver a través de la parte inferior, con un pequeño triángulo "asomándose" fuera:

enter image description here

Dile IOS que el encabezado es 80px alto, como este:

- (CGFloat) tableView:(UITableView *) tableView 
    heightForHeaderInSection:(NSInteger) section { 
    return 80; 
    }

y comenzará a dibujar la fila "comida" a 80px. Debido a que los encabezados están en la parte superior, y debido a que la mayoría del fondo del encabezado es transparente, excepto por la flecha, debe obtener este efecto.

Fuente

2012-04-24 23:58:15 ckhan

Entiendo completamente su respuesta Q1, pero ¿podría completar su respuesta a la pregunta del triángulo pequeño? Realmente no entiendo cómo las vistas superpuestas te darán un triángulo ... gracias – Apollo

El encabezado de la sección es básicamente solo una vista, por lo que puedes dibujar lo que tu corazón desee, incluidos los triángulos. Puedes ponerte difícil y dibujar con Quartz 2D (drawRect :) o simplemente hacer un triángulo en Photoshop, y agregar un UIImage a la vista de encabezado entre todas las demás cosas, como etiquetas, más imágenes, etc. – runmad

@ derek.lo Probablemente sea solo el botón de retroceso estándar, pero con un color diferente. Compáralo con otros botones de retroceso. – ThomasW

Logré el resultado deseado de una manera diferente. En lugar de utilizar tableView:viewForheaderInSection: (que no funciona para mí), añadí una vista de imagen que contiene la imagen como una flecha subvista de la vista, y se indica la estructura para ser justo debajo de la cabecera:

// Inside HeaderView.m 

UIImageView *arrowImageView = [[UIImageView alloc] initWithImage:self.arrowImage]; 
arrowImageView.frame = CGRectMake(arrowX, frame.size.height, self.arrowImage.size.width, self.arrowImage.size.height); 
[self addSubview:arrowImageView]; 
[arrowImageView release];

Si observa de cerca, hay dos archivos (following-captionbubble-dark.png y [email protected]) en Foodspotting.app que se ven exactamente como la flecha que se muestra arriba en la pregunta. Así que supongo que podrían haber usado una técnica similar. Felicitaciones al equipo de Foodspotting.

Fuente

2012-05-04 13:16:28 dyang

UITableView cabecera personalizada (como Foodspotting aplicación)

Respuesta

Cuestiones relacionadas