使用乘数的自动布局在 xcode 8 的界面构建器中为不同的屏幕尺寸创建自动可调整大小的视图

Question

我曾尝试在IB 中使用Autoresizing 来实现这一点，使用constraints 等

• 固定，
• 纵横比，
• 垂直间距，
• 水平/垂直间距，
• 前导/尾随空格；

但似乎没有一个适用于所有屏幕尺寸。

例如

iphone 7 中的 4 个图像视图是它们所需的输出位置，但一旦我在iphone 7 plus 屏幕尺寸或iphone SE 屏幕尺寸中检查它，这些图像视图就会改变位置。

以下是 iphone 7 上的预期输出。

iphone7 图片

下面是 不期望的输出，因为 iphone 7 plus 上 4 个图像视图的位置发生了变化。 iphone7plus

我希望再分享一张 iPhone SE 的图片，其中所有 4 张图片视图的位置变化更剧烈，但无法分享导致声誉低于 10

我将解释，例如，从第一张图像，即 iphone 7，这 4 个小图像视图可以与白色背景的图像视图一起作为预期位置，但在其他两种屏幕尺寸（iphone7 plus 和 iphoneSE ) 所有视图（4 个小图像视图和白色背景的视图）都应该与第一个视图相比具有相应的定位和缩放。

更新：添加代码 我刚刚对@diana_prodan 在这篇文章中得到的答案之一进行了一些更改，以获得预期的输出。

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var imgOne: UIImageView!

@IBOutlet weak var imgTwo: UIImageView!

@IBOutlet weak var imgThree: UIImageView!

@IBOutlet weak var imgFour: UIImageView!

let icon_small : Float = 45.0
let icon_medium : Float = 50.0

override func viewDidLoad() {
    super.viewDidLoad()
    
    let viewSize = UIScreen.main.bounds.size 
    print(viewSize)
    //image positioned
    //for 4' screen
    if (viewSize.height == 568.0){
        addImageAtPosition(imgOne, icon_small,41, 106 )
        addImageAtPosition(imgTwo, icon_small,105,91 )
        addImageAtPosition(imgThree, icon_small,105, 147)
        addImageAtPosition(imgFour, icon_small,139, 197 )
    //for 4.7' screen
    }else if(viewSize.height == 667.0){
        addImageAtPosition(imgOne, icon_medium,52, 135 )
        addImageAtPosition(imgTwo, icon_medium,127,106 )
        addImageAtPosition(imgThree, icon_medium,127, 172 )
        addImageAtPosition(imgFour, icon_medium,167, 230 )
     //for 5.5' screen   
    }else if(viewSize.height == 736.0){
        //add code woth cordinates for 5.5 screen size iPhone
    }
}
//method to positon image views
func addImageAtPosition(_ img:UIImageView, _ size: Float, _ y: Float, _ x: Float) {
    let imageView = img
    imageView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(imageView)
    
    let imageSize: CGFloat = CGFloat(size)
    
    let topConstraint = NSLayoutConstraint(item: imageView, attribute: .top, relatedBy: .equal, toItem: self.topLayoutGuide, attribute: .bottom, multiplier: 1, constant: CGFloat(y))
    
    let leftContraint = NSLayoutConstraint(item: imageView, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: CGFloat(x))
    
    let widthConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: imageSize)
    
    let heightConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: imageSize)
    
    view.addConstraints([topConstraint, leftContraint, widthConstraint, heightConstraint])
}

}

此代码的问题是我必须获取不同屏幕尺寸上所有图像视图视图的坐标并对其进行硬编码，我认为这不是一个好习惯

Answer 1

以给定半高约束的视图 A 为主视图的高度。之后给所有图像相同的高度和宽度约束。给一个图像的 x,y 约束与视图 A 的中心。并链接所有图像设置 defullts 约束。

Answer 2

您必须为 ImageView 的顶部和左侧约束设置随机值。

func addImageAtRadomPosition() {
    let imageView = UIImageView()
    imageView.backgroundColor = UIColor.red
    imageView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(imageView)

    let imageSize: CGFloat = 50.0
    let screenHeight = UIScreen.main.bounds.size.height
    let screenWidth = UIScreen.main.bounds.size.width

    // Get random values which will be used for top and left constraints
    let randomYPosition = Int(arc4random_uniform(UInt32(screenHeight - imageSize)))
    let randomXPosition = Int(arc4random_uniform(UInt32(screenWidth - imageSize)))

    let topConstraint = NSLayoutConstraint(item: imageView, attribute: .top, relatedBy: .equal, toItem: self.topLayoutGuide, attribute: .bottom, multiplier: 1, constant: CGFloat(randomYPosition))
    let leftContraint = NSLayoutConstraint(item: imageView, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: CGFloat(randomXPosition))
    let widthConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: imageSize)
    let heightConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: imageSize)

    view.addConstraints([topConstraint, leftContraint, widthConstraint, heightConstraint])
}

调用此方法的次数与您的 ImageViews 数一样多

for _ in 0...5 {
    addImageAtRadomPosition()
}

Answer 3

如果这是您的预期输出，请通知我，以便我描述如何实现此目标，如果不是，请告诉我您还期望什么。

在下方评论。

编辑

当我在iPhone 6+ 中运行相同的 VC 时，我得到了以下输出。所以考虑一下这个输出。

Answer 4

为了达到预期的输出我去了这个参考[参考]：https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html，所以我所要做的就是

• 选择其中一个视图并按住 ctrl+ 拖动到外部视图
• 然后按住 shift 并选择 等宽 & 等高, 居中 在容器中水平放置 & 在容器中垂直居中。
• 然后选择每个约束线（黄色）或从视图控制器场景列并修改乘数，直到黄色线变为蓝色，即直到 它满足了我最初将图像视图放置在视图控制器布局中的位置。

here is the screen shot link it shows where to select constraints one by one(on left) and modify multiplier(on right).