7

Starting with iOS 7, Apple have been using nicer rounded corners in visual elements such as icons. In iOS 11, these rounded corners are abundant in system UI elements, such as Control Center and many other places.

the cornerRadius APIs on eg CALayer etc are more basic.

Is there some API which gives you the nice new roundedness?

see for example this question: Draw iOS 7-style squircle programmatically

also see how the answers to the question are not good; a few years onwards, is there an Apple API which gives you this type of corner curve?

Marwen Doukh
  • 1,946
  • 17
  • 26
spinalwrap
  • 683
  • 1
  • 4
  • 17
  • 1
    What "roundedness" are you looking for that isn't accomplished with the tried and true `cornerRadius` of `CALayer`? – rmaddy Oct 14 '17 at 02:55
  • 3
    `cornerRadius` produces rounded rectangles, but you cannot create the kind of round rects as seen in control center; these UI elements use a different kind of rounded corners which have a smoother transition between the straight edges and the corner curve. I think the cornerRadius api basically just uses a quarter circle for the corner, but if you look closely at the modern elements, they are more complicated than that.. – spinalwrap Oct 14 '17 at 03:02
  • 1
    Idk exactly what values you'd supply, but have you tried using `UIBezierPath` + `CAShapeLayer`? – Michael Hulet Oct 14 '17 at 03:35
  • yeah the question is about the exact values though.... – spinalwrap Oct 14 '17 at 10:37
  • I've been doing some experimenting. It seems that the rounded rects shown in your screenshot from iOS 11 are actually plain old normal 90 degree corners. But, there is a subtle difference in the edge. The rounded corners seem to have a slight feathering in the transition from foreground to background color. But the shape is a normal rounded rectangle. So the trick will be getting the subtly different feathering. – rmaddy Oct 14 '17 at 21:28
  • no, they are not normal rounded rect corners. The difference is subtle, but it’s there - See for example the squircle link in my question. I haven’t found a solid implementation of this squircle/superellipse thing yet, still hoping there’s something direct from Apple which would adapt to the “official” curvature... – spinalwrap Oct 15 '17 at 05:31

1 Answers1

13

Now in iOS 13 and Xcode 11, you can use CALayerCornerCurve

Sample usage:

yourLayer.cornerCurve = CALayerCornerCurve.continuous
Ted
  • 22,696
  • 11
  • 95
  • 109