Constraints

I wanted to know if there was a way to where you could have constraints one way on one device and another way on a different device. For example, I want to set the constraints for a label on the iPhone X as 30 but on an iPhone 8 Plus I want the constraints to be 50.

Accepted Reply

You have the complete code:


- the extension, that you can declare outside of the class


- addApplePayPaymentButtonToView()

as I wrote it

I understoof that you wanted to adapt the bottom constraint only.


private func addApplePayPaymentButtonToView() {
        let paymentButton = PKPaymentButton(paymentButtonType: .buy, paymentButtonStyle: .black)
        paymentButton.translatesAutoresizingMaskIntoConstraints = false
        paymentButton.addTarget(self, action: #selector(applePayButtonTapped(sender:)), for: .touchUpInside)
        view.addSubview(paymentButton)

        var constantValue = -25
        let modelName = UIDevice.modelName
        switch modelName {
          case "iPhone 8 Plus" : constantValue = -50                     // If you want to set constraint at 50 instead of 25
          case "iPhone X", "iPhone Xs" : constantValue = -30      // If you want to set constraint at 30 instead of 25
          default : constantValue = -25
       }

        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0))
        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: constantValue))
}

I do not see where you get lost.

Replies

The simplest (and easiest to maintain) is to do it in code.


- create the constraint in IB

- asociate an IBOutlet to the constraint

    @IBOutlet var myConstraint: NSLayoutConstraint!

- at the end of viewDidload, test for device

     let modelName = UIDevice.current.name

- and adapt constraint constant to the desired value.

     switch modelName {
          case "iPhone 8 Plus" : myConstraint.constant = 50
          case "iPhone X", "iPhone XS" : myConstraint.constant = 30
          default : myConstraint.constant = 30
}


You should look for the different names if you want to be specific to some device

I have this code for apple pay:


view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: -25))


I also added an outlet for a constraint. I wanted to know how would I make the constraint a different number on one device like the iPhone x and another number on another device like the 8 Plus.

Here you create the constraint by code. I propose a simpler solution, to create a constraint in IB then adapt in code.


Nevertheless, if you want to take the hard road (in that case, don't create IBOutlet):


     let modelName = UIDevice.current.name
     var myConstraint = NSLayoutConstraint(item: paymentButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: -25))     // negative, depending who is first and who is second

     switch modelName {
          case "iPhone 8 Plus" : myConstraint.constant = -50
          case "iPhone X", "iPhone XS" : myConstraint.constant = -30
          default : myConstraint.constant = -25
     }

     view.addConstraint(myConstraint)

Edited: the name here is the name given to the device, not the device type.


To get device type, see

h ttps://stackoverflow.com/questions/26028918/how-to-determine-the-current-iphone-device-model

This covers all models including TVOS !


create an extension:


public extension UIDevice {

    static let modelName: String = {
        var systemInfo = utsname()
        uname(&systemInfo)
        let machineMirror = Mirror(reflecting: systemInfo.machine)
        let identifier = machineMirror.children.reduce("") { identifier, element in
            guard let value = element.value as? Int8, value != 0 else { return identifier }
            return identifier + String(UnicodeScalar(UInt8(value)))
        }

        func mapToDevice(identifier: String) -> String { // swiftlint:disable:this cyclomatic_complexity
            #if os(iOS)
            switch identifier {
            case "iPod5,1":                                 return "iPod Touch 5"
            case "iPod7,1":                                 return "iPod Touch 6"
            case "iPhone3,1", "iPhone3,2", "iPhone3,3":     return "iPhone 4"
            case "iPhone4,1":                               return "iPhone 4s"
            case "iPhone5,1", "iPhone5,2":                  return "iPhone 5"
            case "iPhone5,3", "iPhone5,4":                  return "iPhone 5c"
            case "iPhone6,1", "iPhone6,2":                  return "iPhone 5s"
            case "iPhone7,2":                               return "iPhone 6"
            case "iPhone7,1":                               return "iPhone 6 Plus"
            case "iPhone8,1":                               return "iPhone 6s"
            case "iPhone8,2":                               return "iPhone 6s Plus"
            case "iPhone9,1", "iPhone9,3":                  return "iPhone 7"
            case "iPhone9,2", "iPhone9,4":                  return "iPhone 7 Plus"
            case "iPhone8,4":                               return "iPhone SE"
            case "iPhone10,1", "iPhone10,4":                return "iPhone 8"
            case "iPhone10,2", "iPhone10,5":                return "iPhone 8 Plus"
            case "iPhone10,3", "iPhone10,6":                return "iPhone X"
// Need to complement here for iPhoneXs, Xs max, Xr
// I think it this
            case "iPhone11,8":                              return "iPhone Xr"
            case "iPhone11,2":                              return "iPhone Xs"
            case "iPhone11,4":                              return "iPhone Xs Max"            case "iPad2,1", "iPad2,2", "iPad2,3", "iPad2,4":return "iPad 2"
            case "iPad3,1", "iPad3,2", "iPad3,3":           return "iPad 3"
            case "iPad3,4", "iPad3,5", "iPad3,6":           return "iPad 4"
            case "iPad4,1", "iPad4,2", "iPad4,3":           return "iPad Air"
            case "iPad5,3", "iPad5,4":                      return "iPad Air 2"
            case "iPad6,11", "iPad6,12":                    return "iPad 5"
            case "iPad7,5", "iPad7,6":                      return "iPad 6"
            case "iPad2,5", "iPad2,6", "iPad2,7":           return "iPad Mini"
            case "iPad4,4", "iPad4,5", "iPad4,6":           return "iPad Mini 2"
            case "iPad4,7", "iPad4,8", "iPad4,9":           return "iPad Mini 3"
            case "iPad5,1", "iPad5,2":                      return "iPad Mini 4"
            case "iPad6,3", "iPad6,4":                      return "iPad Pro 9.7 Inch"
            case "iPad6,7", "iPad6,8":                      return "iPad Pro 12.9 Inch"
            case "iPad7,1", "iPad7,2":                      return "iPad Pro 12.9 Inch 2. Generation"
            case "iPad7,3", "iPad7,4":                      return "iPad Pro 10.5 Inch"
            case "AppleTV5,3":                              return "Apple TV"
            case "AppleTV6,2":                              return "Apple TV 4K"
            case "AudioAccessory1,1":                       return "HomePod"
            case "i386", "x86_64":                          return "Simulator \(mapToDevice(identifier: ProcessInfo().environment["SIMULATOR_MODEL_IDENTIFIER"] ?? "iOS"))"
            default:                                        return identifier
            }
            #elseif os(tvOS)
            switch identifier {
            case "AppleTV5,3": return "Apple TV 4"
            case "AppleTV6,2": return "Apple TV 4K"
            case "i386", "x86_64": return "Simulator \(mapToDevice(identifier: ProcessInfo().environment["SIMULATOR_MODEL_IDENTIFIER"] ?? "tvOS"))"
            default: return identifier
            }
            #endif
        }

        return mapToDevice(identifier: identifier)
    }()

}

