添加子视图时屏幕变形

Posted 2023-03-13

【中文标题】添加子视图时屏幕变形

【英文标题】：Screen distorted when I add a subview

【发布时间】：2016-07-23 04:55:43

【问题描述】：

我有一个简单的计算器 UI，我试图在其中以编程方式将渐变添加到结果/输出标签的背景。问题是如果您仍然想在前面显示，您只能使用子视图来做到这一点。但是当我这样做时，UI 会在屏幕上全部变形。

以下是两个 *** 线程，它们建议将子视图用于类似于我的任务：

Adding a CGGradient as sublayer to UILabel hides the text of label

UILabel add GradientLayer

我通过子视图添加渐变的代码是基于上面的解决方案：

let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRectMake(1, 1, resultLabel.frame.width-2, resultLabel.frame.height-2) //resultLabel.bounds
gradientLayer.colors = [UIColor.greenColor().CGColor as CGColorRef, UIColor.blueColor().CGColor as CGColorRef]
gradientLayer.locations = [0.0, 1.0]

var labelBackground = UIView(frame: resultLabel.frame)
resultLabel.backgroundColor = UIColor.clearColor()
resultLabel.frame = resultLabel.bounds
labelBackground.layer.addSublayer(gradientLayer)
labelBackground.addSubview(resultLabel)

self.view.addSubview(labelBackground)

虽然它应用了所需的渐变，但显示严重失真。

我正在使用 Swift 2.2 和 Xcode 7.3.1

我做错了什么？

在通过子视图添加渐变之前：

之后：

【问题讨论】：

渐变不是在CALayer级别完成的吗？

是的，但是对于 UILabel，如果您将 CALayer 简单地添加为子图层，它会隐藏标签文本（因此您只能看到渐变）。 subview方法用于添加渐变层，同时也保持标签文字在最前面。

您尝试过insertSublayer(_: CALayer, below: CALayer) 或insertSublayer(_: CALayer, atIndex: Int) 吗？

@NoodleOfDeath，该技术不适用于 UILabel。反正我刚才也确认了。

【参考方案1】：

试试这个：

let labelBackground: UIView = UIView(frame: self.resultLabel.frame)
self.resultLabel.backgroundColor = UIColor.clearColor()
self.resultLabel.frame = self.resultLabel.bounds

let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.frame = labelBackground.layer.bounds
gradientLayer.colors = [UIColor.greenColor().CGColor as CGColorRef, UIColor.blueColor().CGColor as CGColorRef]
gradientLayer.locations = [0.0, 1.0]

labelBackground.layer.addSublayer(gradLayer)
labelBackground.addSubview(self.resultLabel)

self.view.addSubview(labelBackground)

【讨论】：

我假设您建议我将渐变添加为子层而不是子视图（包含渐变子层）。这可行，但随后标签文本没有出现，这就是我尝试使用这种方法的原因（请参阅我在问题中提到的链接）。

谢谢，但它仍然无法正常工作。我想你只是重新排列了我以前的一些代码。

【参考方案2】：

所以我设法自己使用不同的技术解决了这个问题。

我想得到一个带有渐变填充的 UILabel，同时将 UILabel 中的文本保留在前面。

为了实现这一点，我在 UILabel 后面放置了一个 UIView 对象，并确保它们的大小和坐标相同。我设置了布局约束，它们的高度和宽度相同，并且与相邻元素的距离相同。我还使 UILabel 透明。之后，我简单地将渐变作为子层添加到 UIView 中，效果非常好。