不同屏幕尺寸的iOS縮放限制

Question

這是我的第一個iOS應用，正在使用Swift。 我正在遵循CodeWithChris.com上的教程。

用戶將點擊一系列圖標來確定他們所擁有的設備型號。 到目前為止，我已經使用了一些約束條件來將圖標正確放置在iPhone 6顯示屏上。 當使用iPhone 5S / 5c / 5或4S / 4顯示屏尺寸時，圖標和文本仍以iPhone 6的完整尺寸呈現，並且它們離開屏幕。

這是我構建布局的過程：

1. 抓取JSON並將其解析為NSArray。 返回[“ iPhone”，“ Android”，“ Windows”，“ iPad”]
2. 為NSArray中的每個項目創建UIView對象。 將Name變量設置為關聯的名稱。
3. 使用addSubview（）放置每個UIView
4. 將高度，寬度和下邊距約束應用於UIView
5. 根據UIView在行中的位置設置位置約束
6. 將圖標（UIImageViews）添加到每個UIView
7. 根據設備類型設置高度和寬度限制
8. 添加文字標簽

我使用了一堆約束來放置UIViews和UIImageViews。 如何根據設備的屏幕尺寸使這些約束動態化？

iPhone 6，藍色為contentView，紅色為UIViews

iPhone 6

iPhone 5 / 5S / 5c

iPhone 4S / 4

這是我添加設備UIView並應用約束的地方：

    // Loop through the array of DeviceTypes to add each to the UIView
    for index in 0...deviceTypes.count-1 {

        // Grab the current device
        var thisDevice:DeviceType = deviceTypes[index]


        // Add to the view!
        contentView.addSubview(thisDevice)
        thisDevice.setTranslatesAutoresizingMaskIntoConstraints(false)


        // How tall is the Device UIView
        var heightConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200)

        // How wide is the device UIView
        var widthConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 130)

        // How far is the bottom of the UIView from the top of the contentView
        var bottomMarginConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: contentView, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 100)


        // Add thisDevice's UIView constraints
        thisDevice.addConstraints([heightConstraint, widthConstraint])
        contentView.addConstraint(bottomMarginConstraint)
        thisDevice.backgroundColor = UIColor.redColor()


        // set UIView position constraints based on place in row
        if (index > 0) {
            // device is second or further in row
            var deviceOnTheLeft = deviceTypes[index-1]

            var leftMarginConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: deviceOnTheLeft, attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 10)

            contentView.addConstraint(leftMarginConstraint)
        }
        else {
            // device is first in row
            var leftMarginConstraint:NSLayoutConstraint = NSLayoutConstraint(item: thisDevice, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: contentView, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 0)

            // Add constraint
            contentView.addConstraint(leftMarginConstraint)
        }

這是我應用於圖標圖像的約束：

func addDeviceImages() {

    // Set right image based on deviceType name
    self.frontImageView.image = UIImage(named: self.Name!)

    // Set translates autoresizing mask to fault
    self.frontImageView.setTranslatesAutoresizingMaskIntoConstraints(false)

    // Add the imageview to the view
    self.addSubview(self.frontImageView)

    if (self.Name == "Windows") {
        self.addImageSizeConstraints(90, height: 160)
    }

    else if (self.Name == "iPad"){
        self.addImageSizeConstraints(120, height: 180)
    }

    else if (self.Name == "iPhone"){
        self.addImageSizeConstraints(85, height: 175)
    }

    else if (self.Name == "Android"){
        self.addImageSizeConstraints(95, height: 185)
    }

}

func addImageSizeConstraints(width: CGFloat, height: CGFloat) {

    // Set the size constraints for the imageview based on the values passed in
    var heightConstraint:NSLayoutConstraint = NSLayoutConstraint(item: self.frontImageView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: height)

    var widthConstraint:NSLayoutConstraint = NSLayoutConstraint(item: self.frontImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: width)

    self.frontImageView.addConstraints([heightConstraint, widthConstraint])


    // Set the position of the imageview in the UIView
    var verticalConstraint:NSLayoutConstraint = NSLayoutConstraint( item: self.frontImageView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: -25)

    var horizontalConstraint:NSLayoutConstraint = NSLayoutConstraint( item: self.frontImageView, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 5)

    self.addConstraints([horizontalConstraint,verticalConstraint])
}

Answer 1

您使用了錯誤的約束類型。 您的寬度限制是絕對的-您要設置一個固定的constant 。 取而代之的是，使constant 0，而寬度取決於高度，並使用multiplier的值正確確定縱橫比。 這樣，隨着高度的變化，寬度將變化以匹配。 對圖像之間的分隔進行相同的處理-使分隔取決於乘數，取決於超級視圖的寬度。