SwiftUI ClipShape: Shape Your Application

clipShape is a SwiftUI modifier that allows developers to define a shape that clips a view to shape it. This means that the view will be confined to the defined shape. You can create anything from circles to rectangles, it’s up to you.

In this post you will learn about ClipShape in SwiftUI. You will learn how to implement them and we will also cover the different shapes available.

SwiftUI ClipShape example

The best place to start any great tutorial is with a basic example, so let’s begin with a basic example of how to use the .clipShape modifier.

In the following example we will use .clipShape modifier to create a circle shape:

import SwiftUI

struct ClipShapeView: View {
    var body: some View {
        
        VStack {
            
        }
        .frame(width: 200, height: 200)
        .background(Color.red)
        .clipShape(.circle)
    }
}

The result:

How to make rounded corners in SwiftUI?

To create rounded corners in SwiftUI you should deffently use the .clipShape modifier. As you can see in the example above, you can use RoundedRectangle and set the cornerRadius. Use the cornerRadius to adjust how round the corners should be.

In the following example, we will create a VStack with rounded corners with the cornerRadius set to 40:

import SwiftUI

struct ClipShapeView: View {
    var body: some View {
        
        VStack {
            Text("Rounded corners")
                .bold()
                .font(.title)
        }
        .frame(width: 290, height: 150)
        .background(Color.red)
        .clipShape(RoundedRectangle(cornerRadius: 40))
    }
}

The result:

Different shapes to use in clipShape

SwiftUI provides various different shapes we can choose from.

 To be excat there are 6 different shapes in SwiftUI.

 In the following section you will find the different shapes you can chose from.

Rectangle

In the following example we create a VStack with a red background and a rectangle shape:

import SwiftUI

struct ClipShapeView: View {
    var body: some View {
        
        VStack {
            Text("Rounded corners")
                .bold()
                .font(.title)
        }
        .frame(width: 290, height: 150)
        .background(Color.red)
        .clipShape(Rectangle())

    }
}

The result:

RoundedRectangle

 The rounded rectangle is property the most used shape and in this example we create a VStack with a red background and rounded conors:

import SwiftUI

struct ClipShapeView: View {
    var body: some View {
        
        VStack {
            Text("Rounded corners")
                .bold()
                .font(.title)
        }
        .frame(width: 290, height: 150)
        .background(Color.red)
        .clipShape(RoundedRectangle(cornerRadius: 20))
    }
}

The result:

Ellipse

 In this example we create a VStack with a red background and with a ellipse shape:

import SwiftUI

struct ClipShapeView: View {
    var body: some View {
        
        VStack {
            Text("Rounded corners")
                .bold()
                .font(.title)
        }
        .frame(width: 290, height: 150)
        .background(Color.red)
        .clipShape(Ellipse())
    }
}

The result:

Capsule

import SwiftUI

struct ClipShapeView: View {
    var body: some View {
        
        VStack {
            Text("Rounded corners")
                .bold()
                .font(.title)
        }
        .frame(width: 290, height: 150)
        .background(Color.red)
        .clipShape(Capsule())
    }
}

 In this example we create a VStack with a red background and with a circle shape:

UnevenRoundedRectangle

 The uneven rounded rectangle is like the RoundedRectangle, but where only some of the conors is rounded.

 In the following example we will create a VStack where the top right cornor is rounded and the bottom left cornor is rounded:

import SwiftUI

struct ClipShapeView: View {
    var body: some View {
        
        VStack {
            Text("Rounded corners")
                .bold()
                .font(.title)
        }
        .frame(width: 290, height: 150)
        .background(Color.red)
        .clipShape(UnevenRoundedRectangle(bottomLeadingRadius: 10, topTrailingRadius: 10))
    }
}

The result:

Wrap ClipShape in SwiftUI

The ClipShape is a powerful tool to create different shapes in your application. Apple has also made it easy to use and create various shapes.

In this post, we covered how to use the .clipShape modifier and as you should see — it is not difficult and quite straightforward to use.

I hope you can use this in your project — happy coding :-

Scroll to Top