How to clip a view so only part is visible

About 2 min

How to clip a view so only part is visible 관련

SwiftUI by Example

Back to Home

How to clip a view so only part is visible | SwiftUI by Example

How to clip a view so only part is visible

Updated for Xcode 15

SwiftUI lets you clip any view to control its shape, all by using the clipShape() modifier.

For example this creates a button using the system image “bolt.fill” (a filled lightning bolt), gives it some padding and a background color, then clips it using a circle so that we get a circular button:

Button {
    print("Button was pressed!")
} label: {
    Image(systemName: "bolt.fill")
        .foregroundStyle(.white)
        .padding()
        .background(.green)
        .clipShape(Circle())
}

Download this as an Xcode projectopen in new window

A white lightning bolt icon inside a green circle.

The Circle clip shape will always make circles from views, even if their width and height are unequal – it will just crop the larger value to match the small.

As well as Circle there’s also Capsule, which crops a view to have rounded corners in a lozenge shape. For example, this creates the same button using a capsule shape:

Button {
    print("Pressed!")
} label: {
    Image(systemName: "bolt.fill")
        .foregroundStyle(.white)
        .padding(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
        .background(.green)
        .clipShape(Capsule())
}