三个 UIImageView 水平堆叠并缩放

Question

我希望能够在屏幕顶部有一个栏，其中包含三个按钮，每个按钮一个图像。每张图片的大小完全相同，并在一起形成一个更大的图片（因此大图片被分成大小相等的图片 - 每张图片之间不能有任何空间，也不能有任何重叠。

我希望能够检测设备尺寸并相应地调整图像视图，以便图像可以很好地缩放。

我应该为此使用水平堆栈视图吗？

如下图：

Answer 1

您可以使用堆栈视图，但定义它们以跨越视图并具有相等宽度的约束也很简单（例如，在 VFL 中，h:|[button1][button2(==button1)][button3(==button1)]|。然后根据需要设置高度。对于图像，虽然，最简单的方法可能是让按钮没有填充，而在按钮后面只有一个带有图像的图像视图。

例如：

var buttons: [UIButton]!

override func viewDidLoad() {
    super.viewDidLoad()

    buttons = Array(0 ..< 3).map { _ -> UIButton in
        let button = UIButton(type: .Custom)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(SomeViewController.didTapButton(_:)), forControlEvents: .TouchUpInside)
        button.layer.borderColor = UIColor.blackColor().CGColor
        button.layer.borderWidth = 1
        view.addSubview(button)
        NSLayoutConstraint.activateConstraints([
            button.topAnchor.constraintEqualToAnchor(imageView.topAnchor),
            button.heightAnchor.constraintEqualToAnchor(imageView.heightAnchor)
        ])
        return button
    }
    let views = ["button0" : buttons[0], "button1" : buttons[1], "button2" : buttons[2]]
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[button0][button1(==button0)][button2(==button0)]|", options: [], metrics: nil, views: views))
}

产量：

或者，在视图调试器中检查：

---

如果你想用堆栈视图来做，它非常相似，关键问题是你必须添加约束来定义按钮具有相等的宽度：

let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)
NSLayoutConstraint.activateConstraints([
    stackView.topAnchor.constraintEqualToAnchor(imageView.topAnchor),
    stackView.heightAnchor.constraintEqualToAnchor(imageView.heightAnchor),
    stackView.leadingAnchor.constraintEqualToAnchor(imageView.leadingAnchor),
    stackView.trailingAnchor.constraintEqualToAnchor(imageView.trailingAnchor)
])

buttons = Array(0 ..< 3).map { _ -> UIButton in
    let button = UIButton(type: .Custom)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.addTarget(self, action: #selector(SomeViewController.didTapButton(_:)), forControlEvents: .TouchUpInside)
    button.layer.borderColor = UIColor.blackColor().CGColor
    button.layer.borderWidth = 1
    stackView.addArrangedSubview(button)
    return button
}

NSLayoutConstraint.activateConstraints([
    buttons[1].widthAnchor.constraintEqualToAnchor(buttons[0].widthAnchor),
    buttons[2].widthAnchor.constraintEqualToAnchor(buttons[0].widthAnchor)
])