SWift TabView 与 UIKit 中的 UITabBarController 如出一辙.在 TabView 组件中配置对应的图片和标题;
其中,Tag 用来设置不同 TabView 可动态设置当前可见 Tab;另也有一些常用的属性与 UIKit 中的类似,具体可以按需参考 api 中属性进行单独修改定制;
在 iOS 15.0 之后还可设置角标记 .badge
一、初始化
// MARK: ****** TabView
TabView {
Text("").tabItem {
Image("homePage_tabBar_Normal_Image")
Text("首页")
}.tag(0)
// .badge(Text("new")) // iOS 15.0
Text("").tabItem {
Image("BookShelf_tabBar_Normal_Image")
Text("医师在线")
}.tag(1)
Text("").tabItem {
Image("Exam_tabbar_Normal_Image")
Text("考试")
}.tag(2)
Text("").tabItem {
Image("Integration_tabbar_Normal_Image")
Text("教学")
}.tag(3)
Text("").tabItem {
Image("my_tabBar_Normal_Image")
Text("我的")
}.tag(4)
}
二、简易修改 TabBar 属性相关
对 TabBar 标签文字和背景简易修改可通过如下方式:
方式一,直接通过 onAppear 进行修改设定
// MARK: ****** TabView
TabView {
Text("").tabItem {
Image("homePage_tabBar_Normal_Image")
Text("首页")
}.tag(0)
// .badge(Text("new")) // iOS 15.0
Text("").tabItem {
Image("BookShelf_tabBar_Normal_Image")
Text("医师在线")
}.tag(1)
Text("").tabItem {
Image("Exam_tabbar_Normal_Image")
Text("考试")
}.tag(2)
Text("").tabItem {
Image("Integration_tabbar_Normal_Image")
Text("教学")
}.tag(3)
Text("").tabItem {
Image("my_tabBar_Normal_Image")
Text("我的")
}.tag(4)
}
.onAppear { // 渲染时
// MARK: UIKit 方式
// 标签栏背景色
UITabBar.appearance().backgroundColor = UIColor.orange
// 标签文字未选中颜色
UITabBar.appearance().unselectedItemTintColor = UIColor.white
}
方式二,也可在 init 中进行重设定
struct YHContentView: View {
@Environment(\.presentationMode) private var mode
// MARK: - ****** 初始化 ******
init() {
// MARK: UIKit 方式
// 标签栏背景色
UITabBar.appearance().backgroundColor = UIColor.orange
// 标签文字未选中颜色
UITabBar.appearance().unselectedItemTintColor = UIColor.white
}
// MARK: - ****** 声明 ******
// 创建变量(私有变量 private 外部不可调用)
// 通过 @State 修饰变量,用来绑定至所对应视图上,该变量即真实数据源与视图绑定并动态更改数据
@State private var weightText: String = ""
@State private var heightText: String = ""
@State var isToggleState: Bool = true
// MARK: - ****** UI ******
var body: some View {
// MARK: ****** TabView
TabView {
Text("").tabItem {
Image("homePage_tabBar_Normal_Image")
Text("首页")
}.tag(0)
// .badge(Text("new")) // iOS 15.0
Text("").tabItem {
Image("BookShelf_tabBar_Normal_Image")
Text("医师在线")
}.tag(1)
Text("").tabItem {
Image("Exam_tabbar_Normal_Image")
Text("考试")
}.tag(2)
Text("").tabItem {
Image("Integration_tabbar_Normal_Image")
Text("教学")
}.tag(3)
Text("").tabItem {
Image("my_tabBar_Normal_Image")
Text("我的")
}.tag(4)
}
}
// MARK: - ****** 方法相关 ******
// MARK: 导航返回
private func goback() {
withAnimation {
self.mode.wrappedValue.dismiss()
}
}
}
三、自定义 TabBar 属性
在官方 api 中提供了很多属性可供自定制化修改,如下简单列举一些常用的属性参考
注:其作用域需要基于 iOS 15 以上版本文章来源:https://www.toymoban.com/news/detail-686684.html
// MARK: - ****** 初始化 ******
init() {
if #available(iOS 15.0, *) {
// MARK: SwiftUI 方式,作用域 iOS 15 以上版本
let itemApperance = UITabBarItemAppearance()
// 标签图标颜色(未选中 & 选中)
itemApperance.normal.iconColor = UIColor.gray
itemApperance.selected.iconColor = UIColor.red
// 标签文字颜色(未选中 & 选中)
itemApperance.normal.titleTextAttributes = [.foregroundColor: UIColor.green]
itemApperance.selected.titleTextAttributes = [.foregroundColor: UIColor.white]
// 标签气泡背景颜色
itemApperance.normal.badgeBackgroundColor = UIColor.blue
itemApperance.selected.badgeBackgroundColor = UIColor.yellow
// 标签气泡文字颜色
itemApperance.normal.badgeTextAttributes = [.foregroundColor: UIColor.gray]
itemApperance.selected.badgeTextAttributes = [.foregroundColor: UIColor.black]
// 标签气泡位置
itemApperance.normal.badgePositionAdjustment = UIOffset(horizontal: -10, vertical: -10)
itemApperance.selected.badgePositionAdjustment = UIOffset(horizontal: 10, vertical: 10)
// 标签气泡标题位置
itemApperance.normal.badgeTitlePositionAdjustment = UIOffset(horizontal: -10, vertical: -10)
itemApperance.selected.badgeTitlePositionAdjustment = UIOffset(horizontal: 10, vertical: 10)
let appearance = UITabBarAppearance()
// 将自定义 item 属性应用到 UITabBarAppearance 的 stackedLayoutAppearance 属性中
appearance.stackedLayoutAppearance = itemApperance
// TabBar 背景图
appearance.backgroundImage = UIImage(named: "")
// TabBar 背景色
appearance.backgroundColor = UIColor.orange
// TabBar 顶部线条颜色
appearance.shadowColor = UIColor.yellow
// TabBar 子元素布局样式
appearance.stackedItemPositioning = .centered // 默认: automatic 填充满: fill 居中: centered
// TabBar 子元素间距
appearance.stackedItemSpacing = 1000
// 将自定义配置同步到应用中
UITabBar.appearance().scrollEdgeAppearance = appearance // 作用域 iOS 15 以上版本
} else {
// MARK: UIKit 方式
// 标签栏背景色
UITabBar.appearance().backgroundColor = UIColor.orange
// 标签文字未选中颜色
UITabBar.appearance().unselectedItemTintColor = UIColor.white
}
}
以上便是此次分享的全部内容,希望能对大家有所帮助!文章来源地址https://www.toymoban.com/news/detail-686684.html
到了这里,关于TabView 初始化与自定义 TabBar 属性相关的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!