2010-07-18 12 views
7

Me gustaría crear un fondo degradable UITableViewCell como la aplicación Clock predeterminada que viene en el iPhone. No estoy exactamente seguro de cómo lograr eso. Cómo puedo crear una imagen y la puse:Cómo configurar un fondo de gradiente UITableViewCell?

cell.contentView.backgroundColor = [UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"background.png"]]; 

o hay otra/mejor enfoque?

+0

Creo que esta es la única forma – tadejsv

+1

¿Qué pasa si mi altura no es del mismo tamaño?¿Cómo creo mi gráfico de fondo? –

Respuesta

13

he encontrado la respuesta a esta pregunta ya existente, pero no estaba satisfecho. Aquí hay un enfoque alternativo que requiere menos código, no requiere anular ningún método y se puede aplicar a cualquier vista. La idea es agregar un CAGradientLayer como una subcapa a la capa UIView. No pude encontrar este enfoque documentado en cualquier lugar, así que quería compartir.

Añadir un CAGradientLayer a cualquier UIView de la siguiente manera:

Categoría de cabecera UIView - UIView + Gradient.h:

#import <UIKit/UIKit.h> 

@interface UIView (Gradient) 
-(void) addLinearUniformGradient:(NSArray *)stopColors; 
@end 

Categoría de UIView aplicación UIView + Gradient.m:

#import "UIView+Gradient.h" 
#import <QuartzCore/QuartzCore.h> 

@implementation UIView (Gradient) 

-(void) addLinearUniformGradient:(NSArray *)stopColors 
{ 
    CAGradientLayer *gradient = [CAGradientLayer layer]; 
    gradient.frame = self.bounds; 
    gradient.colors = stopColors; 
    gradient.startPoint = CGPointMake(0.5f, 0.0f); 
    gradient.endPoint = CGPointMake(0.5f, 1.0f);  
    [self.layer addSublayer:gradient]; 
} 

@end 

Cómo configurar el degradado en un backgroundView de UITableViewCell después de la creación ting la UITableViewCell:

// Set the gradient for the cell's background 
CGRect backgroundViewFrame = cell.contentView.frame; 
backgroundViewFrame.size.height = yourCellHeight; 
cell.backgroundView = [[UIView alloc] initWithFrame:backgroundViewFrame]; 
[cell.backgroundView addLinearUniformGradient:[NSArray arrayWithObjects: 
               (id)[[UIColor redColor] CGColor], 
               (id)[[UIColor greenColor] CGColor], nil]]; 

Este ejemplo sólo mostró cómo configurar un simple gradiente de dos paradas (con separación uniforme). Un vistazo rápido a la documentación CAGradientLayer le mostrará cómo configurar gradientes más complejos.

(* EDITAR PARA INFORMACIÓN ADICIONAL IMPORTANTE *)

Una cosa adicional a tener en cuenta es que si va a añadir la capa de degradación en un método como tableView: cellForRowAtIndexPath, los UITableViewCells están en el bienestar general reutilizado (es decir, [tableView dequeueReusableCellWithIdentifier: @ "foo"]). Debido a que las celdas se están reutilizando, si siempre agrega una capa de degradado a una celda de vista de tabla cada vez que la celda se quita de la cola, puede terminar agregando varias capas de degradado a la celda de vista de tabla a lo largo de la vida útil de la celda. Esto puede ser una fuente de rendimiento reducido. Este problema puede ocurrir sin ningún cambio en los resultados visibles, por lo que puede ser difícil de detectar/observar. Hay algunas formas de resolver esto, pero una cosa que puede considerar es modificar el código original anterior además de agregar CAGradientLayer, para devolver el CAGradientLayer creado al llamador. Entonces es bastante simple para escribir otro método categoría que permite a la capa de gradiente se borra si en realidad está contenida en la vista:

-(BOOL) removeGradient:(CAGradientLayer *)gradientLayer 
{ 
    // Search for gradient layer and remove it 
    NSArray *layers = [self.layer sublayers]; 
    for (id layer in layers) { 
     if (layer == gradientLayer) { 
      [gradientLayer removeFromSuperlayer]; 
      return YES; 
     } 
    } 

    // Failed to find the gradient layer in this view 
    return NO; 
} 

Extracción de la pendiente no es necesario para todos los casos de uso, pero si su caso de uso resultados en la reutilización de la celda, es posible que desee considerar la eliminación del degradado. Un lugar para considerar llamar a este método es del método prepareForReuse de UITableViewCell.

Disculpe que mi solución original no solucionó este problema. Pero como es algo que puede ser bastante sutil, quería actualizar mi respuesta con esta información adicional.

+0

Intenté aplicarlo a una celda agrupada pero el relleno de degradado es una caja sin esquina redondeada. ¿Me he perdido algo? – Claus

+0

Hmm, es posible que necesite establecer el radio/máscara de la capa. Lea los documentos sobre los dos métodos siguientes: [self.layer setCornerRadius: 10.0]; [self.layer setMasksToBounds: YES]; Espero que eso lo apunte en la dirección correcta. – Chris

Cuestiones relacionadas