4

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...

Daniel T.
  • 32,821
  • 6
  • 50
  • 72
  • 1
    considering how we have to check fo iphone-x, I don't think there will be a clean way of finding this out – Milan Nosáľ Feb 28 '18 at 15:26
  • @MilanNosáľ is right. You have to check device model. For that you can use [this kit](https://github.com/anatoliyv/AssistantKit) – Ahmet Sina Ustem Feb 28 '18 at 15:31
  • I would raise a counter-question: ___why__ to detect rounded screen corners in iOS?_ I mean understand you reason, but still _why_... Apple says not to do so, and you cannot create a future-proof algorithm for detecting that. – holex Feb 28 '18 at 15:40
  • "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..." works for any other devices as well. Such a customisation contradicts apple intentions and guidelines. – MichaelV Feb 28 '18 at 16:18
  • PS: Perhaps you confused "corners of safe area" with rounded corners of device screen – MichaelV Feb 28 '18 at 16:19

2 Answers2

3

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.

hotpaw2
  • 70,107
  • 14
  • 90
  • 153
  • can you elaborate, and say how you would "detect a non-zero region under bottom safe area." I'm having a hard time grokking your answer. Thanks – TMin Mar 16 '23 at 17:12
-1

Considering how we have to check whether we are on iphone-x (e.g., 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.

Community
  • 1
  • 1
Milan Nosáľ
  • 19,169
  • 4
  • 55
  • 90
  • And yet, for the dock on the dashboard in iPhone X the corners are rounded and don't extend to the edge of the screen, while on iPhone 8 the corners are sharp and *do* extend to the edge of the screen. – Daniel T. Feb 28 '18 at 15:57
  • @DanielT. what's your point? I am agreeing with you and guidelines that for iPhoneX it should be with rounded corners.. I am just saying that connecting that decision with the screen with rounded corners might be premature generalization. They DO tell you to give it rounded corners on iPhoneX, and not on other devices, but THEY do NOT connect it with rounded corners of the screen. You assume that they decided to recommend it because of the rounded corners of the screen. And I have admitted it is a fair assumption, but as of right now, it is just an assumption. – Milan Nosáľ Feb 28 '18 at 16:01
  • @DanielT. and it in the end, you might be right, but since they do not explicitly use that reasoning, I don't think that they will provide a nice API as you would like.. Consider that they do recommend specific layout for iPhoneX, and yet there is no nice and clean standard way of detecting that you are on iPhoneX. – Milan Nosáľ Feb 28 '18 at 16:06
  • 1
    I need to know whether the screen corners are rounded and the actual radius to animate presenting & dismissing a view which should match the screen corners as it expands & shrinks. – Mike C. Oct 22 '19 at 18:37