Design tip for the new iPhone SE

Hi All,

I have a tip for you about designing for the new iPhone SE and the 11 Max. Since both have the same ratio in auto Layout (compact, Regular) there is a need to find a solution that can fit all the objects on the small screen of an SE and not looked cramp on the roomy 11 Max. Here is one solution that I use for a portrait style app.

I am a big fan of StackViews as I can let the computer do the work of getting all the objects lined up and spaced.

I create one main StackView and place all the other objects in it. This way, all I need to do is set the spacing for the SE and larger spacing for the 11 Max, etc. This is how that works.

In your viewController, create an IBOutlet to the main StackView.

In my constants file, I have the following struct

    struct iphone {
        static let six = "iPhone 6s"
        static let seven = "iPhone 7"
        static let eight = "iPhone 8"
        static let se = "iPhone SE"
    }

Then in the viewDidLoad() add the following:

 // hide the image on small screens and set stackView spacing. Get the phone first
        let modelName = UIDevice.modelName
        
        if modelName.contains(Constants.iphone.six) || modelName.contains(Constants.iphone.seven) || modelName.contains(Constants.iphone.eight) || modelName.contains(Constants.iphone.se) {

            tiresImage.isHidden = true // hide the graphic on small screens, default is showing
            mainStack.spacing = 12 // stackView spacing for the SE, 6 ,7, & 8
        } else {
            mainStack.spacing = 18 // stackVew spacing for all others
        }

This allows the stackView to stretch out and not feel so cramped on the larger screens and hide the bottom objects on a smaller screen. Otherwise, on a smaller screen, the tighter spacing lets all the objects fit.

Just remember, if you have a textField on the lower half of the screen, this routine does not solve that. You need to slide everything up when you start editing and back down when finished editing. The easiest way to accomplish that is move the mainStack top constraint up and back down.

Hope this is helpful.

Happy coding.
Blessings,
—Mark

2 Likes

Thanks for sharing, Mark! This will really help!