三个 UIImageView 水平堆叠并缩放

Posted 2023-02-27

【中文标题】三个 UIImageView 水平堆叠并缩放

【英文标题】：Three UIImageViews stacked horizontally with scaling

【发布时间】：2016-07-21 21:53:03

【问题描述】：

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

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

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

如下图：

【参考方案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)
])

【讨论】：

太好了，感谢您的详细回答。如果处理 StackView 没有意义，我不妨采纳你的第一个建议。我的想法是根据所使用的设备使用不同的图像，因为我认为现有图像不会随着设备变大/变小而很好地缩放。您是否建议根据设备大小以编程方式设置图像视图的大小，然后将视图的图像设置为适合该图像视图，然后将透明按钮放在顶部？我不清楚处理不同设备尺寸的图像的最佳方式。

在我的示例中，我只是使用了高分辨率图像，然后相应地设置图像视图的比例。但是，是的，如果您想要像素完美，您可能最终会得到针对不同设备宽度的不同图像，然后您可以为图像视图的高度约束添加IBOutlet。然后，查看设备宽度并相应地设置图像和约束的constant 属性。

我有一个用于 imageView 的 IBOutlet，但是当我尝试通过 imageView.frame = CGRect 调整图像视图的大小时，它没有任何效果。我猜这是因为我在情节提要上应用的约束优先。以编程方式设置高度是我应该做的其他事情吗？

是的，就像我说的，你大概有一个图像视图高度的约束。为该约束添加和IBOutlet。然后您可以将该约束的constant 调整为您想要的任何高度。见***.com/a/37737566/1271826

正确，我在情节提要中设置了约束。我不知道你可以在约束中添加一个出口——这现在更有意义了，谢谢！我现在就试试看。