How to apply rounded corners to a UIKit or SwiftUI view

In user interface design, rounded corners have become increasingly popular as a way to soften the look of elements and create a more pleasing visual experience. Rounded corners can be applied to a variety of elements, including buttons, images, and views, and can be used in both UIKit and SwiftUI.

Applying rounded corners to a UIKit view

In UIKit, there are several ways to apply rounded corners to a view. One common way is to use the cornerRadius property of the layer object. The cornerRadius property sets the radius of the view’s corners, and can be used to create a rounded rectangle or oval shape.

To apply rounded corners to a view in UIKit, first create an instance of the view and add it to the view hierarchy. Then, access the layer property of the view and set the cornerRadius property to the desired value. For example, to create a view with rounded corners with a radius of 10 pixels, you could use the following code:

let myView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
myView.layer.cornerRadius = 10

You can also set the cornerRadius property to a value that is half the width or height of the view to create a circular shape:

myView.layer.cornerRadius = myView.frame.width / 2

This will create a circular view with a diameter equal to the width of the view.

In addition to the cornerRadius property, you can also set other properties of the layer object to customize the appearance of the rounded corners. For example, you can set the borderWidth and borderColor properties to add a border around the view with rounded corners:

myView.layer.borderWidth = 1
myView.layer.borderColor = UIColor.black.cgColor

This will add a 1 pixel black border around the view with rounded corners.

Applying rounded corners to a SwiftUI view

In SwiftUI, applying rounded corners to a view is even simpler than in UIKit. SwiftUI provides the cornerRadius modifier, which can be used to set the radius of a view’s corners:

Text("Hello, world!")
    .padding()
    .background(Color.blue)
    .cornerRadius(10)

This code creates a blue background with rounded corners on a text view with a radius of 10 pixels.

You can also use the clipShape modifier to clip the view to a specific shape. For example, you can create a circular shape by using a Circle shape and applying it as the clipShape:

Text("Hello, world!")
    .padding()
    .background(Color.blue)
    .clipShape(Circle())

This code creates a circular background on a text view with a blue background.

Conclusion

In summary, applying rounded corners to a view is a simple way to enhance the visual appeal of user interface elements. In both UIKit and SwiftUI, you can use properties or modifiers to set the radius of a view’s corners and create rounded rectangles or circular shapes. Experiment with different values and combinations of properties to create unique and visually appealing designs.