ios - 快速将多个独立项目居中

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

您有一组四个 View ，您希望将其排成一行，并且希望将整个组在 super View 中居中。

组的中心没有可供您在约束中使用的 anchor 。所有可用的 anchor 都位于各个 subview 的中心或边缘。

您不能将“从最左边的项目到 super View 的距离”约束为等于“从最右边的项目到 super View 的距离”，因为该约束将涉及四个 anchor ，而自动布局约束只能涉及两个 anchor 。

一种解决方案是添加一个紧密围绕 View 组的辅助 View 。然后，您可以将辅助 View 的中心 anchor 约束到 super View 的中心 anchor 。

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

这是我的测试结果:

这是我的测试 field :

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)])