使用编程约束 UIKit 使 UIImage 居中（水平或垂直）

Posted 2023-03-15

【中文标题】使用编程约束 UIKit 使 UIImage 居中（水平或垂直）

【英文标题】：Centering an UIImage (horizontally or vertically) with programatic constraints UIKit

【发布时间】：2018-05-20 23:56:27

【问题描述】：

我试图在 UIKit 的水平行中简单地将 5x5 图像居中。

在视图的左侧，我有一个 UIView，它的左边距和上边距附加到父视图，并且具有固有的宽度和高度。它可能不会完全填满包含视图的一半（因此假设它的宽度是任意的）。

在它的右侧（但在同一行）我试图将一个 UIImage 放在左侧对象右侧的空白区域中。这意味着它水平和垂直居中，但在另一个对象的右侧。

我真的不知道如何实现这一点，尽管我认为实现这一点的方式越来越多，也越来越少。

【参考方案1】：

在为它设置适当的宽度和高度后，设置这些约束

smallView.centerYAnchor.constraint(equalTo: greenView.centerYAnchor).isActive = true
smallView.centerXAnchor.constraint(equalTo: parentView.centerXAnchor, multiplier:1.5).isActive = true

【讨论】：

虽然它在图中看起来确实像它，但不能保证绿色对象正好是屏幕的一半，因此 1.5x 中心锚在此处不起作用。

要么在绿色视图的右侧添加一个透明视图并根据它居中smallView，要么根据你设置的greenView的宽度进行计算

【参考方案2】：

这很简单。您将使用布局指南来定义水平空间的开始和结束。然后，您将在布局指南中心居中您的视图。我已经包含了layoutMarginsGuide，可以通过设置container.layoutMargins来调整。

let containerView = UIView()
containerView.backgroundColor = .gray
// Add view to parent ...

let greenView = UIView()
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
containerView.addSubview(greenView)
greenView.topAnchor.constraint(equalTo: containerView.layoutMarginsGuide.topAnchor).isActive = true
greenView.leadingAnchor.constraint(equalTo: containerView.layoutMarginsGuide.leadingAnchor).isActive = true

let horizontalGuide = UILayoutGuide()
containerView.addLayoutGuide(horizontalGuide)
horizontalGuide.leadingAnchor.constraint(equalTo: greenView.trailingAnchor, constant: containerView.layoutMargins.left).isActive = true
horizontalGuide.trailingAnchor.constraint(equalTo: containerView.layoutMarginsGuide.trailingAnchor).isActive = true

let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.backgroundColor = .red
containerView.addSubview(imageView)
imageView.centerXAnchor.constraint(equalTo: horizontalGuide.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: greenView.centerYAnchor).isActive = true