Question

我已经将三个水平项目彼此均匀地间隔开了（类似于CSS中的空白）。

| --X--X--X-- |

但是，我希望它们之间的间距类似于CSS中的间距，并且每个边缘之间都有一定的间距：
| -X ---- X ---- X- |

有没有办法做到这一点？我在水平间距处的代码如下。我是NSLayoutConstraints的新手。谢谢！

addConstraintsWithFormat(format: "H:|[v0(v2)][v1(v2)][v2]|", views: commentButton, likeButton, mapButton)

Answer 1

没有使用Visual Format Language的“内置”方式来使视图居中。您会发现看似可行的尝试，但可能并不可靠，并且如果iOS进行更改，则尝试可能会失败。

您可以使用几个“间隔”视图获得所需的布局：

    view.addConstraints(NSLayoutConstraint.constraints(
        withVisualFormat: "H:|-8-[btn1(btn3)][spacer1(spacer2)][btn2(btn3)][spacer2][btn3]-8-|",
        options: [.alignAllCenterY],
        metrics: nil,
        views: views))

注意：通过使用实际的视图字典，而不是为您提供v1，v2，v3等的“帮助器”，更容易跟踪事物。

结果：

因此，|-8-和-8-|的意思是8-pts from the edge，因此左右两侧都有一些填充。

btn1和btn2的“相等宽度”设置为btn3，因此所有3个按钮都保持匹配的宽度。

spacer1的“相等宽度”设置为spacer2，因此两个垫片都保持匹配的宽度。

将间隔视图的背景设置为.clear ...，但是由于我们没有为它们设置高度限制，因此它们的高度将为零，并且无论如何将不可见。

这是我使用的代码-您可以直接在Playground Page中运行它，也可以将其用作视图控制器：

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    var commentButton: UIButton = {
        let b = UIButton()
        b.setTitle("Comment", for: .normal)
        b.backgroundColor = .red
        return b
    }()

    var likeButton: UIButton = {
        let b = UIButton()
        b.setTitle("Like", for: .normal)
        b.backgroundColor = .red
        return b
    }()

    var mapButton: UIButton = {
        let b = UIButton()
        b.setTitle("Map", for: .normal)
        b.backgroundColor = .red
        return b
    }()

    var spacer1: UIView = {
        let v = UIView()
        v.backgroundColor = .yellow
        return v
    }()

    var spacer2: UIView = {
        let v = UIView()
        v.backgroundColor = .yellow
        return v
    }()

    override func viewDidLoad() {

        view.backgroundColor = .white

        view.addSubview(commentButton)
        view.addSubview(likeButton)
        view.addSubview(mapButton)

        view.addSubview(spacer1)
        view.addSubview(spacer2)

        let views = [
            "btn1" : commentButton,
            "btn2" : likeButton,
            "btn3" : mapButton,
            "spacer1" : spacer1,
            "spacer2" : spacer2,
        ]

        views.forEach {
            $0.value.translatesAutoresizingMaskIntoConstraints = false
        }

        view.addConstraints(NSLayoutConstraint.constraints(
            withVisualFormat: "V:|-8-[btn1]",
            options: [],
            metrics: nil,
            views: views))

        view.addConstraints(NSLayoutConstraint.constraints(
            withVisualFormat: "H:|-8-[btn1(btn3)][spacer1(spacer2)][btn2(btn3)][spacer2][btn3]-8-|",
            options: [.alignAllCenterY],
            metrics: nil,
            views: views))

    }
}

PlaygroundPage.current.liveView = MyViewController()

编辑：

顺便说一句，使用NSLayoutConstraint比VFL要简单得多，而且也更灵活。而且，它不需要“间隔”视图。

这里是一个例子。它产生的布局与上面完全相同（同样，可以在“游乐场页面”中运行或作为视图控制器源代码）：

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    var commentButton: UIButton = {
        let b = UIButton()
        b.setTitle("Comment", for: .normal)
        b.backgroundColor = .red
        return b
    }()

    var likeButton: UIButton = {
        let b = UIButton()
        b.setTitle("Like", for: .normal)
        b.backgroundColor = .red
        return b
    }()

    var mapButton: UIButton = {
        let b = UIButton()
        b.setTitle("Map", for: .normal)
        b.backgroundColor = .red
        return b
    }()

    override func viewDidLoad() {

        view.backgroundColor = .white

        view.addSubview(commentButton)
        view.addSubview(likeButton)
        view.addSubview(mapButton)

        [commentButton, likeButton, mapButton].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        NSLayoutConstraint.activate([

            // commentButton 8-pts from top, 8-pts from left
            commentButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0),
            commentButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8.0),

            // likeButton 8-pts from top, centered horizontally
            likeButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0),
            likeButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),

            // mapButton 8-pts from top, 8-pts from right
            mapButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0),
            mapButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8.0),

            // commentButton and likeButton widths equal to mapButton width
            commentButton.widthAnchor.constraint(equalTo: mapButton.widthAnchor),
            likeButton.widthAnchor.constraint(equalTo: mapButton.widthAnchor),

            ])

    }
}

PlaygroundPage.current.liveView = MyViewController()

水平间隔项目NSLayoutConstraints像间隔

1 个答案: