Swift changing button height depending on screen size

Question

So I have a button/image, and I want to get higher/smaller when viewing on iPad or a smaller iPhone.

In Xcode >7 I could put my items inside W/all H/all, then I could put constraint in compact width/any height if I wanted it to be in iPhone portrait. But in Xcode 8 its a whole new system and I don't know how to do it now, so I want to change my height of the button depending on the size of the screen, how to do that?

I've tried to search around on the net, and find something with make a constraint outlet. Could that work if I have autolayout on?

Answer 1

If you want to do this without code, using size classes you can use compact width size class which applies to all iPhones in all orientations (except large iPhones in landscape like iPhone6 plus). Compact width matches iPads only in split screen.

To add vairant: - add height constraint to your button and set it to ie 50 (this will add constraint for any/any size class):

• select constraint on storyboard
• click on size inspector (fifth tab on right window)
• click on little plus icon next to Constant
• select compact for width and any for others
• now edit height constant for wC and set it to ie 30

Other way is to use UIUserInterfaceIdiom enum in set height in code, ie like this:

if UIDevice.current.userInterfaceIdiom == .pad {
    //adjust size for iPads
}else{
    //adjust size for others
}

Answer 2

You could use:

Swift 3

class ViewController: UIViewController {

    let screenSize: CGRect = UIScreen.main.bounds
    @IBOutlet weak var buttonWidthContraint: NSLayoutConstraint!
    @IBOutlet weak var buttonHeightContraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()

        buttonHeightContraint.constant = (screenSize.height / 2)
        buttonWidthContraint.constant = (screenSize.width / 2)

    }
}

Swift 2

class ViewController: UIViewController {

    let screenSize: CGRect = UIScreen.mainScreen().bounds
    @IBOutlet weak var buttonWidthContraint: NSLayoutConstraint!
    @IBOutlet weak var buttonHeightContraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()

        buttonHeightContraint.constant = (screenSize.height / 2)
        buttonWidthContraint.constant = (screenSize.width / 2)

    }
}

This way the UIButton.height is always the size of the screen / 2.

Just have a look for the right quotient you need. For example (screenSize.height / 25.3) , then on iPad, on every iPhone and so on, the Button will always have the height, depending on the device.

Another possibility would be the UIDeviceExtension

import Foundation
import UIKit

public extension UIDevice {

    var 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 where value != 0 else { return identifier }
            return identifier + String(UnicodeScalar(UInt8(value)))
        }

        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 "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 "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,7", "iPad6,8":                      return "iPad Pro"
        case "iPad2,1", "iPad2,2", "iPad2,3", "iPad2,4", "iPad3,1", "iPad3,2", "iPad3,3", "iPad3,4", "iPad3,5", "iPad3,6", "iPad4,1", "iPad4,2", "iPad4,3", "iPad5,3", "iPad5,4", "iPad2,5", "iPad2,6", "iPad2,7", "iPad4,4", "iPad4,5", "iPad4,6", "iPad4,7", "iPad4,8", "iPad4,9", "iPad5,1", "iPad5,2":                       return "iPad"
        case "AppleTV5,3":                              return "Apple TV"
        case "i386", "x86_64":                          return "Simulator"
        default:                                        return identifier
        }
    }

}

Used as following (for example):

let modelName = UIDevice.currentDevice().modelName
if modelName == "iPad" {
    buttonOutlet.frame.size.height =  42
} else if modelName == "iPhone 4" {
    buttonOutlet.frame.size.height =  25
}

And so on.