Was ist der endgültige iPhone X-Eckenradius?


10

Ich habe experimentiert und keinen eindeutigen Eckenradius für das iPhone X gefunden.

Mit Xcode habe ich einen Kreis mit einer Breite und Länge von 80 (also Radius 40) erstellt und ihn in die obere linke Ecke des iPhone X gelegt (also sind x und y Null). Zwischen dem Kreis befindet sich eine winzige weiße Lücke und der Rand des Bildschirms, den Sie hier sehen können:

Ich habe auch eine andere Methode ausprobiert, indem ich dies mit einem Knopf tat:

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

Damit bleibt mir übrig:

Die Frage ist also, was ist der tatsächliche Eckenradius? Oder was ist mit Xcode los?

Antworten:


15

iPhone X Ecken nicht haben eine schlüssige Eckenradius. Sie sind keine normalen Bögen, sondern " durchgehende Ecken ".

Sie können diese nicht mit einem einfachen .cornerRadius replizieren und Sie können auch nicht Apples eigene durchgehende Ecken verwenden, da dies eine private API ist.

CALayer unter iOS 11 verfügt über eine private "ContinuousCorners" -Eigenschaft, die viele abgerundete Ecken in SpringBoard antreibt - und wahrscheinlich noch mehr! Jetzt bin ich eifersüchtig.

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

Der nächste, den Sie ohne Ihre eigene Implementierung erreichen können, ist die abgerundete Rechteckzeichnung von UIBezierPath, die verwendet wird _continuousRoundedRectBezierPath.


Vielen Dank, das macht jetzt so viel mehr Sinn
Christopher Cruttenden

1

Brad Ellis hat einen Artikel detailliert die Kurven auf dem iPhone X .

[..] Abgerundete iPhone X-Bildschirmecken verwenden nicht die klassische Rundungsmethode, bei der Sie sich in einer geraden Linie bewegen und dann mit einem einzelnen Quadranten eines Kreises biegen. Stattdessen ist die Mathematik etwas komplizierter. Im Allgemeinen als Kreis bezeichnet, beginnt der Hang früher, ist aber sanfter.

Sie können den Unterschied hier sehen:

Geben Sie hier die Bildbeschreibung ein


1

Die folgende Objective-C-Zeile

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

Die Ausführung im iOS 11.0.1-Simulator auf dem iPhone X erzeugt die folgende Ausgabe:

<UITraitCollection: ... _UITraitNameDisplayCornerRadius = 39.000000>

So ist es wie bei sieht irgendwann in der Zeit, jemand bei Apple dachte der Eckenradius 39 Punkte waren. Ich denke, das ist die offiziellste Antwort, die wir bekommen werden. :-) Aber wie die anderen Antworten erklären, sind diese Informationen nicht sehr nützlich ...

Noch mehr nutzlose Informationen: Einige andere iOS 11.0 und 11.1 Simulatoren berichten _UITraitNameDisplayCornerRadius = 0.000000für iPhones ohne abgerundete Ecken (siehe zB diese Frage SO ), aber der Simulator für iOS 12.2 ist nicht enthalten die _UITraitNameDisplayCornerRadiusEigenschaft in der Protokollausgabe für UITraitCollection, genauso wenig wie ein echtes iPhone X Ausführen von iOS 11.2.1. Ich denke, sie haben diese Eigenschaft aus der Protokollausgabe in iOS 11.2 oder so entfernt.

PS: Ich denke, es spielt keine Rolle, aber ich habe diese Ergebnisse auf Xcode 10.1 erhalten.


1

Die Form der Ecken kann nicht als Bogen beschrieben werden. Es kann jedoch mit der öffentlichen API reproduziert werden, da iOS 11. UIBezierPath.init(roundedRect:cornerRadius:)ein Rechteck mit durchgehenden abgerundeten Ecken erstellt.

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

iOS 13 hat eine explizite cornerCurveEigenschaft in CALayer eingeführt: https://developer.apple.com/documentation/quartzcore/calayercornercurve

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.