设置一个简单的颜色渐变作为 UIToolbar 的背景

Question

多亏了 Interface Builder 中的 Bart Tint 属性，我可以轻松更改 UIToolbar 的背景颜色。但是，我想使用简单的双色垂直渐变作为背景。

该解决方案应该适用于任何自定义工具栏高度，我的目标是 iOS 7+。如果必须以编程方式完成，欢迎 Objective-C 和 Swift。

编辑：根据我在viewDidLoad中所做的答案，但没有效果：

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

编辑 2：根据答案，我替换了以下行，但仍然没有效果：

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

编辑 3：我明白了。我必须首先在 Interface Builder 中将 "Bar Tint" 设置为 "Default"，以便色调是透明的并且不会隐藏以编程方式添加的渐变层。

Answer 1

您可以使用 CAGradientLayer 来实现这一点。

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)

Answer 2

这个有效

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

Answer 3

// 使用此代码：

我=2;

        leftColor = [UIColor colorWithRed:0.03 green:0.20 blue:0.95 alpha:1.0];
rightColor = [UIColor colorWithRed:0.98 green:0.00 blue:0.89 alpha:1.0];
gradient.frame = self.font_imageview.bounds;
gradient.colors = [NSArray arrayWithObjects:
                   (id)[rightColor CGColor],
                   (id)[UIColor clearColor].CGColor,
                   (id)[leftColor CGColor],nil];

[font_imageview.layer insertSublayer:gradient atIndex:0];

gradient.startPoint = CGPointMake(0.0, 0.5);
gradient.endPoint = CGPointMake(1.0, 0.5);}

Answer 4

与给UINavigationBar设置渐变背景的方法相同——可以使用UIToolbar的setBackgroundImage方法。

只需添加这两个扩展：

extension UIImage {
    static func imageFromLayer (layer: CALayer) -> UIImage? {
        UIGraphicsBeginImageContext(layer.frame.size)
        guard let currentContext = UIGraphicsGetCurrentContext() else {return nil}
        layer.render(in: currentContext)
        let outputImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return outputImage
    }
}

extension UIToolbar {
    func setGradientBackground(barFrame: CGRect, aColor: UIColor, bColor: UIColor, aX: CGFloat, bX: CGFloat, aY: CGFloat, bY: CGFloat) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = frame
        gradientLayer.colors = [aColor.cgColor, bColor.cgColor]
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.startPoint = CGPoint(x: aX, y: aY)
        gradientLayer.endPoint = CGPoint(x: bX, y: bY)
        if let image = UIImage.imageFromLayer(layer: gradientLayer) {
            self.setBackgroundImage(image, forToolbarPosition: .bottom, barMetrics: .default)
        }
    }
}

这从 CAGradientLayer 创建了一个 UIImage，随后将其设置为 UIToolbar 的背景图像。然后将它应用到您的 UIToolbar。例如，从蓝色到白色的水平渐变：

myToolbar.setGradientBackground(
                barFrame: navigationBar.frame,
                aColor: UIColor.blue,
                bColor: UIColor.white,
                aX: 0.0,
                bX: 1.0,
                aY: 0.5,
                bY: 0.5
            )

希望对您有所帮助！

Answer 5

如果您使用的是自定义工具栏，那么您可能会遇到尺寸问题。 view_toolbar可以是任何视图，我在这里找到了另一个完美的解决方案：

let gradientLayer = CAGradientLayer()
var bounds =  self.view_toolbar.bounds
bounds.size.height += UIApplication.shared.statusBarFrame.size.height
gradientLayer.frame = bounds
gradientLayer.colors = [colorPrimary, colorPrimaryDark]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)

self.view_toolbar.layer.insertSublayer(gradientLayer, at: 0)

设置一个简单的颜色渐变作为 UIToolbar 的背景

Set a simple color gradient as the background of UIToolbar

ios

uitoolbar

uicolor

tintcolor

bartintcolor