使用乘數自動布局，在xcode 8的界面生成器中為不同的屏幕尺寸創建自動調整大小的視圖

Question

我試圖做到這一點使用Autoresizing在IB ，使用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）中，所有視圖（第四個小圖像視圖和帶有白色背景的視圖）應與第一個圖像上的外觀相對應地定位和縮放 。

更新：添加了代碼我只是對@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作為主視圖高度的約束。 之后，給所有圖像相同的高度和寬度constarin。 給出一個圖像的x，y約束並以視圖A的中心為中心。 並鏈接所有設置不完整的圖像約束。

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

為了實現預期的輸出，我轉到了此參考資料[reference]： https : //developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html ，所以我所要做的就是

• 選擇其中一個視圖並按住ctrl +拖動到外部視圖
• 然后按住shift鍵並選擇相等的寬度和相等的高度 ， 在容器中水平 居中，在容器中垂直居中 。
• 然后從視圖控制器場景列中選擇每個約束線（黃色），或修改乘數，直到黃色線變為藍色，即直到它滿足我最初將圖像視圖放在視圖控制器布局中的位置為止。

這是屏幕快照鏈接，它顯示了在哪里一個一個地選擇約束（ 左側 ）並修改乘數（ 右側 ）。