自动布局程序化纵横比设置

Posted

技术标签:

【中文标题】自动布局程序化纵横比设置【英文标题】:Autolayout programmatic aspect ratio setting 【发布时间】:2019-01-21 08:59:10 【问题描述】:

我正在尝试添加一个子视图来查看和定义自动布局约束,包括纵横比。但是我在运行时看到的纵横比并不是我在约束中定义的。我究竟做错了什么?正如您在代码中看到的,背景视图高度应该是背景视图宽度的 0.5,但在屏幕截图中并非如此。这是我的代码:

class ViewController: UIViewController 

private var backgroundView:UIView?

override func viewDidLoad() 
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    view.backgroundColor = UIColor.orange

    backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
    backgroundView?.backgroundColor = UIColor.black.withAlphaComponent(1.0)
    backgroundView?.layer.borderColor = UIColor.white.cgColor
    backgroundView?.layer.borderWidth = 1.5
    backgroundView?.layer.cornerRadius = 4
    backgroundView?.clipsToBounds = true
    backgroundView?.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(backgroundView!)

    backgroundView?.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1.0).isActive = true
    backgroundView?.heightAnchor.constraint(equalTo: backgroundView!.widthAnchor, multiplier: 0.5).isActive = true
    backgroundView?.centerXAnchor.constraint(equalTo: view!.centerXAnchor, constant: 0).isActive = true
    backgroundView?.topAnchor.constraint(equalTo: view!.topAnchor, constant: 4).isActive = true



 

截图如下:

【问题讨论】:

显示 UI 的图像以加深理解。 为什么在使用自动布局时要设置框架? 尝试将高度约束更改为:.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5) @LalKrishna heightAnchor 将尺寸、常数和乘数作为参数一个常数。 您的问题仍然缺少纯信息。你想要什么 ???什么是问题?请清除它。 【参考方案1】:

“背景视图高度应为背景视图宽度的 0.5”

你的截图大小是1334 x 750

您的backgroundView(包括边框)是1334 x 667

1334 * 0.5 == 667

所以,你得到的正是你想要的。

【讨论】:

【参考方案2】:

尝试改变高度约束来设置:

backgroundView?.heightAnchor.constraint(equalTo: view!.heightAnchor, multiplier: 0.5).isActive = true

注意:您将得到您正在寻找的确切结果。它的高度是宽度的一半。截图没有问题。

【讨论】:

请再看一遍代码,它设置为宽度锚,而不是高度锚。上一行代码中已经设置了宽度锚点。 我看到了。但是在评论中你要求Why is height of the black view not equal to height of view divided by 2? 所以你需要查看高度应该是self.view 高度的一半,不是吗?这是你的要求吗? 我的要求是代码有什么问题?为什么这两行没有设置纵横比。 您将 backgroundView 的高度设置为backgroundView.width / 2.0 为什么截图中没有出现这种情况?

以上是关于自动布局程序化纵横比设置的主要内容,如果未能解决你的问题,请参考以下文章

基于 `intrinsicContentSize` 的自动布局纵横比(非恒定)

使用自动布局将图像宽度调整为 100%,同时保持纵横比

两种纵横比(4:3 和 16:9)的两种布局 - 自动更改

在 CSS FlexBox 布局中自动调整图像大小并保持纵横比?

使用自动布局自定义纵横比

自动布局和 UIImageViews