You could try this approach to `...to create a TabView with pagination where the middle view is always overlapped when swiping to the next view, left or right.`
struct ContentView: View {
@State private var selection = 0
var body: some View {
ZStack {
Text("Middle View").foregroundColor(.red).offset(x: 0, y: -40) // <-- here, adjust as needed
TabView(selection: $selection) {
Text("Left View")
.tabItem {
Image(systemName: "globe")
Text("Left")
}
.tag(0)
// Middle View should always be overlapped
Text("Middle View")
.tabItem {
Image(systemName: "house")
Text("Middle View")
}
.tag(1)
Text("Right View")
.tabItem {
Image(systemName: "info")
Text("Right")
}
.tag(2)
}
.tabViewStyle(PageTabViewStyle())
}
}
}
Also you can create very similar custom navBar for views in TabView
struct CustomNavBarView<Content>: View where Content: View {
var title: String = ""
let content: Content
init(title: String, @ViewBuilder content: () -> Content) {
self.title = title
self.content = content()
}
var body: some View {
content
.safeAreaInset(edge: .top, content: {
HStack{
Spacer()
Text(title)
.fontWeight(.semibold)
Spacer()
}
.padding(.bottom, 10)
.frame(height: 40)
.frame(maxWidth: .infinity)
.background(.ultraThinMaterial)
.overlay {
Divider()
.frame(maxHeight: .infinity, alignment: .bottom)
}
})
}
}
CustomNavBarView(title: "Create ad"){
ZStack{
NavigationLink(destination: SetPinMapView(currentRegion: $vm.region, region: vm.region), isActive: $vm.showFullMap) {
Color.clear
}
Color("Background").ignoresSafeArea()
content
}
}
