2012-04-17 14 views
6

Es muy fácil poner un borde simple en un UIView. Basta con vincular a QuartzCore, importar, y utiliza:¿Cómo establecer un borde de degradado en UIView?

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

Mi pregunta es ... ¿Hay una manera de hacer esta frontera utilizar un gradiente. Sé cómo aplicar una máscara de degradado a toda la vista, pero no solo a su borde. Supongo que esto podría implicar una vista personalizada y el dibujo CoreGraphics dentro de drawRect:, pero no estoy seguro de por dónde empezar.

Respuesta

5

No estoy del todo seguro de lo que quiere decir con "gradiente". Como has dicho que has usado gráficos centrales para aplicar un degradado a una forma, entonces supondré que te refieres a eso (y no a la sombra a la que se refiere la respuesta anterior).

No se puede aplicar un degradado a un borde. Sin embargo, puede crear su propio borde utilizando una forma personalizada. La forma más sencilla de hacerlo es crear dos rutas, una ruta externa y una ruta interna. Por razones de simplicidad, vamos a suponer que el camino es un rect sencillo (el rect dada en drawRect):

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect]; 

El segundo camino va a ser un camino interior más pequeño que el primero (lo suficiente como para hacer un borde) :

//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]; 

Ahora, añada el camino interior a la ruta normal y asegúrese de que la ruta utiliza el evenOddFillRule. EvenOddFillRule le dirá a los gráficos centrales que solo llenen la parte exterior, dejando solo la parte interna. Oh, y usted desea recortar a la ruta:

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

Si se aplica un gradiente de esta forma, se llenará fuera del camino interior y dentro del camino exterior, haciendo un borde con un gradiente.

ACTUALIZACIÓN

Si orienta iOS 5.0 que puede haber una mejor manera de hacer esto. Descubrí una nueva y notable función de ruta llamada CGPathCreateCopyByStrokingPath(). Vea el enlace para más detalles, pero básicamente crea una nueva ruta que es el Stoke (s) del original, de modo que si llena la nueva ruta, creará la misma imagen que acariciando la ruta anterior. Esto es fantástico porque en lugar de rellenar la nueva ruta, puede recortarla y luego rellenarla con un degradado, lo que le proporciona un borde de degradado. Esto es mucho más fácil que el método anterior que mencioné, pero por supuesto, solo está disponible en iOS 5.0. Esto también hará que sea mucho más fácil crear nuevas formas complejas.

+0

Gracias. La implementación completa se puede encontrar en https://gist.github.com/2423583. Tenga en cuenta que esto dibuja un borde interno, que puede ser problemático si otras vistas se sientan en la parte superior. – shawnwall

+0

@shawnwall He actualizado mi respuesta. Si está utilizando iOS 5.0, existe una manera más fácil de crear bordes degradados. –

0

Creé una segunda capa de degradado con los colores invertidos en la matriz, y luego hice que el marco de la segunda capa sea ligeramente más pequeño que la primera capa. Crea la apariencia de un borde.

Cuestiones relacionadas