CODEWITHSUNDEEP
swiftswiftui
GettingStarted
GettingStarted

Reputation: 7625

How do I remove the white border in my SwiftUI app?

I am learning Swift and my first assignment is to make UI that looks like an employee ID card.

//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image("employeeID")
                .clipShape(Circle())
                .shadow(radius: 10.0)
                .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
                .border(Color.red, width: 0)
            Color.red
                .edgesIgnoringSafeArea(.all)
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

employeeID is just a picture I grabbed from Google Images for testing.

my goal is to make the UI look like

https://www.behance.net/gallery/28292701/Cool-Office-Badge-for-team-mates

Screenshot of Xcode

Upvotes: 1

Views: 2471

Answers (1)

sfung3
sfung3

Reputation: 2377

You can add a ZStack with the background and the image inside.

        ZStack (alignment: .top){
            Color.red
                .edgesIgnoringSafeArea(.all)
            Image("employeeID")
                .clipShape(Circle())
                .shadow(radius: 10.0)
                .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
                .border(Color.red, width: 0)
                .fixedSize()
        }

If you want to add the name/title to the view, wrap the Image in a VStack and add the text.

Result:

enter image description here

Upvotes: 1

Related Questions