Thread by @vdbv

(1/9) How to make beautiful rounded corners in #SwiftUI, a thread:

(2/9) The easiest way to round corners of any SwiftUI view is to add a .cornerRadius modifier.
Here's how it looks like:

(3/9) It's okay at a first glance, but if you look closely, you may notice that it's more like two segments attached to each other rather than a single curve. If you don't see what I mean, try looking at the picture from afar or from the side.

(4/9) Now, let's use a .clipShape modifier, using a RoundedRectagle with .continuous corner style:

(5/9) This looks much better and more natural. The form of the curve resembles the way objects bend in real life.

Here I colored the .clipShape option yellow and put it on top of the .cornerRadius option, which is still blue. The difference is now prominent:

(6/9) Here's an animation of how these buttons transition into each other which also helps to see the difference (if the quality is poor, blame Twitter!):

(7/9) I don't know what's the performance cost of .clipShape compared to .cornerRadius, but if I had to guess, it should be negligible unless you have a lot of views with rounded corners on screen.

(8/9) After reading this thread, you'll probably start noticing imperfectly rounded corners everywhere: sorry about that!

(9/9) Conclusion: whenever possible, instead of .cornerRadius use a .clipShape with a RoundedRectangle that has a .continuous style, and your rounded corners will look gorgeous.

Here's the code I used for the thread: gist.github.com/vadimbelyaev/1…

Have fun with #SwiftUI!