iOS Scaling Constraints для разных размеров экрана

Question

Это мое первое приложение для iOS, и я использую Swift. Я следую учебникам на CodeWithChris.com.

Пользователь будет нажимать на ряд значков, чтобы определить, какая у них модель устройства. До сих пор я использовал несколько ограничений для правильного отображения значков на дисплее iPhone 6. При использовании экранов iPhone 5S/5c/5 или 4S/4 значки и текст по-прежнему отображаются в полном размере для iPhone 6, и они уходят с экрана.

Вот мой процесс для создания макета:

1. Grab и разобрать JSON для NSArray. Возвращает [«iPhone», «Android», «Windows», «iPad»]
2. Создайте объект UIView для каждого элемента в NSArray. Перечислите имя переменной в соответствующее имя.
3. Поместите каждый UIView с помощью addSubview()
4. Применить высоту, ширину и снизу полей ограничения на UIView
5. Набора UIView ограничений позиции на основе его позиции в ряде
6. Добавить иконки (UIImageViews) к каждый UIView
7. Набор высоты и ширины ограничения в зависимости от типа устройства
8. Добавить текст этикетки

Я использую кучу ограничений для размещения UIViews и UIImageViews. Как я могу сделать эти ограничения динамическими в зависимости от размера экрана устройства?

iPhone 6 с contentView в синий и UIViews в красном

iPhone 6

iPhone 5/5S/5с

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, которое правильно исправляет пропорции. Таким образом, по мере изменения высоты ширина изменится на совпадение. Сделайте то же самое с разделением между изображениями - сделайте разделение зависеть от ширины супервизора как множителя.