SwiftUI Custom Navigation Bar with Rounded bottom edges and items

user_9109774 0
Viewed 376

I have searched all over stackoverflow for a solution but I haven't found one.

The desired goal as described in the title is this:

enter image description here

The desired color as we can see is also gradient.

I also wonder if it is possible to also display an image on the right side of the navigation bar whenever I wanted to show it ( sometimes i want to show an image and sometimes i dont)

I know that i have to use UIKIT in order to create something like this but i have not found a solution where i can make the bottom edges of the navigation bar rounded.

swiftui swift xcode uikit ios
1 Answers

no need to use UIKit in that you can use native SwiftUI using Path drawing to make a view like that and keep a note to hide the default navigation view title and view and use the code below you also can customize the view depending on your needs

  struct ContentView: View {


   var body: some View {
    ZStack {
        
        CustomShapeNav().fill(
            LinearGradient(gradient: Gradient(colors: [.green, .blue]), 
        startPoint: .top, endPoint: .bottom)
            // use gradient color here
        ).shadow(color: Color(#colorLiteral(red: 0.4745098039, green: 
        0.4745098039, blue: 0.4745098039, alpha: 1)), radius: 
        15).ignoresSafeArea()
        Button {
            print("Button was tapped")
        } label: {
            Image(systemName: "chevron.backward")
                .padding()
                .foregroundColor(.black)
          }.position(x: 40, y: 40)
         }.frame(width: 700, height: 300, alignment: .center)
         }
         }


 //Define the custom navigation using path drawing and make struct confirming to Shape 
struct CustomShapeNav: Shape {
   func path(in rect: CGRect) -> Path {
    Path { path in
        path.move(to: CGPoint(x: 0, y: 0)) // start point from 0 x-axis & 0 y-axis
        path.addLine(to: CGPoint(x: rect.maxX , y: 0)) // draw line max x-axis & 0 y-axis
        path.addLine(to: CGPoint(x: rect.maxX, y: 50)) // draw line max x-axis & 50 y-axis
        path.addLine(to: CGPoint(x: 0, y: 50))  // draw line 0 x-axis & 50 y-axis
        path.move(to: CGPoint(x: 0, y: 50)) // make the start point 0,50 instead of 0,0
        path.addQuadCurve(to: CGPoint(x: 90, y: 90), control: CGPoint(x: 
        0, y: 85)) // add curve to point 90,90 and make the point of curve 0,85
        path.addLine(to: CGPoint(x: rect.maxX - 90, y: 90))  // draw line -90 x-axis & 90 y-axis
        path.addQuadCurve(to: CGPoint(x: rect.maxX, y: 50), control: CGPoint(x: rect.maxX, y: 85))
        // add curve to point max x-axis and 50 and make the point of curve max x-axis and 85
        
        }
        }
        }

and the navigation bar will be like that view enter image description here

user_145821080
Related