Then call:


     let modelName = UIDevice.modelName
     var myConstraint = NSLayoutConstraint(item: paymentButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: -25))     // negative, depending who is first and who is second
     switch modelName {
          case "iPhone 8 Plus" : myConstraint.constant = -50
          case "iPhone X", "iPhone Xs" : myConstraint.constant = -30
          default : myConstraint.constant = -25
     }

     view.addConstraint(myConstraint)

I forgot to add the code that I currently have:


private func addApplePayPaymentButtonToView() {
        let paymentButton = PKPaymentButton(paymentButtonType: .buy, paymentButtonStyle: .black)
        paymentButton.translatesAutoresizingMaskIntoConstraints = false
        paymentButton.addTarget(self, action: #selector(applePayButtonTapped(sender:)), for: .touchUpInside)
        view.addSubview(paymentButton)
        
        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0))
        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: -25))
    }
   


Would the code you suggested work with this?

It should.


Just set the value of constant there

private func addApplePayPaymentButtonToView() {
        let paymentButton = PKPaymentButton(paymentButtonType: .buy, paymentButtonStyle: .black)
        paymentButton.translatesAutoresizingMaskIntoConstraints = false
        paymentButton.addTarget(self, action: #selector(applePayButtonTapped(sender:)), for: .touchUpInside)
        view.addSubview(paymentButton)

     var constantValue = -25
     let modelName = UIDevice.modelName
     switch modelName {
          case "iPhone 8 Plus" : constantValue = -50
          case "iPhone X", "iPhone Xs" : constantValue = -30
          default : constantValue = -25
     }

        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0))
        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: constantValue))
    }

Would you mind showing me what the code would look like all together I'm a little confused?

You have the complete code:


- the extension, that you can declare outside of the class


- addApplePayPaymentButtonToView()

as I wrote it

I understoof that you wanted to adapt the bottom constraint only.


private func addApplePayPaymentButtonToView() {
        let paymentButton = PKPaymentButton(paymentButtonType: .buy, paymentButtonStyle: .black)
        paymentButton.translatesAutoresizingMaskIntoConstraints = false
        paymentButton.addTarget(self, action: #selector(applePayButtonTapped(sender:)), for: .touchUpInside)
        view.addSubview(paymentButton)

        var constantValue = -25
        let modelName = UIDevice.modelName
        switch modelName {
          case "iPhone 8 Plus" : constantValue = -50                     // If you want to set constraint at 50 instead of 25
          case "iPhone X", "iPhone Xs" : constantValue = -30      // If you want to set constraint at 30 instead of 25
          default : constantValue = -25
       }

        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0))
        view.addConstraint(NSLayoutConstraint(item: paymentButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: constantValue))
}

I do not see where you get lost.

Claude31’s first answer was about what I do (use an IBOutlet for the constraint, and change it in code).


I don’t recommend anything using model names, however. You would have to update your iPhone X code for iPhone XS, for example. Better is to figure out why you’re using the different constraint. Is it because there are non-zero safe insets? Is it because the screen is wider than 16 * 9? Make your decision based on those factors, and you’re more likely to be safe for the future.

+1 to this. Avoid "if model name == some hardcoded value" like the plague. It's far better to use heuristics (size classes, screen aspect ratio, margins, readable content guides etc.) if at all possible.