AutoLayout in iPhone X

Question

I have many apps that works pretty good, and their layout is good on every device, except from iPhone X. When I run the apps on iPhone X it "stretch" the view and it looks weird. It also covered the safe areas. How can I make it be only within the safe area, and paint the background, the parts that are not part of the safe area, with the regular background color of the app?

Answer 1

It looks like your layout depends heavily on the device's aspect ratio and, more specifically, its screen width. If I were to venture a guess, I would say you're probably calculating the size of your subviews and the interim padding as a function of the width of their superview and, crucially here, hard-coding or miscalculating the corner radii of the subviews' layers.

Normally I would consider this to be a design issue and suggest you find a way to resize these views so that they will not distort regardless of the device's aspect ratio since there are absolutely no guarantees regarding which display sizes and characteristics we may need to support in the future as evidenced by the X's notch.

If you're trying to get something done quick and dirty and prefer to change as little of your extant code as possible, I might look into adding the view into a container view in interface builder or in code and then constraining that container's aspect ratio to the one you've chosen to support. You could then make the container's superview have the same background color as the container and center the container in it's superview. This would effectively be the equivalent of adding bars above and below the container to preserve the original aspect. I consider this to be a bandaid to be honest. You should be able to adapt to a device's width regardless of its aspect ratio in a perfect scenario.