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

Ios swift – How do I create a bottom border for a Rectangle with cornerRadius in SwiftUI?

I want text field bottom border as the below design

enter image description here

My Code

    ZStack {
    RoundedRectangle(cornerRadius: 6)
    .fill(LinearGradient(colors: [Color("#B37CFA").opacity(0.5),Color("#2A5389").opacity(0.5),Color("#2DB854").opacity(0.5)], startPoint: .leading, endPoint: .trailing))
    .frame(height: 50)
    .mask(
        Rectangle()
        .frame(height: 20)
        .cornerRadius(10, corners: [.bottomLeft, .bottomRight])
         )
        }

Outputenter image description here

Tags:

2

Answers


  1. 0

    Using blendMode and compositingGroup modifiers:

    ZStack {
    RoundedRectangle(cornerRadius: 10)
        .fill(
            LinearGradient(
                colors: [.red, .green,.blue],
                startPoint: .leading,
                endPoint: .trailing
            )
        )

    RoundedRectangle(cornerRadius: 10)
        .offset(y: -4)
        .blendMode(.destinationOut)
}
.frame(height: 50)
.compositingGroup()

    Demo

    Login or Signup to reply.
  2. 0

    This is easy once you realise that it is not a border, but just two rounded rectangles on top of each other, with a small offset at the bottom.

    Simple extension to support hex values:

    extension Color {
    init(_ value: Int) {
        let r = Double((value >> 16) & 0xFF) / 0xFF
        let g = Double((value >>  8) & 0xFF) / 0xFF
        let b = Double((value >>  0) & 0xFF) / 0xFF
        self.init(red: r, green: g, blue: b)
    }
}

    And this is how you could create the design:

    ZStack {
    let foreground = LinearGradient(
        colors: [Color(0xB37CFA).opacity(0.5),
                 Color(0x0A5389).opacity(0.5),
                 Color(0x2DB854).opacity(0.5)],
        startPoint: .leading,
        endPoint: .trailing)
    
    let background = LinearGradient(
        colors: [Color(0x232955),
                 Color(0x211342)],
        startPoint: .leading,
        endPoint: .trailing)
    
    RoundedRectangle(cornerRadius: 6)
        .fill(background)
        .frame(height: 50)
    
    RoundedRectangle(cornerRadius: 6)
        .fill(foreground)
        .frame(height: 48)   // compensate for bottom offset
        .padding(.bottom, 2) // bottom offset to show background
    
    HStack {
        Image(systemName: "key.horizontal")
            .foregroundStyle(.white)
            .scaleEffect(x: -1, anchor: .center)
            .padding(.leading)
        
        TextField("",
                  text  : $text,
                  prompt: Text("YouTube Stream Key")
                              .foregroundColor(.init(0xBBBBBB)))
            .foregroundColor(.white)
    }
    
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search