針對不同屏幕尺寸的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. 將每個UIView的使用addSubview（）
4. 根據它的行中的位置
5. 添加的圖標（的UIImageViews）申請的高度，寬度，和底緣約束到的UIView
6. 集的UIView位置約束基於設備
7. 添加文本類型的每個UIView的
8. 設置高度和寬度的限制標籤

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

iPhone 6與內容查看在藍色和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爲0，寬度取決於高度，使用multiplier的值可以正確修正寬高比。這樣，隨着高度變化，寬度將改變以匹配。通過圖像之間的分離來做同樣的事情 - 使分離取決於超視圖的寬度，作爲乘數。