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

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

最后一部分有两个蓝色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的背景，所以问题突出显示。 看起来Gradient Layer的高度比UITextField（它的父元素）短。

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

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

Answer 1

tl：dr – 您可以使用带有文本字段作为子视图的渐变视图，而不是作为文本字段子图层的渐变图层。

更多细节

不使用渐变图层，而是使用渐变视图 。 视图纯粹存在于将梯度层作为其底层; 你通过layerClass 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() } } 

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

Answer 2

在layoutSubviews调整图层框架的大小应该可以解决您的问题

 extension UITextField { func gradientBackground(firstColor: UIColor, secondColor: UIColor) -> CAGradientLayer{ 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) return gradientLayer } } class gradientToTextField: UITextField { var coloredLayer : CAGradientLayer! = nil var once = true override func layoutSubviews() { super.layoutSubviews() if once { coloredLayer = 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 } coloredLayer.frame = self.bounds } }