2009-06-23 4 views
39

Un sacco di applicazioni pop-up una vista trasparente con angoli arrotondati e un activityIndicator quando si esegue un'operazione che richiede tempo.In che modo una vista retta arrotondata con trasparenza viene eseguita su iphone?

Come è stato fatto questo arrotondamento ed è possibile farlo usando Interface Builder (visto che ci sono molti posti in cui mi piacerebbe usare qualcosa del genere)? Oppure, dovrei usare un'immagine con un rect arrotondato o un'immagine estensibile? Devo disegnare lo sfondo da solo?

Finora, sono riuscito a ottenere una visualizzazione di base con trasparenza simile impostando alphaValue in Interface Builder, tuttavia non ha angoli arrotondati, e anche la trasparenza sembra applicarsi a tutte le sottoview (non voglio il testo e l'indicatore di attività devono essere trasparenti, tuttavia anche se imposto l'alphaValue su quelli in IB sembra essere ignorato).

risposta

47
view.layer.cornerRadius = radius; 

Il modo più duro (che ha usato essere richiesto nel primo iPhone SDK) è quello di creare il proprio UIView sottoclasse con drawRect: metodo:

CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextSetRGBFillColor(context, 0,0,0,0.75); 

CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius); 
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius); 
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
       radius, M_PI, M_PI/2, 1); //STS fixed 
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
         rect.origin.y + rect.size.height); 
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
       rect.origin.y + rect.size.height - radius, radius, M_PI/2, 0.0f, 1); 
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius); 
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
       radius, 0.0f, -M_PI/2, 1); 
CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y); 
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
       -M_PI/2, M_PI, 1); 

CGContextFillPath(context); 

Nota: rect in questo codice dovrebbe essere preso da [self bounds] (o in qualsiasi altro percorso si desideri), non ha senso con rect passato al metodo drawRect:.

+0

grazie! lo proverò – frankodwyer

+0

Continuo a impostare trasparenza e bg color ecc tramite IB e come posso interrompere l'alpha che si applica alle subviews (text/activityIndicator)? Almeno penso che sia quello che succede - sia il testo che lo spinner sembrano molto anemici/grigi, come lo sfondo che sta attraversando il testo bianco. – frankodwyer

+0

Imposta lo sfondo trasparente in IB e utilizza il colore di riempimento semitrasparente nel codice. Ho aggiornato la risposta. – Kornel

7

Secondo lei fare questo nel metodo drawRect

float radius = 5.0f; 

CGRect rect = self.bounds; 
CGContextRef context = UIGraphicsGetCurrentContext(); 
rect = CGRectInset(rect, 1.0f, 1.0f); 

CGContextBeginPath(context); 
CGContextSetGrayFillColor(context, 0.5, 0.7); 
CGContextMoveToPoint(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect)); 
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMinY(rect) + radius, radius, 3 * M_PI/2, 0, 0); 
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMaxY(rect) - radius, radius, 0, M_PI/2, 0); 
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMaxY(rect) - radius, radius, M_PI/2, M_PI, 0); 
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect) + radius, radius, M_PI, 3 * M_PI/2, 0); 

CGContextClosePath(context); 
CGContextFillPath(context); 

Questo renderà il vostro rettangolo arrotondato per la visualizzazione. È possibile trovare un esempio completo nell'esempio HeadsUpUI fornito con SDK. HTH

79

A partire da iPhone SDK 3.0, è possibile utilizzare semplicemente la proprietà cornerRadius del livello. Ad esempio:

view.layer.cornerRadius = 10.0; 

Sulla stessa linea, è possibile modificare il colore del bordo della vista e larghezza:

view.layer.borderColor = [[UIColor grayColor] CGColor]; 
view.layer.borderWidth = 1; 
+0

qualsiasi idea di come ottenere un margine tra il bordo e il contenuto in UILabel? – dlinsin

+0

Non sono a conoscenza di alcun modo per farlo. Con un UIButton, dovresti essere in grado di usare la proprietà contentEdgeInsets, ma UILabel non sembra avere nulla di simile. Forse basta creare un UIView con bordi e angoli arrotondati, quindi aggiungere la tua UILabel come sottoview, leggermente inserita. –

+0

Che funziona come un fascino, grazie! – dlinsin

8

ho Sottratto la risposta di @ lostInTransit in questa funzione:

static void ContextAddRoundedRect(CGContextRef c, CGRect rect, CGFloat radius) { 
    CGFloat minX = CGRectGetMinX(rect); 
    CGFloat maxX = CGRectGetMaxX(rect); 
    CGFloat minY = CGRectGetMinY(rect); 
    CGFloat maxY = CGRectGetMaxY(rect); 

    CGContextMoveToPoint(c, minX + radius, minY); 
    CGContextAddArcToPoint(c, maxX, minY, maxX, minY + radius, radius); 
    CGContextAddArcToPoint(c, maxX, maxY, maxX - radius, maxY, radius); 
    CGContextAddArcToPoint(c, minX, maxY, minX, maxY - radius, radius); 
    CGContextAddArcToPoint(c, minX, minY, minX + radius, minY, radius); 
} 

che pone il percorso sul contesto per voi di fare con come si può

leggermente diverse CoreGraphics chiamate e non ho chiuso la strada, nel caso in cui si desidera aggiungere che

CGContextFillPath(c); 
+0

+1. Solo per le mie note, chiudi il percorso usando 'CGContextFillPath (c);' oppure 'CGContextStrokePath (c) '. È possibile inserirli in una funzione di chiamata e quindi chiamare 'ContextAddRoundedRect' due volte per ottenere il profilo e il riempimento. Qualcosa come questo 'static void ContextAddRoundedRectWithOutline (CGContextRef c, CGRect rect, CGFloat radius, UIColor * outline, UIColor * fill)' –

Problemi correlati