agregando color y transparencia de desvanecimiento a UIView

Sé cómo crear y animar una vista como la que aparece en la vista de sub compartimento de la nueva aplicación de la tienda de aplicaciones que viene con iOS 6+ (vea la captura de pantalla adjunta), pero no sé cómo agregar ese agradable efecto de coloreado con la transparencia en esta vista ¿Alguien puede proporcionar una muestra de código para hacer una vista de UIView exactamente la de la captura de pantalla?

PS la propiedad alpha solo de UIView no hace tal cosa.

introduzca la descripción de la imagen aquí

Puede agregar este método a una categoría UIView y reutilizarla según sea necesario. Aplica un gradiente negro lineal de "theColor" a transparente a la vista dada.

Debería tener QuartzCore.framework en su proyecto para usar el object CAGradientLayer.

 + (void)addLinearGradientToView:(UIView *)theView withColor:(UIColor *)theColor transparentToOpaque:(BOOL)transparentToOpaque { CAGradientLayer *gradient = [CAGradientLayer layer]; //the gradient layer must be positioned at the origin of the view CGRect gradientFrame = theView.frame; gradientFrame.origin.x = 0; gradientFrame.origin.y = 0; gradient.frame = gradientFrame; //build the colors array for the gradient NSArray *colors = [NSArray arrayWithObjects: (id)[theColor CGColor], (id)[[theColor colorWithAlphaComponent:0.9f] CGColor], (id)[[theColor colorWithAlphaComponent:0.6f] CGColor], (id)[[theColor colorWithAlphaComponent:0.4f] CGColor], (id)[[theColor colorWithAlphaComponent:0.3f] CGColor], (id)[[theColor colorWithAlphaComponent:0.1f] CGColor], (id)[[UIColor clearColor] CGColor], nil]; //reverse the color array if needed if(transparentToOpaque) { colors = [[colors reverseObjectEnumerator] allObjects]; } //apply the colors and the gradient to the view gradient.colors = colors; [theView.layer insertSublayer:gradient atIndex:0]; } 

Tenga en count que debe tener el backgroundColor de theView establecido en clearColor para que no interfiera con el gradiente. Además, para los resultados que se muestran en la captura de pantalla, el indicador transparente ToOpaque debe ser SÍ.

Aquí está la solución de Pedro Silvara traducida a Swift si alguien la necesita (agregó también la opción vertical)

 class func addLinearGradientToView(view: UIView, colour: UIColor, transparntToOpaque: Bool, vertical: Bool) { let gradient = CAGradientLayer() let gradientFrame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height) gradient.frame = gradientFrame var colours = [ colour.CGColor, colour.colorWithAlphaComponent(0.9).CGColor, colour.colorWithAlphaComponent(0.8).CGColor, colour.colorWithAlphaComponent(0.7).CGColor, colour.colorWithAlphaComponent(0.6).CGColor, colour.colorWithAlphaComponent(0.5).CGColor, colour.colorWithAlphaComponent(0.4).CGColor, colour.colorWithAlphaComponent(0.3).CGColor, colour.colorWithAlphaComponent(0.2).CGColor, colour.colorWithAlphaComponent(0.1).CGColor, UIColor.clearColor().CGColor ] if transparntToOpaque == true { colours = colours.reverse() } if vertical == true { gradient.startPoint = CGPointMake(0, 0.5) gradient.endPoint = CGPointMake(1, 0.5) } gradient.colors = colours view.layer.insertSublayer(gradient, atIndex: 0) } 
 CAGradientLayer *layer = [CAGradientLayer layer]; layer.frame = yourView.bounds; UIColor *blackColor = [UIColor colorWithWhite:0.42f alpha:1.0f]; UIColor *clearColor = [UIColor colorWithWhite:0.42f alpha:0.0f]; layer.colors = [NSArray arrayWithObjects:(id)clearColor.CGColor, (id)blackColor.CGColor, nil]; [myView.layer insertSublayer:layer atIndex:0]; 

Donde la layer es la capa de su vista.

Simplemente puede usar un png semi transparente como background para get el efecto de esta manera. Asegúrate de configurar el opaque de UIView a NO y estarás bien.

No se necesita magia para lograr este efecto. Deberías hacerlo como lo hace Apple. UIImageViews con imágenes pequeñas y estiradas.

Esta vista (el cuadrado de mitad inferior que incluye los icons) usa una image que se estira y produce este efecto.

También debes seguir este método. Sus puntos de vista serán muy claros y le costará algunas testings en Photoshop para lograr el efecto correcto.

Como ya he notado, Apple nunca usa capas de gradiente en el iPhone. Debe ser significativamente más consumo de GPU porque habría ahorrado muchas imágenes …

Aquí hay una image similar para probar. introduzca la descripción de la imagen aquí

Espero eso ayude.

Solo necesita establecer el valor alfa del color de background de la vista en el valor deseado.

Ver el código postal adjunto. Vaya al file de nib de AlphaViewController y véalo allí

Solo he establecido el valor alfa para la subvista al 70%. Puedes hacerlo de acuerdo a tus requisitos.

En caso de que alguien necesite Swift 3.X

 func addLinearGradientToView(view: UIView, colour: UIColor, transparntToOpaque: Bool, vertical: Bool) { let gradient = CAGradientLayer() let gradientFrame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height) gradient.frame = gradientFrame var colours = [ colour.cgColor, colour.withAlphaComponent(0.9).cgColor, colour.withAlphaComponent(0.8).cgColor, colour.withAlphaComponent(0.7).cgColor, colour.withAlphaComponent(0.6).cgColor, colour.withAlphaComponent(0.5).cgColor, colour.withAlphaComponent(0.4).cgColor, colour.withAlphaComponent(0.3).cgColor, colour.withAlphaComponent(0.2).cgColor, colour.withAlphaComponent(0.1).cgColor, UIColor.clear.cgColor ] if transparntToOpaque == true { colours = colours.reversed() } if vertical == true { gradient.startPoint = CGPoint(x: 0, y: 0.5) gradient.endPoint = CGPoint(x: 0, y: 0.5) } gradient.colors = colours view.layer.insertSublayer(gradient, at: 0) } 

Otra forma en Swift 3.x

 let gradient = CAGradientLayer() gradient.frame = view.bounds gradient.colors = [UIColor.blue.cgColor, UIColor.white.cgColor] view.layer.insertSublayer(gradient, at: 0)