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

问题描述

如果向下滚动一点，您将在第一张图片中看到的是fin应用程序的初始屏幕.基本上，您在屏幕上看到的每个部分都放在一个垂直的堆栈视图中.然后，将每个标签和单元格放置在水平的堆栈视图中，依此类推，因此该应用程序会针对任何屏幕尺寸自动调整大小.我正在使用Story Board来创建元素.

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.

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

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

现在，如果您看一下右侧的第二个图像，则在点击加号按钮时会扩展最后一个部分.结果，第三部分(以Total开头)被隐藏，并且新的堆栈视图出现在同一部分的下面.除渐变层外，其他所有内容都可以完美调整大小.我在它后面设置了一个红色背景，即UITextField的Background，因此突出显示了问题.看来，渐变层"的高度比作为其父元素的UITextField短.

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.

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

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

我该如何解决?

推荐答案

tl:dr —您可以将渐变视图与文本字段一起使用，而不是作为文本字段子层的渐变层作为其子视图.

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.

使用渐变 view 代替渐变图层.该视图的存在纯粹是为了将渐变层作为其基础层.您可以通过将UIView子类化并实现layerClass以返回CAGradientLayer.self来进行安排.

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

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

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屋！