2010-07-18 10 views
7

Mi piacerebbe creare uno sfondo UITableViewCell gradiente come l'app Clock predefinita che viene fornita su iPhone. Non sono esattamente sicuro di come farlo. Devo creare un'immagine e impostarla:Come impostare uno sfondo sfumato UITableViewCell?

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

oppure esiste un altro/approccio migliore?

+0

Penso che questo sia l'unico modo – tadejsv

+1

E se la mia altezza non è uguale?Come posso creare il mio grafico di sfondo? –

risposta

13

ho trovato la risposta a questa domanda esistente, ma non era soddisfatto. Ecco un approccio alternativo che richiede meno codice, non richiede l'override di alcun metodo e può essere applicato a qualsiasi vista. L'idea è di aggiungere uno CAGradientLayer come sottolivello al livello di UIView. Non ho potuto trovare questo approccio documentato ovunque, quindi ho voluto condividere.

Aggiungi un CAGradientLayer a qualsiasi UIView come segue:

Categoria sul UIView intestazione - UIView + Gradient.h:

#import <UIKit/UIKit.h> 

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

Categoria sul UIView implementazione 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 

Come impostare la sfumatura sullo sfondo di UITableViewCellVisualizzazione dopo la creazione ting il 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]]; 

Questo esempio mostrato solo come impostare una semplice sfumatura a due stop (con spaziatura uniforme). Una rapida occhiata alla documentazione di CAGradientLayer ti mostrerà come impostare gradienti più complessi.

(* MODIFICA PER ULTERIORI INFORMAZIONI IMPORTANTI *)

Una cosa aggiuntiva da tenere a mente è che se si sta aggiungendo il livello sfumatura in un metodo come tableView: cellForRowAtIndexPath, i UITableViewCells sono in genere essere riutilizzato (cioè [tableView dequeueReusableCellWithIdentifier: @ "foo"]). Poiché le celle vengono riutilizzate, se si aggiunge sempre un livello sfumatura a una cella di visualizzazione tabella ogni volta che la cella viene rimossa dalla coda, si potrebbe finire per aggiungere diversi livelli sfumatura alla cella tableview nel corso della durata della cella. Questo può essere una fonte di prestazioni ridotte. Questo problema può verificarsi senza alcun cambiamento nei risultati visibili, quindi può essere difficile da rilevare/osservare. Ci sono alcuni modi per risolvere questo problema, ma una cosa che potresti prendere in considerazione è la modifica del codice originale sopra in aggiunta all'aggiunta di CAGradientLayer, per restituire il CAGradientLayer creato al chiamante. Allora è abbastanza semplice scrivere un altro metodo categoria che permette lo strato gradiente da rimuovere se è effettivamente contenuto nella 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; 
} 

Rimozione del gradiente non sono richiesti per tutti i casi d'uso, ma se il caso d'uso risultati nel riutilizzo delle celle, potresti prendere in considerazione la rimozione del gradiente. Un luogo da considerare per chiamare questo metodo è dal metodo prepareForReuse di UITableViewCell.

Mi scuso per il fatto che la mia soluzione originale non ha risolto questo problema. Ma dal momento che è qualcosa che può essere abbastanza sottile, ho voluto aggiornare la mia risposta con queste informazioni aggiuntive.

+0

Ho provato ad applicarlo a una cella raggruppata ma il riempimento sfumato è una casella senza angolo arrotondato. Ho dimenticato qualcosa? – Claus

+0

Hmm, potrebbe essere necessario impostare il raggio del livello/maschera. Leggi i documenti sui seguenti due metodi: [self.layer setCornerRadius: 10.0]; [self.layer setMasksToBounds: YES]; Speriamo che questo ti porti nella giusta direzione. – Chris

Problemi correlati