How to Create Stunning UI with SwiftUI Rounded Rectangle

How do you make your app look modern and clean?

With SwiftUI, it's easier than you think! One of the best tools for sleek designs is the SwiftUI Rounded Rectangle.

This versatile shape lets you create smooth corners and polished layouts in just a few steps. From buttons to custom views, it’s perfect for adding style and personality to your app.

Let’s explore how to use it and bring your UI ideas to life! 🎨

Understanding Rounded Rectangle in SwiftUI

The RoundedRectangle is one of SwiftUI's built-in shapes. It is designed to help you add a rectangular shape with smoothly curved edges. This shape adheres to the Shape protocol, making it versatile and easy to use with various modifiers such as fill, clipShape, and background.

At its core, a RoundedRectangle requires a corner radius to define how much the edges should be rounded. You can also customize its style, choosing between continuous or circular curves for the corners.

Key Parameters of RoundedRectangle

1. Corner Radius: Determines how rounded the corners appear.

2. Style: Specifies the rounding style – either .continuous for smooth curves or .circular for standard arcs.

Here's a basic example of creating a RoundedRectangle in SwiftUI:

1RoundedRectangle(cornerRadius: 25)
2    .fill(Color.blue)
3    .frame(width: 200, height: 100)

​

This code creates a blue rounded rectangle with a corner radius of 25, a width of 200, and a height of 100.

Customizing Corners with RoundedRectangle

While RoundedRectangle provides rounded edges for all corners, you may want to round specific corners for a more tailored look. In SwiftUI, you can achieve this using the clipShape modifier alongside the Path or Corners struct.

Here's how you can round specific corners:

1struct SpecificCornersView: View {
2    var body: some View {
3        Rectangle()
4            .fill(Color.green)
5            .frame(width: 150, height: 80)
6            .clipShape(RoundedCorner(radius: 20, corners: [.topLeft, .bottomRight]))
7    }
8}
9
10struct RoundedCorner: Shape {
11    var radius: CGFloat = 0
12    var corners: UIRectCorner = .allCorners
13
14    func path(in rect: CGRect) -> Path {
15        let path = UIBezierPath(
16            roundedRect: rect,
17            byRoundingCorners: corners,
18            cornerRadii: CGSize(width: radius, height: radius)
19        )
20        return Path(path.cgPath)
21    }
22}

​

In this example, you create a reusable custom shape, allowing you to round specific corners while leaving others untouched.

Enhancing Designs with Modifiers

SwiftUI modifiers are your best friends when working with RoundedRectangle. Modifiers like frame, background, padding, and clipShape enable you to design complex layouts with simplicity.

Applying a Background Modifier

You can use the background modifier to place a rounded rectangle behind your content:

1Text("Hello, Rounded Corners!")
2    .padding()
3    .background(
4        RoundedRectangle(cornerRadius: 15)
5            .fill(Color.pink)
6    )
7    .frame(width: 250, height: 100)

​

This example creates a text view with a padded rounded rectangle in the background.

Using the CornerRadius Modifier

Another method to apply rounded edges is through the cornerRadius modifier, ideal for views that don’t explicitly require the RoundedRectangle shape.

1Image(systemName: "star.fill")
2    .resizable()
3    .frame(width: 100, height: 100)
4    .cornerRadius(20)

​

Here, the image corners are rounded by applying a cornerRadius modifier directly, showcasing how versatile SwiftUI's modifier system can be.

Creating Responsive Layouts

To ensure that your rounded rectangle adapts seamlessly to different screen sizes, use the frame and padding modifiers effectively. For instance:

1RoundedRectangle(cornerRadius: 10)
2    .stroke(Color.gray, lineWidth: 2)
3    .padding()
4    .frame(maxWidth: .infinity, maxHeight: 200, alignment: .center)

​

This approach keeps the rectangular shape responsive while maintaining proper spacing.

Practical Use Cases of Rounded Rectangles

1. Buttons: A button with rounded edges improves visual appeal and usability:

1Button(action: {}) {
2    Text("Rounded Button")
3        .padding()
4        .background(RoundedRectangle(cornerRadius: 12).fill(Color.blue))
5        .foregroundColor(.white)
6}

​

2. Card Views: Use rounded corners to create clean and modern card layouts.

1VStack {
2    RoundedRectangle(cornerRadius: 15)
3        .fill(Color.white)
4        .shadow(radius: 5)
5        .frame(width: 300, height: 150)
6        .padding()
7    Text("Card Content Here")
8}

​

3. Profile Images: Combine clipShape with RoundedRectangle to enhance profile pictures.

Wrapping Up!

In SwiftUI, the RoundedRectangle offers a flexible and visually appealing way to incorporate rounded corners into your designs. Whether working with built-in shapes or using advanced customization to round specific corners, the SwiftUI Rounded Rectangle empowers you to create clean, modern, and highly customizable interfaces.

By mastering tools like the clipShape, background, and cornerRadius modifiers, you can design layouts that not only look great but also align with modern UI trends. Experiment with these tools in your projects to see how small changes, like adjusting the corner radius or adding a background modifier, can dramatically enhance your app’s appearance.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.