Question 66884 in IOS Swift Question posted in
The official documentation can be found here.

How to give different colours to inner and outer border in SwiftUI? – Ios swift

I am trying to create a border like the one shown in the image. As can be seen, the outer and inner parts of the border have different colours. I tried to create this using .stroke and overlaying another on top of it but that did not work:

.overlay( 
 RoundedRectangle(cornerRadius: 4)
 .stroke(.gray.opacity(0.5), lineWidth: 4)
 .overlay (
   RoundedRectangle(cornerRadius: 8)
   .stroke(.black.opacity(1), lineWidth: 1))
)

How can I achieve this effect in SwiftUI?

Image of the border I am trying to replicate

Tags:

2

Answers


  1. 0

    Agreed with Nathan, and you’ll need to adjust your corner radius as well to so they match up as one will be on the outer perimeter of the other. That said, you can add the behavior in this code snippet where I moved the black outer line out one level:

        import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(.gray.opacity(0.5), lineWidth: 20)
        )
        .padding()
        .overlay (
            RoundedRectangle(cornerRadius: 30)
                .stroke(.black.opacity(1), lineWidth: 10))

    }
}

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

    That said, you can also look at this article by Anmol Maheshwari n the SwiftUI forum on Medium a couple of years ago:

    https://medium.com/swiftui-forum/rounded-corners-with-gradient-and-border-5858590fc9d3

    Login or Signup to reply.
  2. 0 
    struct DemoView: View {
    let buttonHeight: CGFloat = 32
    let buttonWidth: CGFloat = 200
    let lineWidth: CGFloat = 4

    var body: some View {
        ZStack {
            HStack {
                Text("select")
                Spacer()
                Image(systemName: "chevron.down")
                    .foregroundColor(BbloxUI.Color.grey3)
            }
            .foregroundColor(Color.green)
            .padding(8)
            .frame(width: buttonWidth, height: buttonHeight)
            .background(Color.clear)
            .overlay(
                RoundedRectangle(cornerRadius: 4)
                    .stroke(Color.purple, lineWidth: lineWidth)
            )
        }
        .frame(width: buttonWidth + lineWidth, height: buttonHeight + lineWidth)
        .overlay(
            RoundedRectangle(cornerRadius: 4)
                .stroke(Color.green, lineWidth: lineWidth)
        )
    }
}

    OR you can replace .frame(width: buttonWidth + lineWidth, height: buttonHeight + lineWidth) with .Padding(lineWidth)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search