在swift中居中多个独立项目

Question

如您所见，两个标签，两个图像和两个标签，都是独立的。我需要集中所有这些项目，

我正在以编程方式完成这项工作。请建议

尝试但失败了：

 func setupViews(){


    view.addSubview(orderLocation)

    orderLocation.addSubview(ownOrderTagImage)
    orderLocation.addSubview(ownOrderTagLabel)
    orderLocation.addSubview(ownOrderLocationImage)
    orderLocation.addSubview(ownOrderLocationLabel)

    //Change the width and height accordingly
    view.addConstraintsWithFormat(format: "H:|[v0]|", views: orderLocation)
    view.addConstraintsWithFormat(format: "V:|-50-[v0(20)]|", views: orderLocation)


    orderLocation.addConstraintsWithFormat(format: "H:|[v0(18)][v1(70)]-20-[v2(18)][v3(80)]|", views: ownOrderTagImage, ownOrderTagLabel,ownOrderLocationImage,ownOrderLocationLabel)


    orderLocation.addConstraintsWithFormat(format: "V:|[v0(20)]", views: ownOrderTagImage)

    orderLocation.addConstraintsWithFormat(format: "V:|[v0(20)]", views: ownOrderTagLabel)

    orderLocation.addConstraintsWithFormat(format: "V:[v0(20)]|", views: ownOrderLocationImage)

    orderLocation.addConstraintsWithFormat(format: "V:[v0(20)]|", views: ownOrderLocationLabel)

}

Answer 1

addConstraintsWithFormat本身并不是swift的一部分，它是视觉格式语言的扩展。

我相信您使用以下代码作为扩展程序。

extension UIView {
func addConstraintsWithFormat(_ format: String, views : UIView...) {


    var viewsDictionary = [String: UIView]()

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

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

}

您必须记住在将来的问题中包含类似的信息。

无论如何，您缺少要添加视图的视图。 在您的情况下，您应该将ImageView作为您的超级视图

首先创建ImageView对象，在您的情况下将成为该栏

let imageView: UIImageView = {
    let imgV = UIImageView()
    //put the name of the image you are using in the quotes
    imgV.image = UIImage(named: "")
    imgV.layer.masksToBounds = true
    imgV.contentMode = .scaleAspectFill
    return imgV
}()

确保您使用的照片格式正确，并添加barView作为子视图的超级视图及其约束。

<强>尝试

//here you add the view
view.addSubview(imageView)

imageView.addSubview(ownOrderTagImage)
imageView.addSubview(ownOrderTagLabel)
imageView.addSubview(ownOrderLocationImage)
imageView.addSubview(ownOrderLocationLabel)

//Change the width and height accordingly
view.addConstraintsWithFormat(format: "H:|[v0(100)]|", views: imageView)
view.addConstraintsWithFormat(format: "V:|[v0(10)]|", views: imageView)


imageView.addConstraintsWithFormat(format: "H:|[v0][v1]|", views: ownOrderTagImage, ownOrderTagLabel)

imageView.addConstraintsWithFormat(format: "H:|[v0][v1]|", views: ownOrderLocationImage, ownOrderLocationLabel)

imageView.addConstraintsWithFormat(format: "V:|[v0(44)]", views: ownOrderTagImage)

imageView.addConstraintsWithFormat(format: "V:|[v0(44)]", views: ownOrderTagLabel)

imageView.addConstraintsWithFormat(format: "V:[v0(30)]|", views: ownOrderLocationImage)

imageView.addConstraintsWithFormat(format: "V:[v0(30)]|", views: ownOrderLocationLabel)

Answer 2

您有一组四个视图要连续排列，并且您希望将组整体置于超级视图中。

组中心没有锚点供您在约束中使用。所有可用的锚点都位于各个子视图的中心或边缘。

您不能将“从最左边的项目到超级视图的距离”约束为“从最右边的项目到超级视图的距离”，因为该约束将涉及四个锚点，并且自动布局约束只能涉及两个锚点。

一种解决方案是添加一个紧紧围绕视图组的辅助视图。然后，您可以将辅助视图的中心锚点约束到superview的中心锚点。

最简单的方法是将视图组放在堆栈视图中，并使堆栈视图居中。如果您使用堆栈视图，则还需要一个“间隔”视图来将“标记”视图与“位置”视图分开。

这是我的测试结果：

这是我的测试操场：

import UIKit
import PlaygroundSupport

let rootView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 100))
rootView.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)
PlaygroundPage.current.liveView = rootView

let tagImageView = UIImageView(image: UIImage(named: "Toggle"))
tagImageView.contentMode = .scaleAspectFit
let tagLabel = UILabel()
tagLabel.text = "#YUIO9N"
let locationImageView = UIImageView(image: UIImage(named: "Gear"))
locationImageView.contentMode = .scaleAspectFit
let locationLabel = UILabel()
locationLabel.text = "Garmany"

let spacer = UIView()

let rowView = UIStackView(arrangedSubviews: [tagImageView, tagLabel, spacer, locationImageView, locationLabel])
rowView.axis = .horizontal
rowView.translatesAutoresizingMaskIntoConstraints = false

rootView.addSubview(rowView)

NSLayoutConstraint.activate([
    tagImageView.widthAnchor.constraint(equalToConstant: 18),
    spacer.widthAnchor.constraint(equalToConstant: 20),
    locationImageView.widthAnchor.constraint(equalToConstant: 18),
    rowView.heightAnchor.constraint(equalToConstant: 20),
    rowView.centerXAnchor.constraint(equalTo: rootView.centerXAnchor),
    rowView.topAnchor.constraint(equalTo: rootView.topAnchor, constant: 20)])