How to detect rounded screen corners in iOS

Question

On ( https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x ) Apple tells us that "A full-width button appearing at the bottom of the screen looks best when it has rounded corners and is aligned with the bottom of the safe area..."

So I want to round the corners of my button if the corners of the screen are round, but have sharp corners when the screen corners are sharp.

I would just check to see of the app is running on an iPhone X, but I expect that future devices will also have rounded corners and I don't want to have to revisit this code every time a new device comes out.

I have already checked window.layer.cornerRaidus in my app delegate...

Answer 1

Instead of detecting rounded corners, detect a non-zero region under bottom safe area. If this region is big enough, align to it (but obviously not in it), and perhaps round the button corners as your random bet on the future. If not, leave the standard auto-layout bottom margin under your button and use the standard button UI.

Whatever you do, be aware the Apple might or will change their UI guidelines and UI APIs and appearances, so don't plan on your future-proof design being future-proof.

Answer 2

Considering how we have to check whether we are on iphone-x (eg, see this SO answer ), I don't think there is and soon will be a clean way of finding this out.

Moreover, in my opinion, existence of safe area indicates that it is undesirable to detect this. Safe area is a rectangle into which you can draw, and you should not draw outside of it, or I would even say you should not even care about what is there (or what is not there).

Excerpt from Positioning Content Relative to the Safe Area :

Safe areas help you place your views within the visible portion of the overall interface.

That is what is guaranteed to be usable for your layout, and you should not really care about the outside of it.

Regarding the guidelines you cited:

Inset full-width buttons.

A button that extends to the edges of the screen might not look like a button. Respect the standard UIKit margins on the sides of full-width buttons. A full-width button appearing at the bottom of the screen looks best when it has rounded corners and is aligned with the bottom of the safe area—which also ensures that it doesn't conflict with the Home indicator.

Notice that there is no mention there of the rounded corners of the screen. So while it is kind of a fair assumption that that was the reason behind them recommending this layout, I would not prematurely try to generalize it yet.