如何使用swift中的格式字符串将多个元素与一个主元素对齐

Question

我正在尝试执行以下图像显示的以下任务

到目前为止，这就是我所拥有的约束，＆＃34;娱乐＆＃34;字符串由 categoryLabel 和＆＃34;迪士尼代表：将其冻结＆＃34;通过 nameLabel 。

addConstraints(withFormat: "H:|-8-[v0(90)]-8-[v1]-8-|", views: imageView, nameLabel)
addConstraints(withFormat: "V:|-8-[v0(90)]", views: imageView)

addConstraints(withFormat: "H:[v0]-8-[v1]", views: imageView, nameLabel)
addConstraints(withFormat: "V:|-8-[v0]-8-[v1]", views: nameLabel, categoryLabel)

func addConstraints(withFormat format: String, views: UIView...) {
    var viewsDictionary = [String: UIView]()
    for (index, view) in views.enumerated() {
        let key = "v\(index)"
        view.translatesAutoresizingMaskIntoConstraints = false
        viewsDictionary[key] = view
    }

    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary))
}

我遇到的问题是如何添加＆＃34; categorylabel＆＃34;对于约束，使得它与imageView的右边对齐8个像素，并且直接在nameLabel下对齐8个像素。从屏幕截图中我可以看到，我可以将它放在nameLabel下面，但是我很难将它设置为＆＃34; categorylabel＆＃34;也在图像视图的右侧。

非常感谢任何提示：）

我希望它看起来像什么

Answer 1

不幸的是，通过将NSLayoutConstraint.constraints包装在您自己的函数中，您无法访问所需的功能，即为您的nameLabel类别约束指定.alignAllLeading NSLayoutFormatOptions。

基本上，你需要的是：

NSLayoutConstraint.constraints(withVisualFormat: "V:|-8-[v0]-8-[v1]", options: .alignAllLeading, metrics: nil, views: viewsDictionary))

这将告诉autolayout您希望两个项目的前沿对齐并垂直分隔8.由于您已经将名称字段相对于图像视图的边缘定位，这将使您的类别字段位于你想要它。

您可以重新考虑addConstraints函数以接受NSLayoutFormatOptions：

func addConstraints(withFormat format: String, options: NSLayoutFormatOptions = NSLayoutFormatOptions(), views: UIView...) {

var viewsDictionary = [String: UIView]()
    for (index, view) in views.enumerated() {
        let key = "v\(index)"
        view.translatesAutoresizingMaskIntoConstraints = false
        viewsDictionary[key] = view
    }

    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: options, metrics: nil, views: viewsDictionary))
}

然后调用它：

addConstraints(withFormat: "V:|-8-[v0]-8-[v1]", options: .alignAllLeading, views: nameLabel, categoryLabel)

顺便说一下，您不需要使用故事板来使用堆栈视图。