ios – How am i able to make customized backside tabbar in SwiftUI

For those who change the implementation to a Form as a substitute of a View, then it robotically receives a rectangle to attract into. This fashion, there isn’t a want to make use of UIScreen.most important to acquire the display screen width. This isn’t solely deprecated, it additionally would not work correctly with iPad cut up display screen. Then:

• A simple method to attract the curves is to make use of addArc(tangent1End:tangent2End:radius:remodel:).

• There isn’t any want to attract strains between the curves, that is finished robotically.

• To make the center half “deeper”, use a smaller arc radius than for the aspect curves.

• To shut the trail, name Path.closeSubpath.

Right here is an adaption of your form that works this fashion:

struct TabbarShape: Form {
    let curveRadius: CGFloat

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

            // Begin at top-left nook
            path.transfer(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
            )
            // Center 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
            )
            // Final curve
            path.addArc(
                tangent1End: CGPoint(x: rect.midX + curveRadius, y: rect.minY),
                tangent2End: CGPoint(x: rect.maxX, y: rect.minY),
                radius: curveRadius
            )
            // Prime-right nook
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))

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

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

            // Shut the trail
            path.closeSubpath()
        }
    }
}

Instance use:

struct ContentView: View {
    let curveRadius: CGFloat = 50

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

            Circle()
                .fill(.purple)
                .body(width: curveRadius * 1.3)
                .body(maxHeight: .infinity, alignment: .high)
        }
        .body(top: 2 * curveRadius)
        .body(maxHeight: .infinity, alignment: .backside)
    }
}