2011-11-30 14 views
5

Cuando aparece UIAlertViews, hay un efecto de viñeta en el fondo. Es decir, los bordes son más oscuros y el centro es más claro.¿Cómo hacer efecto viñeta en iOS?

vignette iOS

Me preguntaba si este efecto de la ilustración fue construida en Cocoa Touch. Me gustaría mostrar la viñeta detrás de una de mis vistas personalizadas.

+0

¡Me lo he preguntado también! La mayoría de las aplicaciones que muestran alertas personalizadas o iconos de HUD simplemente golpean una superposición negra transparente sólida que se ve realmente mal. – BoltClock

+0

Probablemente puedas hacer esto usando un recuadro box-shadow, soy un desarrollador web, así que eso es todo lo que puedo decir –

+0

@James Kyle: No es un sitio web. Es una aplicación. – JoJo

Respuesta

2

Es es integrado en UIKit (como UIAlertView es parte de UIKit), pero no es público.

Sin embargo, no debería ser demasiado difícil crear el mismo efecto. Es solo un degradado radial, que puede dibujar en código o Photoshop.

ACTUALIZACIÓN: Si necesidad sabe, el fondo es una clase llamada _UIAlertNormalizingOverlayWindow con la jerarquía de clases siguiente:

_UIAlertNormalizingOverlayWindow 
_UIAlertOverlayWindow 
UIWindow 
+0

¿No se rechazará la aplicación por el uso de material no documentado? – JoJo

+3

@JoJo: sí, lo haría. –

2

De hecho, este efecto se consigue mediante una imagen adicional - una ventana independiente con una vista de la imagen se muestra debajo de una vista de uia. Esa ventana lo hace para que no pueda seleccionar ni tocar ninguna otra vista. Si desea que la imagen se encuentre bien here

+0

Sé cómo hacerlo manualmente, pero me preguntaba si esto lo proporciona el sistema. Es como si alguien pudiera replicar UISwitch, pero no es una buena idea hacerlo, porque como viste desde el iOS 4 al 5, cambiaron el estilo de UISwitch. – JoJo

+0

Dudo que UIKit use una imagen para esto. –

+0

Te garantizo que sí, de hecho estoy 100% seguro;).Sí, no hay ninguna forma pública que conozca pero definitivamente podrías buscar métodos privados – DanZimm

1

SVProgressHud realiza este tipo de efecto, consulte el código donde se detalla SVProgressHUDMaskTypeGradient.

1

Respondo que la respuesta elegida no es correcta y es potencialmente peligrosa. Aquí está mi solución:

Copié el gradiente de dibujo de código de SVProgressHud en my fork de SSGradientView:

SSGradientView *vignette = [SSGradientView new]; 
vignette.frame = [UIScreen mainScreen].currentBounds; 
vignette.backgroundColor = [UIColor clearColor]; 
vignette.direction = SSGradientViewDirectionRadial; 
UIColor *startColor = // We just need the colorspace. 
UIColor *endColor = // Visible vignette color. 
vignette.colors = @[ 
[startColor colorWithAlphaComponent:0.0f], 
[endColor colorWithAlphaComponent:1.0f] ]; 
vignette.locations = @[ @0.4f, @1.0f ]; 
[view insertSubview:vignette atIndex:0]; // Or equivalent. 
2

Crear una clase llamada VignetteEffect como una subclase de UIView

Añadir este código a su método -drawRect::

- (void)drawRect:(CGRect)rect 
{ 

    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGColorSpaceRef colSp = CGColorSpaceCreateDeviceRGB(); 

    CGGradientRef gradient = CGGradientCreateWithColors(colSp, (__bridge CFArrayRef)[NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0] CGColor], (id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5] CGColor], nil], 0); 

    CGContextDrawRadialGradient(context, gradient, self.center, 0, self.center, self.frame.size.height+self.frame.size.height/4, 0); 

    CGColorSpaceRelease(colSp); 
    CGGradientRelease(gradient); 

} 

Ajuste los valores a su gusto.

Agrégalo a cualquier vista que tengas. Et voila. Un buen efecto de viñeta.

+0

. Esta es una buena solución, pero es lenta. Yo recomendaría ir con una imagen pretratada. –

+0

@LeoNatan Cierto, pero en términos de personalización esta es una solución más adecuada. –

+0

Una buena solución para mí. ¡Gracias! – michaelsnowden

Cuestiones relacionadas