重新调整布局大小后，如何将渐变层的大小放置在 UITextField 后面，与 UITextField 大小匹配? [英] How to have a Gradient Layer's size placed behind a UITextField, match the UITextField size, after re-sizing the layout?

问题描述

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

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

扩展 UITextField {func gradientBackground(firstColor:UIColor，secondColor:UIColor){让 gradientLayer = CAGradientLayer()gradientLayer.frame = 边界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(渐变层)}}类gradientToTextField:UITextField {var 一次 = 真覆盖 func layoutSubviews() {super.layoutSubviews()如果一次{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))一次 = 假}}}

现在，如果您看一下右侧的第二张图片，最后一部分会在点击加号按钮时展开.结果，第三部分(从 Total 开始)被隐藏，并且在同一部分的下方出现了一个新的堆栈视图.除了渐变层之外，一切都完美地调整了大小.我在它后面设置了一个红色背景，即 UITextField 的背景，所以问题突出显示.渐变层的高度似乎比它的父元素 UITextField 短.

这是 GitHub 上的完整项目:

What you will see in the first image, if you scroll down a little bit, is the initial screen of a fin app. Basically, every section you see on the screen is placed within a vertical Stack View. Then every Label and Cell Is placed in a horizontal Stack View and so on, so the app auto-resizes for any screen size. I was using Story Board to create the elements.

The last section has two blue UITextFields that have a gradient layer behind it. I created an extension UITextField Class in a separate file that has the gradient function constructor in it and then another Class that placed the gradient behind any UITextField that have that class attached like this:

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
        }
    }
}

Now if you take a look at the second image on the right, the last section expands on tapping the Plus sign button. As a result, the third section(starting with Total) is hidden and a new stack view appears below within the same section. Everything resizes perfectly except the gradient layer. I have set a red background behind it which is the UITextField's Background, so the problem is highlighted. It appears that the Gradient Layer is shorter in height than the UITextField, which is its parent element.

Here's the full project on GitHub: https://github.com/silviuisidor/layerResizeProblem

How can I fix this?

解决方案

tl:dr — Instead of gradient layer that is a sublayer of the text field, you use a gradient view with the text field as its subview.

More details

Instead of a gradient layer, use a gradient view. The view exists purely to host a gradient layer as its underlying layer; you arrange this by subclassing UIView and implementing layerClass to return 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()
    }
}

Now make the text field the subview of our gradient view. Pin it using autolayout to the center of the gradient view. The gradient view, with its text field subview, is what goes into the interface. When the animation takes place, it is the gradient view that is resized! And when that happens, the text field is automatically repositioned along with it.

这篇关于重新调整布局大小后，如何将渐变层的大小放置在 UITextField 后面，与 UITextField 大小匹配?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！