三个UIImageViews水平堆叠与缩放

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