나는 실험을 해왔고 iPhone X에 대한 결정적인 코너 반경을 찾지 못했습니다.
- iPhone X Screen Demystified-PaintCode 와 같은 일부 소스 는 40pt라고 말합니다.
- 일부 는 iPhone X 용 UI 디자인 : Top Elements 및 Notch-Max Rudberg와 같이 44 세라고 말합니다 .
Xcode를 사용하여 너비와 길이가 80 (반지름 40) 인 원을 만들고 iPhone X의 왼쪽 상단 모서리에 넣습니다 (x와 y는 0) 원 사이에 작은 흰색 간격이 있습니다. 화면 가장자리는 다음과 같습니다.
나는 또한 버튼으로 이것을하는 다른 방법을 시도했다.
button.frame.size.height = 812
button.frame.size.width = 375
button.layer.cornerRadius = 40
button.center = self.view.center
이것으로 나는 남아 있습니다 :
문제는 실제 코너 반경은 얼마입니까? 아니면 Xcode는 어떻게됩니까?
답변
아이폰 X 코너는하지 않습니다 이 결정적인 코너 반경. 그들은 정상적인 호가 아니며 ‘ 연속 구석 ‘입니다.
간단한 .cornerRadius로 복제 할 수 없으며 개인 API이므로 Apple 자체의 연속 모서리를 사용할 수도 없습니다.
iOS 11의 CALayer에는 개인 “continuousCorners”속성이 있으며 이는 SpringBoard의 많은 둥근 모서리를 가능하게합니다. 이제 질투합니다.
https://twitter.com/argentumko/status/955773459463790592
자신의 구현없이 얻을 수있는 가장 가까운 것은 UIBezierPath의 둥근 사각형 그리기 _continuousRoundedRectBezierPath
입니다.
답변
브래드 엘리스 (Brad Ellis) 는 아이폰 X의 곡선을 자세히 기술 한 기사를 가지고 있다 .
[..] iPhone X 둥근 화면 모서리는 직선으로 이동 한 다음 단일 사분면을 사용하여 호를 그리는 고전적인 둥근 방법을 사용하지 않습니다. 대신 수학은 좀 더 복잡합니다. 일반적으로 다람쥐라고 불리는이 슬로프는 더 빨리 시작되지만 더 완만합니다.
여기서 차이점을 볼 수 있습니다.
답변
다음 Objective-C 라인
NSLog(@"%@", [self traitCollection]);
iPhone X의 iOS 11.0.1 시뮬레이터에서 실행하면 다음과 같은 출력이 생성됩니다.
<UITraitCollection: ... _UITraitNameDisplayCornerRadius = 39.000000>
그것에서 보이는 그래서 어느 시점 시간에, 누군가 애플은 코너 반경이 39 점을 생각했다. 이것이 가장 공식적인 답변이라고 생각합니다 . 🙂 그러나 다른 답변이 설명 하듯이 그 정보는별로 유용하지 않습니다 …
더 쓸모없는 정보 : 다른 iOS 11.0 및 11.1 시뮬레이터는 _UITraitNameDisplayCornerRadius = 0.000000
둥근 모서리가없는 iPhone에 대해 보고 하지만 (예 : 이 SO 질문 참조 ) iOS 12.2 용 시뮬레이터는 에 대한 로그 출력에 속성을 포함 하지 않으며 실제 iPhone X도 마찬가지입니다. iOS 11.2.1을 실행 중입니다. iOS 11.2 정도의 로그 출력 에서이 속성을 제거했다고 생각합니다._UITraitNameDisplayCornerRadius
UITraitCollection
추신 : 그것은 중요하지 않다고 생각하지만 Xcode 10.1에서 이러한 결과를 얻었습니다.
답변
모서리의 모양은 호로 설명 할 수 없습니다. 그러나 iOS 11 UIBezierPath.init(roundedRect:cornerRadius:)
은 연속 둥근 모서리가있는 사각형을 생성 하므로 공개 API를 사용하여 재생할 수 있습니다 .
출처 : https://medium.com/fueled-engineering/continuous-rounded-corners-with-uikit-b575d50ab232
iOS 13 cornerCurve
은 CALayer에 명시 적 속성을 도입했습니다 : https://developer.apple.com/documentation/quartzcore/calayercornercurve