CODEWITHSUNDEEP
swiftuicornerradius
TheNeil
TheNeil

Reputation: 3742

SwiftUI: How to Get a View with Perfectly Rounded Corners

With UIKit, it's possible to give a control (e.g. a button) perfectly rounded corners (resulting in a circle on each side) by using this approach:

exampleButton.cornerRadius = exampleButton.frame.size.height/2

How does one achieve the same result with a SwiftUI view?

Because the views are defined more on the fly, I'm not sure how it would be possible to reference that frame size unless it's being set manually (which isn't the desire here).

Button(action: {
    // ...
}) {
    Text("I'm a Button")
}
.cornerRadius(???)

Upvotes: 17

Views: 13487

Answers (5)

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119224

✅ Just .mask it with any view you like!

.mask(Capsule()) // 👈 To make it rounded as you asked

Demo

💡What is The difference between the mask and the clipShape modifier

The mask modifier takes a View as the input! This lets you build complex views, animated views, etc. and use them as the mask which are not possible with the clipShape modifier!

Take a look at this simple example:

.mask(Image(systemName: "star.fill").font(.largeTitle)) // 👈 The input is a `view` here and not a shape!

Demo 2

Upvotes: 2

JNL
JNL

Reputation: 11

Another solution is to use geometry reader which will take the height or width of the screen and allow you to divide, multiply subtract or add from it.

Using the example, it would be like this:

GeometryReader { Geometry in
  Button(action: {
    // ...
  }) {
    Text("I'm a Button")
  }
  .cornerRadius(geometry.size.width / 2)
}

It is the most similar to frame.size.height.

Upvotes: 0

Mike McCartin
Mike McCartin

Reputation: 179

Working in XCode 12.4

For anyone who found this question trying to find out how to make a button with rounded corners (whether completely round like a capsule or not):

            Button(action: {
                // Do whatever
            }) {
                Spacer()
                Text("Log In")
                    .font(.title2)
                    .padding()
                    .foregroundColor(.white)
                Spacer()
            }
            .background(Color(UIColor.systemBlue))
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .padding()

No need to fuss around with overlay shapes.

Rounded Button

Upvotes: 3

d9rad
d9rad

Reputation: 2167

Another solution to this is to use shapes, in this case the Capsule shape, and use the clipShape modifier

Taking the example already mentioned, it would be like this:

Button(action: {
// ...
}) {
Text("I'm a Button")
    .padding(.horizontal, 10)
    .background(Color.red)
    .clipShape(Capsule())
}

The padding in there can be adjusted so that your view looks how you want it to. The point it that capsule will always have the ends perfectly rounded. In this case I didn't want the text to be too close to the rounded edges, so I applied some padding to the sides.

A note to remember is that in SwiftUI the order the modifiers are applied in is very important.

Upvotes: 36

Bartosz
Bartosz

Reputation: 388

You need to define it as a square and then put rounding on corners, like this:

Button(action: {
// ...
}) {
Text("I'm a Button")
    .frame(width:150, height:150)
    .background(Color.red)
    .cornerRadius(.infinity)

}

PS. Added some background color for visibility

Upvotes: 8

Related Questions