2012-04-17 10 views
6

È molto facile mettere un bordo semplice su un UIView. È sufficiente collegare al QuartzCore, importarlo, e utilizzare:Come impostare un bordo sfumato su UIView?

self.view.layer.borderColor = [UIColor redColor].CGColor; 
self.view.layer.borderWidth = 2.0f; 

La mia domanda è ... C'è un modo per rendere utilizzare questo confine un gradiente. So come applicare una maschera gradiente all'intera vista, ma non solo al suo bordo. Presumo che ciò potrebbe comportare una visualizzazione personalizzata e il disegno CoreGraphics all'interno di drawRect:, ma non sono sicuro da dove iniziare.

risposta

5

Non sono del tutto sicuro di cosa intendi per "gradiente". Dal momento che hai detto che hai utilizzato la grafica principale per applicare una sfumatura a una forma, suppongo che intendi questo (e non l'ombra a cui la precedente risposta si riferisce).

Non è possibile applicare una sfumatura a un bordo. Tuttavia, puoi creare il tuo bordo usando una forma personalizzata. Il modo più semplice per farlo è creare due percorsi, un percorso esterno e un percorso interno. Per semplicità, supponiamo che il percorso è un semplice rettangolo (il rettangolo proposta in drawRect):

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect]; 

Il secondo percorso sarà un percorso interno inferiore rispetto alla prima (sufficiente per fare un bordo) :

//To create a 1.0f borderWidth 
CGRect innerRect = rect; 
innerRect.origin.x += 1.0f; 
innerRect.origin.y += 1.0f; 
innerRect.size.width -= 2.0f; 
innerRect.size.height -= 2.0f; 
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRect:innerRect]; 

Ora, aggiungere il percorso interno al percorso normale e verificare che il percorso utilizza l'evenOddFillRule. EvenOddFillRule dirà alla grafica principale di riempire solo la parte esterna, lasciando la parte interna da sola. Oh, e si vorrà ritagliare al percorso:

[path appendPath:innerPath]; 
path.usesEvenOddFillRule = YES; 
[path addClip]; 

Se si applica una sfumatura a questa forma, si riempirà di fuori del percorso interiore e all'interno del percorso esterno, rendendo un bordo con una sfumatura.

UPDATE

Se ci si rivolge iOS 5.0 ci può essere modo migliore per farlo. Ho scoperto una straordinaria nuova funzione di percorso chiamata CGPathCreateCopyByStrokingPath(). Vedi il link per i dettagli, ma fondamentalmente crea un nuovo percorso che è lo stoke (s) dell'originale, in modo che se si riempie il nuovo percorso, si creerebbe la stessa immagine che accarezza il vecchio percorso. Questo è fantastico perché, invece di riempire il nuovo percorso, puoi agganciarlo e quindi riempirlo con un gradiente, dandoti un bordo sfumato. Questo è molto più semplice del precedente metodo che ho menzionato, ma ovviamente è disponibile solo su iOS 5.0. Ciò renderà molto più semplice la creazione di nuove forme complesse.

+0

Grazie. La piena implementazione può essere trovata su https://gist.github.com/2423583. Nota questo disegna un bordo interno, che può essere problematico se altre viste si trovano su di esso. – shawnwall

+0

@shawnwall Ho aggiornato la mia risposta. Se stai usando iOS 5.0, c'è un modo più semplice per creare bordi sfumati. –

0

Ho creato un secondo livello sfumatura con i colori invertiti nell'array, quindi ho reso il fotogramma del secondo strato leggermente più piccolo del primo livello. Crea l'aspetto di un bordo.