How to get my app to fit all iPhone sizes in Portrait Mode only

Question

I have searched and still having a problem getting my app to fit all iPhone sizes in just Portrait Mode from the iPhone 4 to the largest size iPhone currently.

What is the best way so that I can get my app to fit all size iPhones in portrait mode?

I created the app in the size of iPhone Xs. What can I do to get my app to fit on all iPhone sizes from the iPhone 4 and up?

Answer 1

The only way to accomplish this is to make everything proportional in terms of width and height , so you have to forget about setting static values , another way is to make the content scroll able and set any width / height that you need , also i advice to layout say with iphone 5/4 to make you close to the clipping devices so you better build the design and for sure it'll scale properly in large devices , some key items to look for

AutoLayout

Adaptive AutoLayout

Safe Area Layout Guides

Also feel free if you in face of a complex calculation to drag the constraint as outlet and tweak it in code

Answer 2

You should read into iOS Auto Layout. It has all the features but a steep learning curve. Once you get the principles, everything starts working automagically (besides a few bugs).

Also to adapt to different iPhone screen sizes you should use the layout margin guide to ensure that bigger iPhones have bigger margins and vice versa.

Since the iPhone X and newer have other display ratios, you might wanna do something special about it in code if your UI is not all lists or basic stuff.

Answer 3

Generally the best way to scale your UI to fit multiple devices is to use Auto Layout. Instead of defining your interface with fixed frame sizes, you use constraints that calculate the frames at runtime based on the device.

Constraints can be added in Interface Builder by Ctrl-dragging from one view component to another, then fine-tuning using the Attributes inspector.

Otherwise, if you prefer, you can create and apply your constrains in code:

override func viewDidLoad() {
    super.viewDidLoad()

    let myView = UIView()
    myView.backgroundColor = .red
    myView.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(myView)

    NSLayoutConstraint.activate([
        myView.widthAnchor.constraint(equalToConstant: 50),
        myView.heightAnchor.constraint(equalToConstant: 50),
        myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        myView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])
}

The example above will add a red box to the center of the screen, regardless of device screen size.