美文网首页大前端开发Swift开发学习SwiftUI
SwiftUI 自定义TabBar(NavigationView

SwiftUI 自定义TabBar(NavigationView

作者: SuDream | 来源:发表于2022-09-15 18:26 被阅读0次
    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 实现

    1. 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，以梦为马，不负韶华

    相关文章

      网友评论

        本文标题：SwiftUI 自定义TabBar(NavigationView

        本文链接：https://www.haomeiwen.com/subject/qfrjortx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        大前端开发

        Swift开发学习

        SwiftUI

        关于我们|服务条款|联系我们|SwiftUI 自定义TabBar(NavigationView|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！