Question

我正在尝试创建一个这样的界面：

但是现在我的代码正在生成一个这样的代码：

本质上，策略是创建一个中心UIView函数，将对象设置为一个链，然后在左右创建空UIViews，这些UIViews的大小同样最大。

正如您所看到的，而不是预期的结果，内容尽可能地被推送。我有什么方法可以解决这个问题吗？

看起来右视图根本没有扩展。我确实将背景颜色设置为红色，您可以清楚地看到左侧视图已展开但右侧视图不可见。

请注意，文本的长度变化很大，因此这里没有常量可以正常工作。

func setupUI() {
    let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        superView.addSubview(label)
        label.text = "Text"
        label.font = UIFont(name: "", size: 13)
        label.textAlignment = .center
        label.topAnchor.constraint(equalTo: superView.topAnchor, constant: -6).isActive = true
        label.setNeedsLayout()
        label.invalidateIntrinsicContentSize()

        let image = UIImageView(image: UIImage(named: "chevron.png"))
        image.translatesAutoresizingMaskIntoConstraints = false
        superView.addSubview(image)
        image.widthAnchor.constraint(lessThanOrEqualToConstant: 20).isActive = true
        image.heightAnchor.constraint(lessThanOrEqualToConstant: 20).isActive = true
        image.contentMode = UIViewContentMode.scaleAspectFit
        image.centerYAnchor.constraint(equalTo: label.centerYAnchor).isActive = true

        center(objects: [label, image], parent: superView, debug: true)
}

func center(objects: [UIView], parent: UIView, debug: Bool = false) {
    let sl = UIView()
    sl.translatesAutoresizingMaskIntoConstraints = false
    parent.addSubview(sl)

    let sr = UIView()
    sr.translatesAutoresizingMaskIntoConstraints = false
    parent.addSubview(sr)


    // Grow as much as you can 
    sl.widthAnchor.constraint(greaterThanOrEqualToConstant: 0).isActive = true
    sr.widthAnchor.constraint(greaterThanOrEqualToConstant: 0).isActive = true


    // Stay on the same row as them
    sl.centerYAnchor.constraint(equalTo: objects.first!.centerYAnchor).isActive = true
    sr.centerYAnchor.constraint(equalTo: objects.last!.centerYAnchor).isActive = true


    // Set their height correctly
    sl.heightAnchor.constraint(equalTo: objects.first!.heightAnchor).isActive = true
    sr.heightAnchor.constraint(equalTo: objects.last!.heightAnchor).isActive = true


    // Set them to hook into parent
    sl.leadingAnchor.constraint(equalTo: parent.leadingAnchor).isActive = true
    sr.trailingAnchor.constraint(equalTo: parent.trailingAnchor).isActive = true

    // Get them to re-size (this seems to have no effect)
    sr.setContentCompressionResistancePriority(UILayoutPriority.defaultHigh, for: UILayoutConstraintAxis.horizontal)
    sl.setContentCompressionResistancePriority(UILayoutPriority.defaultHigh, for: UILayoutConstraintAxis.horizontal)

    // Hook in the first and last object
    objects.first!.leadingAnchor.constraint(equalTo: sl.trailingAnchor).isActive = true
    objects.last!.trailingAnchor.constraint(equalTo: sr.leadingAnchor).isActive = true


    // Chain the objects together
    for i in 1..<objects.count {
        objects[i].leadingAnchor.constraint(equalTo: objects[i-1].trailingAnchor).isActive = true
    }
}

Answer 1

我宁愿将标签和图像包装在UIStackView中，并将该视图放在父视图中。

func center(objects: [UIView], parent: UIView, debug: Bool = false) {
    let stackView = UIStackView(arrangedSubviews: objects)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.alignment = .center
    parent.addSubview(stackView)

    NSLayoutConstraint.activate([
      stackView.centerXAnchor.constraint(equalTo: parent.centerXAnchor),
      stackView.centerYAnchor.constraint(equalTo: parent.centerYAnchor),
      stackView.widthAnchor.constraint(lessThanOrEqualTo: parent.widthAnchor),
      stackView.heightAnchor.constraint(lessThanOrEqualTo: parent.heightAnchor)
    ])
}

使用程序约束将UILabel和UIImage置于UIView中

1 个答案: