适用于不同屏幕尺寸的iOS缩放约束

Question

这是我的第一个iOS应用，我使用的是Swift。我正在关注CodeWithChris.com上的教程。

用户将点击一系列图标来确定他们拥有的设备型号。到目前为止，我已经使用了一些约束来将图标正确放置在iPhone 6显示器上。当使用iPhone 5S / 5c / 5或4S / 4显示器尺寸时，iPhone 6的图标和文字仍然以全尺寸呈现，并且它们会离开屏幕。

这是我构建布局的过程：

1. 抓取并解析JSON到NSArray。返回[＆＃34; iPhone＆＃34;，＆＃34; Android＆＃34;，＆＃34; Windows＆＃34;，＆＃34; iPad＆＃34;]
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

我在这里添加设备UIViews并应用约束：

    // 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的值正确定义宽高比，使multiplier 0和宽度取决于高度。这样，随着高度的变化，宽度将改变以匹配。对图像之间的分离做同样的事情 - 使分离取决于超视图的宽度，作为乘数。