选项卡中的渐变背景

Question

我已经对 TabBarController 进行了子类化并尝试创建渐变背景，但似乎没有起作用，什么也没有显示。顺便说一下，我正在使用Hue 框架。

    let tabBarGradient = [UIColor.redColor(), UIColor.blackColor()].gradient { gradient in
        gradient.frame = self.tabBar.frame
        gradient.startPoint = CGPointMake(0,0.5)
        gradient.endPoint = CGPointMake(1,0.5)

        return gradient
    }

    self.tabBar.layer.addSublayer(tabBarGradient)

- Peter Pik

---

我没有忘记设置颜色吧？ - Peter Pik

Answer 1

在您的CustomTabBarController中，编写以下代码：

import UIKit

class GradientTabBarController: UITabBarController {

    let layerGradient = CAGradientLayer()

    override func viewDidLoad() {
        super.viewDidLoad()

        layerGradient.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
        layerGradient.startPoint = CGPoint(x: 0, y: 0.5)
        layerGradient.endPoint = CGPoint(x: 1, y: 0.5)
        layerGradient.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        self.tabBar.layer.insertSublayer(layerGradient, at: 0)
    }
}

你可以像这样在选项卡栏中看到渐变效果：

在故事板中，您将CustomTabBarController分配给TabBarController。

- Khuong

---

最好使用insertSublayer(layerGradient, at: 0)而不是addSublayer(layerGradient)，因为addSublayer会将渐变层添加到选项卡上方，导致它们变得不可见。 - coldembrace

Answer 2

使用

    self.tabBar.layer.insertSublayer(layerGradient, at:0)

替代

    self.tabBar.layer.addSublayer(layerGradient)

https://stackoverflow.com/a/48853918/4449202

- Abuzar Manzoor

Answer 3

补充一下Khuong的回答，上述方法对于Y轴梯度不起作用，因为它使用view.Frame来设置layerGradient.Frame的宽度和高度。view是容器视图，比选项卡栏要大。所以，当设置layerGradient.Frame时，请使用tabBar.Frame：

 layerGradient.frame = CGRect(x: 0, y: 0, width: tabBar.bounds.width,height: tabBar.bounds.height)

- jgoldberger - MSFT