ios - 重新调整布局大小后，如何将渐变层的大小放置在 UITextField 后面，匹配 UITextField 大小？

Question

如果向下滚动一点，您将在第一张图片中看到的是 fin 应用程序的初始屏幕。基本上，您在屏幕上看到的每个部分都放置在垂直堆栈 View 中。然后每个 Label 和 Cell 都被放置在一个水平的 Stack View 中等等，所以应用程序会自动调整大小以适应任何屏幕尺寸。我使用 Story Board 来创建元素。

最后一部分有两个蓝色的 UITextFields，它们后面有一个渐变层。我在一个单独的文件中创建了一个扩展 UITextField 类，其中包含渐变函数构造函数，然后另一个类将渐变放置在任何具有该类的 UITextField 后面，如下所示:

extension UITextField {
    func gradientBackground(firstColor: UIColor, secondColor: UIColor){
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
        layer.addSublayer(gradientLayer)
    }
}

class gradientToTextField: UITextField {
    var once = true
    override func layoutSubviews() {
        super.layoutSubviews()
        if once {
            self.gradientBackground(firstColor: UIColor(red: 0.30, green: 0.55, blue: 1.00, alpha: 1), secondColor: UIColor(red: 0.00, green: 0.36, blue: 1.00, alpha: 1))
            once = false
        }
    }
}

现在，如果您看一下右边的第二张图片，最后一部分会在点击加号按钮时展开。结果，第三部分(从 Total 开始)被隐藏，新的堆栈 View 出现在同一部分的下方。除渐变层外，所有内容都可以完美调整大小。我在它后面设置了一个红色背景，这是 UITextField 的背景，因此问题突出显示。 Gradient Layer 的高度似乎比它的父元素 UITextField 短。

这是 GitHub 上的完整项目:https://github.com/silviuisidor/layerResizeProblem

我该如何解决这个问题？

Answer 1

tl:dr — 您可以使用以文本字段作为其 subview 的渐变 View ，而不是作为文本字段子层的渐变层。

更多详情

使用渐变 View 代替渐变层。 View 的存在纯粹是为了承载一个渐变层作为其底层；您可以通过子类化 UIView 并实现 layerClass 来返回 CAGradientLayer.self 来安排它。

class MyGradientView : UIView {
    override class var layerClass : AnyClass { return CAGradientLayer.self }
    private func config() {
        let gradientLayer = self.layer as! CAGradientLayer
        let firstColor = UIColor(red: 0.30, green: 0.55, blue: 1.00, alpha: 1)
        let secondColor = UIColor(red: 0.00, green: 0.36, blue: 1.00, alpha: 1)
        gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
    }
    override init(frame: CGRect) {
        super.init(frame:frame)
        self.config()
    }
    required init?(coder: NSCoder) {
        super.init(coder:coder)
        self.config()
    }
}

现在让文本字段成为渐变 View 的 subview 。使用自动布局将其固定到渐变 View 的中心。渐变 View 及其文本字段 subview 是进入界面的内容。当动画发生时，调整大小的是渐变 View !当发生这种情况时，文本字段会自动随之重新定位。