DCD40A1584F4D873BBD286AEBEE47796.jpg
前言：现市面上90%的App都是底部分类点击切换不同的页面，SwiftUI来实现，现网上的帖子全是
NavigationView+TabView可以轻松实现。但是对没错但是奇奇怪怪的BUG巨多，iOS16都出了，SwiftUI还是这么多奇奇怪怪的Bug,真心累
还有现在网上关于SwiftUI比较全的文章那几个博主，只是在国外的网站直接搬过来就直接收费才能看，真的恶心（又不是啥海克斯科技）
还是那句话，拒绝付费，只想白嫖
本文需要你有SwiftUI 基础
目录
1.0 NavigationView+TabView (网上文章大部分实现
存在bug，已解决，暂时能正常使用 )
2.0 自定义Tabbar(一劳永逸)
1.0 NavigationView+TabView 先看效果
iShot_2022-09-16_14.45.05.gif
看着还挺丝滑的，完美。但是存在的bug也很坑
1.角标和红点实现问题（.bage（1）iOS15才支持）
2.无法个性定制NavigationBar问题 无法添加ToolBar（左右两边按钮）
3.无法彻底影藏NavigationBar，切换tabbar 时不时可能NavigationBar还会出来
1.1 新建一个 View SDTabCtr
struct CSTTabCtr:View
{
//通过 selectIndex 获取对应的navigationBarTitle
private var currentTitle:String
{
switch selectIndex
{
case 0:
return "工作台"
case 1:
return "推广"
case 2:
return "消息"
case 3:
return "我的"
default:
return ""
}
}
@State var selectIndex:Int=0
var body: some View
{
NavigationView{
TabView(selection: $selectIndex){
Page1().tabItem {
Image(selectIndex == 0 ? "workbech_Select":"workbech")
Text("工作台")
}.tag(0)
Page2().tabItem {
Image(selectIndex == 1 ? "tabTg_Select":"tabTg")
Text("推广")
}.tag(1)
Page3().tabItem {
Image(selectIndex == 2 ? "tabMes_Select":"tabMes")
Text("消息")
}.tag(2)
Page4().tabItem {
Image(selectIndex == 3 ? "tabMine_Select":"tabMine")
Text("我的")
}.tag(3)
}.accentColor(Color.blue)
// .background(.white)
.navigationBarTitleDisplayMode(.inline)
.navigationBarTitle(currentTitle)
}
}
}
用 TabView 实现
- PageX. tabItem 这个tabItem可以设置对应Page的image （底部图标）和text（底部文字）
2.给每个View tag 设定对应的tag值
3.记录当前选中的Index 用@ State 修饰 ，然后赋值给 TabView(selection: $selectIndex) 这样就能点击对应的tabbar 切换到对应的page
1.2各个Page 实现
struct page1: View {
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
// Text("工作台")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.blue)
}
}
struct page2: View {
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
//Text("推广")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.yellow)
}
}
struct page3: View {
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
//Text("消息")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.green)
}
}
struct page4: View {
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
//Text("我的")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.red)
}
}
1.3 SDTabCtr使用 只需要在Project:App中替换 ContentView 即可
import SwiftUI
@main
struct TestTabApp: App {
var body: some Scene {
WindowGroup {
SDTabCtr()
}
}
}
1.4 尝试解决 NavigationView+TabView存在的bug
1.4.1 角标和红点实现问题，犹豫.bage(x)这个仅在iOS15才能使用 (这个问题其实还挺好解决，通过ZStack包裹TabView,和自定义bage 或者红点然后定位到他该显示的地方去，完活)
1.4.2 无法个性定制NavigationBar问题 无法添加ToolBar（左右两边按钮）（彻底影藏NavigationBar，完全自定义NavigationBar）
1.4.3 无法彻底影藏NavigationBar，切换tabbar 时不时可能NavigationBar还会出来（这是真的坑 ） 我们先来试试看看效果
运行环境
Xcode 13.2.1
最低版本：iOS14
模拟器运行版本：iOS15.2
为了观察方便我们把 NavigationBar改成红色
init(){
UITabBar.appearance().backgroundColor = UIColor(Color.white)
UINavigationBar.appearance().backgroundColor=UIColor(Color.red)
}
iShot_2022-09-16_15.44.31.gif
影藏NavigationBar .navigationBarHidden(true)
NavigationView{
TabView(selection: $selectIndex){
page1().tabItem {
Image(selectIndex == 0 ? "workbech_Select":"workbech")
Text("工作台")
}.tag(0)
page2().tabItem {
Image(selectIndex == 1 ? "tabTg_Select":"tabTg")
Text("推广")
}.tag(1)
page3().tabItem {
Image(selectIndex == 2 ? "tabMes_Select":"tabMes")
Text("消息")
}.tag(2)
page4().tabItem {
Image(selectIndex == 3 ? "tabMine_Select":"tabMine")
Text("我的")
}.tag(3)
}.accentColor(Color.blue)
// .background(.white)
.navigationBarTitleDisplayMode(.inline)
.navigationBarHidden(true)
// .navigationBarTitle(currentTitle)
}
iShot_2022-09-16_15.52.10.gif
看红色的NavigationBar无法正常影藏，我在想会不会是.navigationBarHidden(true)放的位置不对， 于是我又把.navigationBarHidden(true) 放在到了每一个page上
NavigationView{
TabView(selection: $selectIndex){
page1().tabItem {
Image(selectIndex == 0 ? "workbech_Select":"workbech")
Text("工作台")
}.tag(0)
.navigationBarHidden(true)
page2().tabItem {
Image(selectIndex == 1 ? "tabTg_Select":"tabTg")
Text("推广")
}.tag(1)
.navigationBarHidden(true)
page3().tabItem {
Image(selectIndex == 2 ? "tabMes_Select":"tabMes")
Text("消息")
}.tag(2)
.navigationBarHidden(true)
page4().tabItem {
Image(selectIndex == 3 ? "tabMine_Select":"tabMine")
Text("我的")
}.tag(3)
.navigationBarHidden(true)
}.accentColor(Color.blue)
// .background(.white)
.navigationBarTitleDisplayMode(.inline)
// .navigationBarHidden(true)
// .navigationBarTitle(currentTitle)
}
iShot_2022-09-16_16.18.45.gif
结果还是不行 “工作台” 和 "推广" 本来是已经影藏的，单当我点击第三个tab的时候，它竟然又出现了，出现后，我点任何的tabbar 都不会消失了
我陷入沉思
于是我就想 另一条思路 TabView+NavigationView 也就是把 NavigationView 写进page里 这样就可以自己定制更改还是影藏NavigationBar了
你只需要吧最外层的 NavigationView去除 “工作台”的代码修改下
struct page1: View {
var body: some View {
NavigationView{
ScrollView(.vertical, showsIndicators: false) {
Color.clear.frame(height:300)
NavigationLink {
Text("SubV")
} label: {
Text("click push")
.foregroundColor(.red)
}
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.blue)
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("工作台")
}
}
}
iShot_2022-09-16_16.47.14.gif
但是这又会出现一个问题，就是你
NavigationLink push子页面的时候 tabbar 无法影藏的问题
网上查阅了各种 tabbar 影藏的方法，竟然还要把TabView（SwiftUI） 转成UITabViewController（UIKit）然后通过监听 push 操作 通过window获取UITabViewController然后去影藏看完方案
我又陷入了沉思就一个这玩意还要 SwiftUI-> UIKit 这么麻烦吗？这个方案直接Pass了，我嫌过于麻烦，然后我回到了原点
经过我无数次尝试影藏，和挪移影藏的位置，终于在无意的情况下竟然成功了
iShot_2022-09-16_17.02.37.gif
struct SDTabCtr:View
{
init(){
UITabBar.appearance().backgroundColor = UIColor(Color.white)
UINavigationBar.appearance().backgroundColor=UIColor(Color.red)
}
private var currentTitle:String
{
switch selectIndex
{
case 0:
return "工作台"
case 1:
return "推广"
case 2:
return "消息"
case 3:
return "我的"
default:
return ""
}
}
@State var selectIndex:Int=0
var body: some View
{
NavigationView{
TabView(selection: $selectIndex){
page1().tabItem {
Image(selectIndex == 0 ? "workbech_Select":"workbech")
Text("工作台")
}.tag(0)
.navigationBarHidden(true)
page2().tabItem {
Image(selectIndex == 1 ? "tabTg_Select":"tabTg")
Text("推广")
}.tag(1)
.navigationBarHidden(true)
page3().tabItem {
Image(selectIndex == 2 ? "tabMes_Select":"tabMes")
Text("消息")
}.tag(2)
.navigationBarHidden(true)
page4().tabItem {
Image(selectIndex == 3 ? "tabMine_Select":"tabMine")
Text("我的")
}.tag(3)
.navigationBarHidden(true)
}.accentColor(Color.blue)
// .background(.white)
.navigationBarTitleDisplayMode(.inline)
.navigationBarTitle(currentTitle)
}
}
}
暂得出的结论 你一定要设置
.navigationBarTitle(currentTitle) Title并且.navigationBarHidden(true)你一定要放在每个page里，你还不能设置在tabView上，不信我拿出来看看
NavigationView{
TabView(selection: $selectIndex){
page1().tabItem {
Image(selectIndex == 0 ? "workbech_Select":"workbech")
Text("工作台")
}.tag(0)
page2().tabItem {
Image(selectIndex == 1 ? "tabTg_Select":"tabTg")
Text("推广")
}.tag(1)
page3().tabItem {
Image(selectIndex == 2 ? "tabMes_Select":"tabMes")
Text("消息")
}.tag(2)
page4().tabItem {
Image(selectIndex == 3 ? "tabMine_Select":"tabMine")
Text("我的")
}.tag(3)
}.accentColor(Color.blue)
// .background(.white)
.navigationBarTitleDisplayMode(.inline)
.navigationBarHidden(true)
.navigationBarTitle(currentTitle)
iShot_2022-09-16_17.11.12.gif
运行第一个page的导航栏直接就没有影藏，直接是显示的，所以你还不能放在外面
.navigationBarHidden(true)
于是我再次陷入了沉思为什么啊，影藏为什么会和navigationBarTitle挂钩，且还不能放在外面一定要放子页面上。真是太多奇奇怪怪的问题了，有知道的大佬请说明下
2.0 自定义Tabbar 虽然上面我们解决了那些bug，用起来也没啥问题了的感觉。但是，我们也可以不要用 TabView（谁知道里面还会有多少坑），完全自定义，也很简单
先说原理 自定义一个Tabbar的View ，然后再每个需要展示的子页面都加上 Tabbar，用环境变量（
@EnvironmentObject）来监听 选中的了那个tabbar ，动态显示影藏即可
image.png
class TabbarStateMD:ObservableObject
{
@Published var selectIndex:Int=0
}
struct CSTTabar: View {
@EnvironmentObject var tbState:TabbarStateMD
var body: some View {
HStack{
Spacer()
Button {
tbState.selectIndex=0
} label: {
VStack(spacing:5){
Image(systemName: "rectangle.on.rectangle.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(tbState.selectIndex == 0 ? .blue:.gray.opacity(0.6))
Text("工作台")
.foregroundColor(tbState.selectIndex == 0 ? .blue:.gray.opacity(0.6))
}
}
Spacer()
Button {
tbState.selectIndex=1
} label: {
VStack(spacing:5){
Image(systemName: "rectangle.on.rectangle.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(tbState.selectIndex == 1 ? .blue:.gray.opacity(0.6))
Text("客户")
.foregroundColor(tbState.selectIndex == 1 ? .blue:.gray.opacity(0.6))
}
}
Spacer()
Button {
tbState.selectIndex=2
} label: {
VStack(spacing:5){
Image(systemName: "rectangle.on.rectangle.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(tbState.selectIndex == 2 ? .blue:.gray.opacity(0.6))
Text("消息")
.foregroundColor(tbState.selectIndex == 2 ? .blue:.gray.opacity(0.6))
}
}
Spacer()
Button {
tbState.selectIndex=3
} label: {
VStack(spacing:5){
Image(systemName: "rectangle.on.rectangle.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(tbState.selectIndex == 3 ? .blue:.gray.opacity(0.6))
Text("我的")
.foregroundColor(tbState.selectIndex == 3 ? .blue:.gray.opacity(0.6))
}
}
Spacer()
}
.frame(height: 50)
}
}
创建一个 TabbarStateMD 环境变量 里面记录当前选中的index
创建CSTTabar view 下面显示的tabbar点击的时候需要更改 index
在每个page里加入 （NavigationView+CSTTabar）
import SwiftUI
struct page1: View {
var body: some View {
NavigationView
{
VStack(spacing:0)
{
ScrollView(.vertical, showsIndicators: false) {
NavigationLink {
Text("subV")
} label: {
Text("click push")
.foregroundColor(.red)
}
// Text("工作台")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.blue)
CSTTabar()
}
.navigationBarHidden(true)
}
}
}
struct page2: View {
var body: some View {
NavigationView
{
VStack(spacing:0)
{
ScrollView(.vertical, showsIndicators: false) {
// Text("推广")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.yellow)
CSTTabar()
}
.navigationTitle("推广")
.navigationBarTitleDisplayMode( .inline)
}
}
}
struct page3: View {
var body: some View {
NavigationView
{
VStack(spacing:0)
{
ScrollView(.vertical, showsIndicators: false) {
// Text("消息")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.green)
CSTTabar()
}
.navigationBarHidden(true)
}
}
}
struct page4: View {
var body: some View {
NavigationView
{
VStack(spacing:0)
{
ScrollView(.vertical, showsIndicators: false) {
// Text("我的")
}
.frame(minWidth:UIScreen.main.bounds.width)
.background(Color.gray)
CSTTabar()
}
.navigationTitle("我的")
.navigationBarTitleDisplayMode( .inline)
}
}
}
创建MainV View 根据 选中的selectIndex 展示不同的page
struct MainV:View{
@EnvironmentObject var tabState:TabbarStateMD
var body: some View
{
switch tabState.selectIndex
{
case 0:
page1()
case 1:
page2()
case 2:
page3()
case 3:
page4()
default:
page1()
}
}
}
在Project:App中替换 ContentView （注册环境变量TabbarMD，是他的子级都能使用）
struct TestTabApp: App {
@StateObject var tabState:TabbarStateMD=TabbarStateMD()
var body: some Scene {
WindowGroup {
MainV()
.environmentObject(tabState)
// SDTabCtr()
}
}
}
iShot_2022-09-16_18.00.07.gif
1.bage 和小红点问题，都自定义了，这不是轻轻松松的事嘛
2.每个页面的NavigationBar可以影藏显示，样式也可以自己自定义了
忽略tabbar 的丑陋，我这里只是随便写的样式演示用的，想要好看完全取决UI小姐姐的图 - 0-。
end
ok，以梦为马，不负韶华