不同屏幕尺寸的 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. 添加文本标签

我使用了一堆约束来放置 UIView 和 UIImageView。如何根据设备的屏幕尺寸使这些约束动态化？

iPhone 6，contentView 为蓝色，UIView 为红色

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 为 0，宽度取决于高度，使用正确固定宽高比的 multiplier 值。这样，随着高度的变化，宽度也会随之变化。对图像之间的间隔做同样的事情 - 使间隔取决于父 View 的宽度，作为乘数。