¿Cuál es el radio de esquina definitivo del iPhone X?


10

He estado experimentando y no he encontrado un radio de esquina concluyente para el iPhone X.

Usando Xcode, creé un círculo con un ancho y una longitud de 80 (entonces radio 40), y lo puse en la esquina superior izquierda del iPhone X (para que x e y sean cero), hay un pequeño espacio blanco entre el círculo y el borde de la pantalla, que puedes ver aquí:

También probé otro método, haciendo esto con un botón:

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

Con esto me queda:

Entonces la pregunta es, ¿cuál es el radio de la esquina real? ¿O qué está pasando con Xcode?

Respuestas:


15

Las esquinas del iPhone X no tienen un radio de esquina concluyente. No son arcos normales, son ' esquinas continuas '.

No puede replicarlos con un simple .cornerRadius, y tampoco puede usar las esquinas continuas de Apple, ya que es una API privada.

CALayer en iOS 11 tiene una propiedad privada de "Esquinas continuas", que es lo que impulsa muchas esquinas redondeadas en SpringBoard, ¡y probablemente más! Ahora estoy celosa.

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

Lo más cercano que puede llegar sin su propia implementación es el dibujo de rectángulo redondeado de UIBezierPath, que utiliza _continuousRoundedRectBezierPath.


Gracias tanto esto hace mucho más sentido ahora
chriscrutt

1

Brad Ellis tiene un artículo que detalla las curvas en el X iPhone .

[..] Las esquinas redondeadas de la pantalla del iPhone X no usan el método clásico de redondeo en el que te mueves en línea recta y luego haces un arco usando un solo cuadrante de un círculo. En cambio, las matemáticas son un poco más complicadas. Comúnmente llamado ardilla, la pendiente comienza antes, pero es más suave.

Puedes ver la diferencia aquí:

ingrese la descripción de la imagen aquí


1

La siguiente línea de Objective-C

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

ejecutado en el simulador iOS 11.0.1 en el iPhone X produce el siguiente resultado:

<UITraitCollection: ... _UITraitNameDisplayCornerRadius = 39.000000>

Parece que en algún momento, alguien en Apple pensó que el radio de la esquina era de 39 puntos. Supongo que esa es la respuesta más oficial que obtendremos. :-) Pero como explican las otras respuestas, esa información no es muy útil ...

Aún más información inútil: algunos otros simuladores de iOS 11.0 y 11.1 informan _UITraitNameDisplayCornerRadius = 0.000000para iPhones sin esquinas redondeadas (por ejemplo, vea esta pregunta SO ), pero el simulador para iOS 12.2 no incluye la _UITraitNameDisplayCornerRadiuspropiedad en la salida del registro UITraitCollection, y tampoco lo hace un iPhone X real ejecutando iOS 11.2.1. Supongo que eliminaron esta propiedad de la salida del registro en iOS 11.2 más o menos.

PD: Supongo que no importa, pero obtuve estos resultados en Xcode 10.1.


1

La forma de las esquinas no puede describirse como un arco. Sin embargo, puede reproducirse utilizando una API pública ya que iOS 11. UIBezierPath.init(roundedRect:cornerRadius:)creará un rectángulo con esquinas redondeadas continuas.

Fuente: https://medium.com/fueled-engineering/continuous-itated-corners-with-uikit-b575d50ab232

iOS 13 introdujo una cornerCurvepropiedad explícita en CALayer: https://developer.apple.com/documentation/quartzcore/calayercornercurve

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.