How can i make a custom tabbar like in the image. I have made a view, similar to that, but i want to add a little bend after the curve to make it smooth line bending. I have attached the link for the better understanding of my question.

struct TabbarShape: View {
    
    //MARK: - VARIABLES -
    
    //Normal
    let width = UIScreen.main.bounds.width
    let height: CGFloat = 75
    let curvedRadius: CGFloat = 37
    let centerX = UIScreen.main.bounds.width / 2
    
    //MARK: - VIEWS -
    var body: some View {
        Path { path in
            let width = self.width
            let height = self.height
            let centerX = self.centerX
            let curveRadius = self.curvedRadius
            
            // Start at top-left corner
            path.move(to: CGPoint(x: 0, y: 0))
            
            // Top-right corner
            path.addLine(to: CGPoint(x: width, y: 0))
            
            // Bottom-right corner
            path.addLine(to: CGPoint(x: width, y: height))
            
            // Right side of the curve
            path.addLine(to: CGPoint(x: centerX + curveRadius + 20, y: height))
            
            // Curve cutout
            path.addCurve(
                to: CGPoint(x: centerX - curveRadius - 20, y: height), // End of the curve
                control1: CGPoint(x: centerX + curveRadius, y: height - 60), // First control point (pulls the curve down)
                control2: CGPoint(x: centerX - curveRadius, y: height - 60)  // Second control point (pulls the curve up)
            )
            
            // Left side of the curve
            path.addLine(to: CGPoint(x: 0, y: height))
            
            // Close the path
            path.addLine(to: CGPoint(x: 0, y: 0))
        }
        .fill(Color.black)
        //        .shadow(color: .gray.opacity(0.3), radius: 10,
    }
}

How can i make a custom tabbar like in the image. I have made a view, similar to that, but i want to add a little bend after the curve to make it smooth line bending. I have attached the link for the better understanding of my question.

struct TabbarShape: View {
    
    //MARK: - VARIABLES -
    
    //Normal
    let width = UIScreen.main.bounds.width
    let height: CGFloat = 75
    let curvedRadius: CGFloat = 37
    let centerX = UIScreen.main.bounds.width / 2
    
    //MARK: - VIEWS -
    var body: some View {
        Path { path in
            let width = self.width
            let height = self.height
            let centerX = self.centerX
            let curveRadius = self.curvedRadius
            
            // Start at top-left corner
            path.move(to: CGPoint(x: 0, y: 0))
            
            // Top-right corner
            path.addLine(to: CGPoint(x: width, y: 0))
            
            // Bottom-right corner
            path.addLine(to: CGPoint(x: width, y: height))
            
            // Right side of the curve
            path.addLine(to: CGPoint(x: centerX + curveRadius + 20, y: height))
            
            // Curve cutout
            path.addCurve(
                to: CGPoint(x: centerX - curveRadius - 20, y: height), // End of the curve
                control1: CGPoint(x: centerX + curveRadius, y: height - 60), // First control point (pulls the curve down)
                control2: CGPoint(x: centerX - curveRadius, y: height - 60)  // Second control point (pulls the curve up)
            )
            
            // Left side of the curve
            path.addLine(to: CGPoint(x: 0, y: height))
            
            // Close the path
            path.addLine(to: CGPoint(x: 0, y: 0))
        }
        .fill(Color.black)
        //        .shadow(color: .gray.opacity(0.3), radius: 10,
    }
}

• ios
• swift
• swiftui

Share Improve this question Follow edited Nov 19, 2024 at 18:30 Benzy Neez 22.6k33 gold badges1515 silver badges4343 bronze badges asked Nov 19, 2024 at 17:15 Telha WasimTelha Wasim 333 bronze badges 2

• Is this what you're looking for? stackoverflow/a/79142693/6257435 – DonMag Commented Nov 19, 2024 at 17:38
• Yes, but I am using SwiftUI for that – Telha Wasim Commented Nov 20, 2024 at 15:05

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If you change the implementation to a Shape instead of a View, then it automatically receives a rectangle to draw into. This way, there is no need to use UIScreen.main to obtain the screen width. This is not only deprecated, it also doesn't work properly with iPad split screen. Then:

• An easy way to draw the curves is to use addArc(tangent1End:tangent2End:radius:transform:).

• There is no need to draw lines between the curves, this is done automatically.

• To make the middle part "deeper", use a smaller arc radius than for the side curves.

• To close the path, call Path.closeSubpath.

Here is an adaption of your shape that works this way:

struct TabbarShape: Shape {
    let curveRadius: CGFloat

    func path(in rect: CGRect) -> Path {
        Path { path in

            // Start at top-left corner
            path.move(to: CGPoint(x: rect.minX, y: rect.minY))

            // First curve
            path.addArc(
                tangent1End: CGPoint(x: rect.midX - curveRadius, y: rect.minY),
                tangent2End: CGPoint(x: rect.midX, y: rect.minY + curveRadius),
                radius: curveRadius
            )
            // Middle curve
            path.addArc(
                tangent1End: CGPoint(x: rect.midX, y: rect.minY + curveRadius),
                tangent2End: CGPoint(x: rect.midX + curveRadius, y: rect.minY),
                radius: curveRadius * 0.8
            )
            // Last curve
            path.addArc(
                tangent1End: CGPoint(x: rect.midX + curveRadius, y: rect.minY),
                tangent2End: CGPoint(x: rect.maxX, y: rect.minY),
                radius: curveRadius
            )
            // Top-right corner
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))

            // Bottom-right corner
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))

            // Bottom-left corner
            path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))

            // Close the path
            path.closeSubpath()
        }
    }
}

Example use:

struct ContentView: View {
    let curveRadius: CGFloat = 50

    var body: some View {
        ZStack {
            TabbarShape(curveRadius: curveRadius)
                .fill(.black)
                .padding(.top, curveRadius * 0.8)
                .ignoresSafeArea()

            Circle()
                .fill(.red)
                .frame(width: curveRadius * 1.3)
                .frame(maxHeight: .infinity, alignment: .top)
        }
        .frame(height: 2 * curveRadius)
        .frame(maxHeight: .infinity, alignment: .bottom)
    }
}