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

Question

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

最后一部分有两个蓝色的 UITextField，后面有一个渐变层。我在一个单独的文件中创建了一个扩展 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 开始）被隐藏，并且在同一部分的下方出现了一个新的堆栈视图。除了渐变层之外，一切都完美地调整了大小。我在它后面设置了一个红色背景，即 UITextField 的背景，所以问题突出显示。渐变层的高度似乎比它的父元素 UITextField 短。

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

我怎样才能解决这个问题？

标签： iosswiftxcodeautolayoutcagradientlayer

Answer 1

tl:dr — 代替作为文本字段子层的渐变层，您使用带有文本字段的渐变视图作为其子视图。

更多细节

代替渐变层，使用渐变视图。视图的存在纯粹是为了将渐变层作为其底层；您可以通过子类化 UIView 并实现layerClassreturn 来安排它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()
    }
}

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