Quel est le rayon de coin définitif de l'iPhone X?


10

J'ai expérimenté et je n'ai trouvé aucun rayon de coin concluant pour l'iPhone X.

En utilisant Xcode, j'ai créé un cercle d'une largeur et d'une longueur de 80 (donc rayon 40), et je l'ai mis dans le coin supérieur gauche de l'iPhone X (donc x et y sont nuls), il y a un petit espace blanc entre le cercle et le bord de l'écran, que vous pouvez voir ici:

J'ai également essayé une autre méthode, en faisant cela avec un bouton:

button.frame.size.height = 812
button.frame.size.width = 375
button.layer.cornerRadius = 40
button.center = self.view.center

Avec cela, je me retrouve avec:

Donc la question est, quel est le vrai rayon de coin? Ou que se passe-t-il avec Xcode?

Réponses:


15

coins iPhone X n'ont un rayon d'angle concluant. Ce ne sont pas des arcs normaux, ce sont des « coins continus ».

Vous ne pouvez pas les répliquer avec un simple .cornerRadius, et vous ne pouvez pas non plus utiliser les propres coins continus d'Apple, car il s'agit d'une API privée.

CALayer sur iOS 11 a une propriété "continueCorners" privée, ce qui alimente de nombreux coins arrondis dans SpringBoard - et probablement plus! Maintenant je suis jaloux.

https://twitter.com/argentumko/status/955773459463790592

Le plus proche que vous pouvez obtenir sans votre propre implémentation est le dessin de rectangle arrondi d'UIBezierPath, qui utilise _continuousRoundedRectBezierPath.


merci beaucoup, cela a tellement plus de sens maintenant
chriscrutt

1

Brad Ellis a un article détaillant les courbes sur l'iPhone X .

[..] Les coins arrondis de l'écran de l'iPhone X n'utilisent pas la méthode d'arrondi classique dans laquelle vous vous déplacez en ligne droite, puis effectuez un arc en utilisant un seul quadrant d'un cercle. Au lieu de cela, les mathématiques sont un peu plus compliquées. Communément appelée squircle, la pente commence plus tôt, mais est plus douce.

Vous pouvez voir la différence ici:

entrez la description de l'image ici


1

La ligne Objective-C suivante

NSLog(@"%@", [self traitCollection]);

exécuté dans le simulateur iOS 11.0.1 sur l'iPhone X produit la sortie suivante:

<UITraitCollection: ... _UITraitNameDisplayCornerRadius = 39.000000>

Il semble donc qu'à un moment donné, quelqu'un chez Apple pensait que le rayon du coin était de 39 points. Je suppose que c'est la réponse la plus officielle que nous obtiendrons. :-) Mais comme les autres réponses l'expliquent, ces informations ne sont pas très utiles ...

Des informations encore plus inutiles: certains autres simulateurs iOS 11.0 et 11.1 signalent _UITraitNameDisplayCornerRadius = 0.000000des iPhones sans coins arrondis (par exemple, voir cette question SO ), mais le simulateur pour iOS 12.2 n'inclut pas la _UITraitNameDisplayCornerRadiuspropriété dans la sortie du journal pour UITraitCollection, et un véritable iPhone X non plus exécutant iOS 11.2.1. Je suppose qu'ils ont supprimé cette propriété de la sortie du journal dans iOS 11.2.

PS: Je suppose que cela n'a pas d'importance, mais j'ai obtenu ces résultats sur Xcode 10.1.


1

La forme des coins ne peut pas être décrite comme un arc. Il peut cependant être reproduit à l'aide de l'API publique puisque iOS 11. UIBezierPath.init(roundedRect:cornerRadius:)créera un rectangle avec des coins arrondis continus.

Source: https://medium.com/fueled-engineering/continuous-rounded-corners-with-uikit-b575d50ab232

iOS 13 a introduit une cornerCurvepropriété explicite sur CALayer: https://developer.apple.com/documentation/quartzcore/calayercornercurve

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.