TabView
A view that switches between multiple child views using interactive user interface elements.
TabView就相当于UIKit中的UITabBarController，拥有多个子视图
Declaration
struct TabView where SelectionValue : Hashable, Content : View
Overview
To create a user interface with tabs, place views in a TabView and apply the tabItem(_:) modifier to the contents of each tab. The following creates a tab view with three tabs:
TabView {
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}
}
.font(.headline)
Tab views only support tab items of type Text, Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.
1.png
Example
使用TabView来创建UITabBarController页面
1、创建单一的tabItem
struct SimpleTableView: View {
var body: some View {
TabView {
Text("Home Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
}
}
}
2、添加多个tabItem
struct SimpleTableView: View {
var body: some View {
TabView {
Text("Home Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
Text("Bookmark Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "bookmark.circle.fill")
Text("Bookmark")
}
Text("Video Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "video.circle.fill")
Text("Video")
}
Text("Profile Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "person.crop.circle")
Text("Profile")
}
}
}
}
tabView1.gif
3、自定义TabBar颜色
默认情况下tabItem的颜色是蓝色，可以通过.accentColor进行修改
TabView {
...
}
.accentColor(.red)
tabview2.png
4、通过代码实现页面之间的切换
默认情况下，tabView帮助我们自动实现了点击切换，但有时候需要通过代码实现切换到具体页面，可以通过TabView的初始化方法来实现
init(selection: Binding?, content: () -> Content)
Creates an instance that selects from content associated with Selection values.
给selection绑定一个值，然后再需要的地方进行设置
struct SimpleTableView: View {
@State private var selection = 0
var body: some View {
ZStack(alignment: .topTrailing) {
TabView(selection: $selection) {
Text("Home Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
.tag(0) // 设置item的tag值
Text("Bookmark Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "bookmark.circle.fill")
Text("Bookmark")
}
.tag(1)
Text("Video Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "video.circle.fill")
Text("Video")
}
.tag(2)
Text("Profile Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "person.crop.circle")
Text("Profile")
}
.tag(3)
}.accentColor(.red)
// 添加next按钮
Button(action: {
selection = (selection + 1) % 4
}) {
Text("Next")
.font(.system(.headline, design: .rounded))
.padding()
.foregroundColor(.white)
.background(Color.red)
.cornerRadius(10.0)
.padding()
}
}
}
}
tabView3.gif
5、隐藏tabBar
添加NavigationView，实现跳转自页面，底部tabBar会自动隐藏
struct SimpleTableView: View {
@State private var selection = 0
var body: some View {
NavigationView {
TabView(selection: $selection) {
// list列表
List(1...10, id: \.self) { index in
// 添加跳转实现
NavigationLink(
destination: Text("Item #\(index) Details"),
label: {
Text("Item #\(index)")
.font(.system(size: 20, weight: .bold, design: .rounded))
})
}
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
.tag(0) // 设置item的tag值
Text("Bookmark Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "bookmark.circle.fill")
Text("Bookmark")
}
.tag(1)
Text("Video Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "video.circle.fill")
Text("Video")
}
.tag(2)
Text("Profile Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "person.crop.circle")
Text("Profile")
}
.tag(3)
}
.accentColor(.red)
.navigationTitle("TabView Demo")
}
}
}
tabView4.gif
在一些场景可能不想隐藏tabBar，那么修改添加NavigationView的方式即可
struct SimpleTableView: View {
@State private var selection = 0
var body: some View {
TabView(selection: $selection) {
// list列表
NavigationView {
List(1...10, id: \.self) { index in
NavigationLink(
destination: Text("Item #\(index) Details"),
label: {
Text("Item #\(index)")
.font(.system(size: 20, weight: .bold, design: .rounded))
})
}
.navigationTitle("TabView Demo")
}
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
.tag(0) // 设置item的tag值
Text("Bookmark Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "bookmark.circle.fill")
Text("Bookmark")
}
.tag(1)
Text("Video Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "video.circle.fill")
Text("Video")
}
.tag(2)
Text("Profile Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Image(systemName: "person.crop.circle")
Text("Profile")
}
.tag(3)
}
.accentColor(.red)
}
}
tabView5.gif
6、TabView styles
-
DefaultTabViewStyle- regular style that we all know; -
PageTabViewStyle- scrolling pages with the page indicator; -
CarouselTabViewStyle- specific style for watchOS that we're not going to look into in this post.
@available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)
extension View {
/// Sets the style for the tab view within the the current environment.
///
/// - Parameter style: The style to apply to this tab view.
public func tabViewStyle(_ style: S) -> some View where S : TabViewStyle
}
/// A specification for the appearance and interaction of a `TabView`.
@available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)
public protocol TabViewStyle {
}
/// The default `TabView` style.
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 7.0, *)
public struct DefaultTabViewStyle : TabViewStyle {
public init()
}
/// A `TabViewStyle` that implements a paged scrolling `TabView`.
@available(iOS 14.0, tvOS 14.0, watchOS 7.0, *)
@available(macOS, unavailable)
public struct PageTabViewStyle : TabViewStyle {
/// A style for displaying the page index view
public struct IndexDisplayMode {
/// Displays an index view when there are more than one page
public static let automatic: PageTabViewStyle.IndexDisplayMode
/// Always display an index view regardless of page count
@available(watchOS, unavailable)
public static let always: PageTabViewStyle.IndexDisplayMode
/// Never display an index view
@available(watchOS, unavailable)
public static let never: PageTabViewStyle.IndexDisplayMode
}
/// Creates a new `PageTabViewStyle` with an index display mode
public init(indexDisplayMode: PageTabViewStyle.IndexDisplayMode = .automatic)
}
使用PageTabViewStyle
struct SimpleTableView: View {
var body: some View {
TabView {
Color.gray
Color.red
Color.blue
}.tabViewStyle(PageTabViewStyle())
}
}
tabView7.gif
参考
- TabView
- Adding TabView and tabItem()
- Introducing SwiftUI TabView and Working with Tab Bar Customization