Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SwiftUI TabView With Full Screen Background Color Ignoring Safe Area
import SwiftUI
struct ContentView: View {
@State private var currentIndex = 0
private let colors: [Color] = [.red, .white, .blue, .green, .yellow]
private var whiteIsSelected: Bool {
colors[currentIndex] == .white
}
var body: some View {
TabView(selection: $currentIndex.animation()) {
ForEach(0..<colors.count) { index in
Text("Page \(index + 1)")
.foregroundColor(whiteIsSelected ? .black : .white)
.font(.title)
.tag(index)
}
}
.background(
colors[currentIndex].edgesIgnoringSafeArea(.all)
)
.tabViewStyle(
PageTabViewStyle(indexDisplayMode: .always)
)
.indexViewStyle(
// need white to have a background otherwise the page indiators won't be visible
PageIndexViewStyle(backgroundDisplayMode: whiteIsSelected ? .always : .automatic)
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
@jstheoriginal

This comment has been minimized.

Copy link
Owner Author

@jstheoriginal jstheoriginal commented Aug 3, 2020

Gif of it in action: https://imgur.com/S1ly9Fk

@jstheoriginal

This comment has been minimized.

Copy link
Owner Author

@jstheoriginal jstheoriginal commented Aug 3, 2020

Added the indexViewStyle to make it visible if white is selected.

Gif: https://imgur.com/a/XX4C3JB

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment