Circular image view in SwiftUI

In this SwiftUI tutorial, We will learn how to make a circular image view in SwiftUI. It’s quite easy to do this. We only have to use two SwiftUI modifiers which are the .frame modifier and the cornerRadius modifier and a little logic.

What this blog will cover

• Circular image view
• Corner Radius

We’ll be giving equal width and height to the image view and a corner radius equal to half its height. This will turn the simple image view into the circular image view

Let’s see how we make a circular image view in SwiftUI.

struct ContentView: View{
    
    var body: some View{
        
        VStack{
            
            Image("dark_background")
                .resizable()
                .frame(width:200,height:200)
             
            Text(".~ My Circular Image View ~.")
                .foregroundColor(Color("AccentColor"))
                .font(.headline)
            
            Text("~. ___________________________ .~")
                .foregroundColor(Color("Maroon"))
            
        }
    }
}

So this is how our main view, ContentView, of the application currently looks like. We have given equal width and height to the image view using a frame modifier.

Never forget to give the image view a resizable modifier. As For modifying the image in SwiftUI we always have to give the resizable modifier. The image won’t be modified without this modifier.

Now let’s give the image view a corner radius equal to half its size using the cornerRadius modifier. It will give the image view a round shape.

struct ContentView: View{
    
    var body: some View{
        
        VStack{
            
            Image("dark_background")
                .resizable()
                .frame(width:200,height:200)
                .cornerRadius(100).padding() // height/2
            
            Text(".~ My Circular Image View ~.")
                .foregroundColor(Color("AccentColor"))
                .font(.headline)
            
            Text("~. ___________________________ .~")
                .foregroundColor(Color("AccentColor"))
            
        }
    }
}