每次视图出现时，UIView 图层的子图层显示 differently/randomly

Question

我有一个简单的自定义 CALayer 可以在我的 UIView 上创建叠加渐变效果。这是代码：

class GradientLayer: CALayer {

var locations: [CGFloat]?
var origin: CGPoint?
var radius: CGFloat?
var color: CGColor?

convenience init(view: UIView, locations: [CGFloat]?, origin: CGPoint?, radius: CGFloat?, color: UIColor?) {
    self.init()
    self.locations = locations
    self.origin = origin
    self.radius = radius
    self.color = color?.CGColor
    self.frame = view.bounds
}

override func drawInContext(ctx: CGContext) {
    super.drawInContext(ctx)

    guard let locations = self.locations else { return }
    guard let origin = self.origin else { return }
    guard let radius = self.radius else { return }

    let colorSpace = CGColorGetColorSpace(color)
    let colorComponents = CGColorGetComponents(color)

    let gradient = CGGradientCreateWithColorComponents(colorSpace, colorComponents, locations, locations.count)
    CGContextDrawRadialGradient(ctx, gradient, origin, CGFloat(0), origin, radius, [.DrawsAfterEndLocation])
}
}

我在这里初始化并设置这些图层：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    let gradient1 = GradientLayer(view: view, locations: [0.0,1.0], origin: CGPoint(x: view.frame.midX, y: view.frame.midY), radius: 100.0, color: UIColor(white: 1.0, alpha: 0.2))

    let gradient2 = GradientLayer(view: view, locations: [0.0,1.0], origin: CGPoint(x: view.frame.midX-20, y: view.frame.midY+20), radius: 160.0, color: UIColor(white: 1.0, alpha: 0.2))

    let gradient3 = GradientLayer(view: view, locations: [0.0,1.0], origin: CGPoint(x: view.frame.midX+30, y: view.frame.midY-30), radius: 300.0, color: UIColor(white: 1.0, alpha: 0.2))

    gradient1.setNeedsDisplay()
    gradient2.setNeedsDisplay()
    gradient3.setNeedsDisplay()

    view.layer.addSublayer(gradient1)
    view.layer.addSublayer(gradient2)
    view.layer.addSublayer(gradient3)
}

该视图似乎大部分时间都能正确显示，但（看似）随机我会得到不同的渲染，如下所示。下面是一些例子（第一个就是我想要的）：

导致此故障的原因是什么？怎么每次只加载第一个？

Answer 1

您的问题是您在 viewWillLayoutSubviews 函数中编写的代码在视图加载时被多次调用只需向运行添加一个检查它一次或更好的是在 viewdidlayoutsubviews 中添加一个检查运行一次

Answer 2

你有几个问题。

首先，您应该将渐变视为 stops 的数组，其中 stop 有两部分：颜色和一个位置。您必须具有相同数量的颜色和位置，因为每个站点都有一个。例如，如果您查看有关 components 参数的 CGGradientCreateWithColorComponents 文档，您可以看到这一点：

The number of items in this array should be the product of count and the number of components in the color space.

它是一个乘积（乘法的结果），因为您有 count 个色标并且每个色标都需要一套完整的颜色分量。

您没有提供足够的颜色成分。您的 GradientLayer 可以有任意数量的位置（并且您给它两个）但只有一种颜色。您正在获取一种颜色的分量并将其作为分量数组传递给 CGGradientCreateWithColorComponents，但该数组太短了。 Swift 没有捕捉到这个错误——注意你的 colorComponents 的类型是 UnsafePointer<CGFloat>。 Unsafe 部分告诉您您处于危险区域。（您可以通过在 Xcode 中单击选项来查看 colorComponents 的类型。）

由于您没有为 components 提供足够大的数组，iOS 正在使用您的一种颜色的成分之后恰好在内存中的任何随机值。这些可能会从运行运行变化，并且通常不是您想要的。

事实上，您甚至不应该使用 CGGradientCreateWithColorComponents。你应该使用 CGGradientCreateWithColors，它接受一个 CGColor 的数组，这样它不仅使用起来更简单，而且更安全，因为它少了一个 UnsafePointer 浮动。

GradientLayer 应该是这样的：

class RadialGradientLayer: CALayer {

    struct Stop {
        var location: CGFloat
        var color: UIColor
    }

    var stops: [Stop] { didSet { self.setNeedsDisplay() } }
    var origin: CGPoint { didSet { self.setNeedsDisplay() } }
    var radius: CGFloat { didSet { self.setNeedsDisplay() } }

    init(stops: [Stop], origin: CGPoint, radius: CGFloat) {
        self.stops = stops
        self.origin = origin
        self.radius = radius
        super.init()
        needsDisplayOnBoundsChange = true
    }

    override init(layer other: AnyObject) {
        guard let other = other as? RadialGradientLayer else { fatalError() }
        stops = other.stops
        origin = other.origin
        radius = other.radius
        super.init(layer: other)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func drawInContext(ctx: CGContext) {
        let locations = stops.map { [=10=].location }
        let colors = stops.map { [=10=].color.CGColor }

        locations.withUnsafeBufferPointer { pointer in
            let gradient = CGGradientCreateWithColors(nil, colors, pointer.baseAddress)
            CGContextDrawRadialGradient(ctx, gradient, origin, 0, origin, radius, [.DrawsAfterEndLocation])
        }
    }

}

下一个问题。每次系统调用 viewWillLayoutSubviews 时，您都会添加更多渐变图层。它可以多次调用该函数！例如，如果您的应用程序支持界面旋转，或者如果有电话进来并且 iOS 使状态栏变高，它将调用它。（您可以通过选择“硬件”>“切换通话状态栏”在模拟器中进行测试。）

您需要创建一次渐变层，将它们存储在属性中。如果它们已经被创建，你需要更新它们的框架而不是创建新层：

class ViewController: UIViewController {

    private var gradientLayers = [RadialGradientLayer]()

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        if gradientLayers.isEmpty {
            createGradientLayers()
        }

        for layer in gradientLayers {
            layer.frame = view.bounds
        }
    }

    private func createGradientLayers() {
        let bounds = view.bounds
        let mid = CGPointMake(bounds.midX, bounds.midY)
        typealias Stop = RadialGradientLayer.Stop

        for (point, radius, color) in [
            (mid, 100, UIColor(white:1, alpha:0.2)),
            (CGPointMake(mid.x - 20, mid.y + 20), 160, UIColor(white:1, alpha:0.2)),
            (CGPointMake(mid.x + 30, mid.y - 30), 300, UIColor(white:1, alpha:0.2))
            ] as [(CGPoint, CGFloat, UIColor)] {

                let stops: [RadialGradientLayer.Stop] = [
                    Stop(location: 0, color: color),
                    Stop(location: 1, color: color.colorWithAlphaComponent(0))]

                let layer = RadialGradientLayer(stops: stops, origin: point, radius: radius)
                view.layer.addSublayer(layer)
                gradientLayers.append(layer)
        }
    }

}

每次视图出现时，UIView 图层的子图层显示 differently/randomly

UIView layer's sublayers display differently/randomly each time view appears

calayer

uiview

ios

cagradientlayer

swift