iosuitoolbaruicolortintcolorbartintcolor

Set a simple color gradient as the background of UIToolbar

I can easily change the UIToolbar background color thanks to the Bart Tint property in Interface Builder. However, I would like to use a simple, two-color vertical gradient as background.

The solution should work with any custom toolbar height, and my target is iOS 7+. If it must be done programmatically, both Objective-C and Swift are welcome.

Edit: based on the answers I'm doing this in viewDidLoad, but it makes no effect:

var gradient = CAGradientLayer()
gradient.frame = toolbar.bounds
gradient.colors = [UIColor.redColor(), UIColor.greenColor()]
toolbar.layer.insertSublayer(gradient, atIndex: 0)

Edit 2: based on the answers, I replaced the following line, but it still makes no effect:

gradient.colors = [UIColor.redColor().CGColor, UIColor.greenColor().CGColor]

Edit 3: I got it. I had to set "Bar Tint" to "Default" in Interface Builder first, so that the tint is transparent and doesn't hide the programmatically added gradient layer.

Solution

  • You can use CAGradientLayer for achieving this.

    Objective C:

    CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame            = yourToolbar.bounds;
gradient.colors           = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor], (id)[[UIColor greenColor] CGColor], nil];
[yourToolbar.layer insertSublayer:gradient atIndex:0];

    Swift:

    var gradient:CAGradientLayer = CAGradientLayer()
gradient.frame               = yourToolbar.bounds
gradient.colors              = [UIColor.redColor().CGColor, UIColor.greenColor().CGColor]
yourToolbar.layer.insertSublayer(gradient, atIndex: 0)