ios - 三个 UIImageViews 水平堆叠并缩放

Question

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

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

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

如下所示:

Answer 1

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

例如:

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

产量:

或者，在 View 调试器中检查:

---

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

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