如何在iOS中使用自动布局按比例增长的图像视图？

Question

我正在尝试在Interface Builder中设计以下界面，使用最新的XCode并定位最新的iOS。我正在使用设备的“推断”模拟。

所以这就是我想要的，我有三个图像视图，每个视图都有一个放置在屏幕上的元素，如下图所示。我已经花了两天时间自动布局，试图在设备更改时实现图像视图的比例增长 - 从小屏幕到iPad大小的屏幕。我无法让它发挥作用。我怎样才能做到这一点？我是否需要将其包装在一些堆叠视图中，正常视图...我需要什么样的约束？应用标题和按钮之间的距离应保持与图像上的距离相同，只会使图像视图按比例增长。

和

如果可以，我应该为iPad使用一组图像，为iPhone使用一套图像吗？或者我应该只有一个非常大的图像，并且图像视图大小基于图像视图大小？

Answer 1

添加到第一个答案，您最好的选择是在故事板中设置宽高比。按住Ctrl键从图像视图拖动到超级视图，就像通常用于添加自动布局约束一样，并选择相等的宽度和/或相等的高度（对于您的项目更有意义）。

此时，您的图片将希望与整个视图的尺寸相同。你可能不希望这样。在右侧工具栏的尺寸检查器中，找到autolayout约束。您可以修改乘数以按比例调整图像大小。如果将其设置为0.2，则图像的高度和/或宽度将为超视图高度和/或宽度的20％。 This tutorial（第1部分和第2部分）会帮助您。

对于第二个问题，如果将图像添加到默认的Assets.xcassets文件夹中，则可以为不同的设备添加不同大小的图像。不幸的是我不知道这个教程在哪里：（

Answer 2

您可以在任何视图上设置“宽高比”约束。因此，您可以根据视图宽度进行宽度计算，然后使用纵横比使其适合高度。

Answer 3

您可以将UIStackView与自动布局配合使用。

这样，您的imageViews将根据屏幕大小增长/缩小。您可以更轻松地将更多imageView添加到堆栈中。

以下是代码：

class SomeViewController: UIViewController {


// MARK: Properties

let stack = UIStackView()
let imageView1 = UIImageView()
let imageView2 = UIImageView()
let imageView3 = UIImageView()
let button = UIButton()





override func viewDidLoad() {
    super.viewDidLoad()

    stack.axis = .Horizontal // can omit, default is .Horizontal
    stack.alignment = .Center
    stack.distribution = .Fill // can omit, default is .Fill
    stack.spacing = 20 // spacing between image views
    view.addSubview(stack)

    imageView1.backgroundColor = UIColor.greenColor().colorWithAlphaComponent(0.36)
    imageView2.backgroundColor = UIColor.redColor().colorWithAlphaComponent(0.5)
    imageView3.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.1)

    button.setTitle("Boom", forState: .Normal)
    button.backgroundColor = UIColor.blackColor()
    view.addSubview(button)

    stack.addArrangedSubview(imageView1)
    stack.addArrangedSubview(imageView2)
    stack.addArrangedSubview(imageView3)


    // Constraints for stack

    stack.translatesAutoresizingMaskIntoConstraints = false
    stack.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20).active = true
    stack.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor).active = true
    stack.trailingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor).active = true

    // Constraints for imageView1

    imageView1.translatesAutoresizingMaskIntoConstraints = false
    imageView1.widthAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 0.8).active = true // to make imageView1 smaller than the red one
    imageView1.heightAnchor.constraintEqualToAnchor(imageView1.widthAnchor, multiplier: 1.5).active = true

    // Constraints for imageView2

    imageView2.translatesAutoresizingMaskIntoConstraints = false
    imageView2.heightAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 1.5).active = true

    // Constraints for imageView3

    imageView3.translatesAutoresizingMaskIntoConstraints = false
    imageView3.widthAnchor.constraintEqualToAnchor(imageView2.widthAnchor, multiplier: 0.65).active = true  // to make imageView3 smaller than the red one
    imageView3.heightAnchor.constraintEqualToAnchor(imageView3.widthAnchor, multiplier: 1.5).active = true

    // Constraints for button

    button.translatesAutoresizingMaskIntoConstraints = false
    button.topAnchor.constraintEqualToAnchor(stack.bottomAnchor, constant: 50).active = true // spacing from the stack
    button.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor).active = true
    button.trailingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor).active = true

}}