web-dev-qa-db-fra.com

Comment créer un fond dégradé horizontal pour ma barre de navigation iOS?

Je sais comment définir une couleur d'arrière-plan de la barre de navigation (avec barTintColor), mais maintenant je travaille sur une application iOS qui appelle un dégradé horizontal (pas le dégradé vertical typique).

Comment créer une barre de navigation avec un fond dégradé horizontal?

iosobjective-cios7ios8rubymotion
19
Andrew

Si vous souhaitez définir par programme le gradient d'un UINavigationBar donné, j'ai une solution pour vous.

Configurez d'abord un CAGradientLayer avec les couleurs et les emplacements souhaités.

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = navigationBar.bounds;
gradientLayer.colors = @[ (__bridge id)[UIColor greenColor].CGColor,
                          (__bridge id)[UIColor blueColor].CGColor ];
gradientLayer.startPoint = CGPointMake(0.0, 0.5);
gradientLayer.endPoint = CGPointMake(1.0, 0.5);

Saisissez ensuite l'UImage pour ce calque.

UIGraphicsBeginImageContext(gradientLayer.bounds.size);
[gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Définissez gradientImage comme image de fond pour votre UINavigationBar.

[navigationBar setBackgroundImage:gradientImage forBarMetrics:UIBarMetricsDefault];

Solution rapide:

[![// Setup the gradient
let gradientLayer = CAGradientLayer()
gradientLayer.frame = navigationBar.bounds
gradientLayer.colors = [UIColor.green.cgColor, UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

// Render the gradient to UIImage
UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

 Set the UIImage as background property
navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)

Result

65
JulianM

Mise à jour de la réponse @JulianM pour iOS 10/Swift 3.0:

let gradientLayer = CAGradientLayer()
var updatedFrame = self.navigationController!.navigationBar.bounds
updatedFrame.size.height += 20
gradientLayer.frame = updatedFrame
gradientLayer.colors = [UIColor.green.cgColor, UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

self.navigationController!.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)
14
Makalele

Vous pouvez utiliser cela:

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"gardientImage"] forBarMetrics:UIBarMetricsDefault];

pour ios 7, la hauteur de la barre de navigation est de 64 pixels

0
Rohit suvagiya