以编程方式将渐变视图和 UILabel 添加到 UIView 不起作用

Question

我有一个故事板，其中设置了三个 UIView，并连接到故事板的 UIViewController。

@IBOutlet weak var availableView: UIView!
@IBOutlet weak var maybeAvailableView: UIView!
@IBOutlet weak var notAvailableView: UIView!

我有两个函数可以将 UILabel 和 CAGradientLayer 添加到每个 UIView。这是为了添加 UILabels。

func setUpLabels(view1: UIView, view2: UIView, view3: UIView) {
    let availableLabel = UILabel()
    let maybeAvailableLabel = UILabel()
    let notAvailableLabel = UILabel()

    availableLabel.text = "Available"
    maybeAvailableLabel.text = "Maybe Available"
    notAvailableLabel.text = "Not Available"

    availableLabel.backgroundColor = .clear
    maybeAvailableLabel.backgroundColor = .clear
    notAvailableLabel.backgroundColor = .clear

    availableLabel.font = UIFont.systemFont(ofSize: 17, weight: UIFont.Weight(rawValue: 10))
    maybeAvailableLabel.font = UIFont.systemFont(ofSize: 17, weight: UIFont.Weight(rawValue: 10))
    notAvailableLabel.font = UIFont.systemFont(ofSize: 17, weight: UIFont.Weight(rawValue: 10))

    availableLabel.textColor = .black
    maybeAvailableLabel.textColor = .black
    notAvailableLabel.textColor = .black

    availableLabel.frame = view1.bounds
    maybeAvailableLabel.frame = view2.bounds
    notAvailableLabel.frame = view3.bounds

    view1.addSubview(availableLabel)
    view2.addSubview(maybeAvailableLabel)
    view3.addSubview(notAvailableLabel)
}

这个用于添加渐变。

func setGradientBackground(colorTop: UIColor, colorBottom: UIColor, view: UIView) {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [colorBottom.cgColor, colorTop.cgColor]
gradientLayer.startPoint = CGPoint(x: 1, y: 1)
gradientLayer.endPoint = CGPoint(x: 0, y: 0)
gradientLayer.locations = [0, 1]
gradientLayer.frame = view.bounds

view.layer.insertSublayer(gradientLayer, at: 0)
}

这就是我在viewDidLayoutSubviews中调用的

availableView.layer.masksToBounds = true
maybeAvailableView.layer.masksToBounds = true
notAvailableView.layer.masksToBounds = true

setGradientBackground(colorTop: darkBlue, colorBottom: .systemIndigo, view: notAvailableView)
setGradientBackground(colorTop: .systemRed, colorBottom: .systemOrange, view: maybeAvailableView)
setGradientBackground(colorTop: .systemBlue, colorBottom: .systemTeal, view: availableView)

setUpLabels(view1: availableView, view2: maybeAvailableView, view3: notAvailableView)

但是，viewController 或调试层次结构视图中没有显示任何内容。我从其他问题中尝试了很多东西，但没有任何改变。

Answer 1

设置要查看的渐变背景

// - Parameters:
// - colors: gradient colors
// - opacity: opacity
// - direction: gradient direction
// - radius: radius
func setGradientBackground(_ colors: [UIColor], opacity: Float = 1, direction: GradientColorDirection = .vertical, radius: CGFloat = 25) {
        if let sublayers = self.layer.sublayers {
            for item in sublayers {
                if item is CAGradientLayer {
                    item.removeFromSuperlayer()
                }
            }
        }
        let gradientLayer = CAGradientLayer()
        gradientLayer.opacity = opacity
        gradientLayer.colors = colors.map { [=10=].cgColor }

        if case .horizontal = direction {
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
        }

        gradientLayer.bounds = self.bounds
        gradientLayer.cornerRadius = radius
        gradientLayer.anchorPoint = CGPoint.zero
        self.layer.insertSublayer(gradientLayer, at: 0)
    }

渐变颜色方向

enum GradientColorDirection {
        case vertical
        case horizontal
    }

从上到下遮蔽的颜色

 static let topToBottomMask: [UIColor] = {
            return [UIColor.clear, UIColor.black.withAlphaComponent(0.40), UIColor.black.withAlphaComponent(0.43)]
        }()

设置渐变

self.view.setGradientBackground(topToBottomMask, radius: 0)

希望对您有所帮助。

Answer 2

您可能对约束有任何疑问。我已经检查了您的代码（我将 setGradientBackground(colorTop: .darkBlue, colorBottom: .systemIndigo, view: notAvailableView) 更改为 setGradientBackground(colorTop: .darkGray, colorBottom: .systemIndigo, view: notAvailableView) 因为我没有这种颜色并且我看到了正常行为：

以编程方式将渐变视图和 UILabel 添加到 UIView 不起作用

Adding Gradient View and UILabel Programmatically to a UIView Is Not Working

storyboard

uilabel

ios

cagradientlayer

swift

设置要查看的渐变背景

渐变颜色方向

从上到下遮蔽的颜色

设置渐变