Skip to content

Instantly share code, notes, and snippets.

@jstheoriginal
Last active October 29, 2020 02:13
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jstheoriginal/9932a77e3890723454f8c590fbbb9011 to your computer and use it in GitHub Desktop.
Save jstheoriginal/9932a77e3890723454f8c590fbbb9011 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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

@jstheoriginal
Copy link
Author

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