SwiftUI 开发之旅：自定义 TabView
好久不见，我是 new_cheng。
关于自定义 TabView，首先要明白，为什么不使用官方的 TabView，为什么要自定义一个 TabView？
有几个值得这么做的理由：
更灵活的控制 TabView 的显示；
高度的定制化，比如给 TabView 设置皮肤（谁能不爱好看的皮肤呢？）；
以上 2 点就值得你自定义一个 TabView。
话不多说，开搞。
实现思路
一个标准的 TabView， 先来看看完成图：
实现思路也很简单：
创建一个路由控制器；
创建一个 TabBarIcon；
自定义视图
检测路由变化，切换视图；
创建路由控制器
这里的路由只是一个称呼，和前端领域的路由不同。
ViewRouter.swift:
import SwiftUI enum Page { case home case my } class ViewRouter: ObservableObject { @Published var currentPage: Page = .home } 复制代码ViewRouter 是一个遵循 ObservableObject 协议的类，它的 currentPage 属性是用 @Published 进行包装的。当属性值发生变化时，使用该类的任何视图都会自动重新调用 body 属性，来保持界面与数据的一致性。
创建 TabBarIcon
接着，创建 TabView 的菜单内容，我们得封装一个 TabBarIcon。
在 ViewRouter.swift 文件中新增以下代码：
struct TabBarIcon: View { @StateObject var viewRouter: ViewRouter let assignedPage: Page let width, height: CGFloat let systemIconName, tabName: String var body: some View { VStack { Image(systemName: systemIconName) .resizable() .aspectRatio(contentMode: .fit) .frame(width: width, height: height) .padding(.top, 6) Text(tabName) .font(.footnote) .font(.system(size: 16)) Spacer() } .padding(.horizontal, -2) .onTapGesture { viewRouter.currentPage = assignedPage } .foregroundColor(viewRouter.currentPage == assignedPage ? .blue : .gray) } } 复制代码当用户点击的时候，会去更新当前路由；值得一提的是，这里我们采用的是 @StateObject，而不是 @ObservedObject，@ObservedObject 不管存储，会随着视图的创建被多次创建。而 @StateObject 保证对象只会被创建一次。因此，如果是在视图里自行创建的 ObservableObject model 对象，使用 @StateObject 会是更正确的选择。
自定义视图
为了显示路由视图，我们还需要自定义视图。借助 GeometryReader，我们可以很轻松的做到这一点。GemoetryReader 是一个容器视图，能够根据其自身大小和坐标空间定义其内容，简单来说，GeometryReader 是一种特别的 View，在其中可以拿到一些你在其他 View 中拿不到的信息，比如父级视图的 size。
ContentView.siwft:
struct ContentView: View { var body: some View { GeometryReader { geometry in VStack { Spacer() ZStack { HStack { TabBarIcon(viewRouter: viewRouter, assignedPage: .home, width: geometry.size.width/5, height: geometry.size.height/32, systemIconName: "chart.pie.fill", tabName: "首页") .frame(maxWidth: .infinity) TabBarIcon(viewRouter: viewRouter, assignedPage: .my, width: geometry.size.width/5, height: geometry.size.height/32, systemIconName: "person.crop.circle.fill", tabName: "我的") .frame(maxWidth: .infinity) } // 将宽度设置为父视图的宽度大小，高度需要微调，可以设置为具体是数值，比如 100 .frame(width: geometry.size.width, height: geometry.size.height/9) } } .ignoresSafeArea(edges: .bottom) } } } 复制代码检测路由变化，切换视图
用 switch 来切换视图：
struct ContentView: View { @StateObject var viewRouter: ViewRouter var body: some View { GeometryReader { geometry in VStack { switch viewRouter.currentPage { case .home: Home() case .my: My() } Spacer() ZStack { HStack { TabBarIcon(viewRouter: viewRouter, assignedPage: .home, width: geometry.size.width/5, height: geometry.size.height/32, systemIconName: "chart.pie.fill", tabName: "首页") .frame(maxWidth: .infinity) TabBarIcon(viewRouter: viewRouter, assignedPage: .my, width: geometry.size.width/5, height: geometry.size.height/32, systemIconName: "person.crop.circle.fill", tabName: "我的") .frame(maxWidth: .infinity) } // 将宽度设置为父视图的宽度大小，高度需要微调，可以设置为具体是数值，比如 100 .frame(width: geometry.size.width, height: geometry.size.height/9) } } .ignoresSafeArea(edges: .bottom) } } } // 设置预览 struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView(viewRouter: ViewRouter()) } } 复制代码到这里，一个自定义 TabView 就完成了。
皮肤
我们的 TabView 既然都是完全自定义的了，那给它开发皮肤自然不在话下了；像招行的 APP 就有很多漂亮的皮肤，这对提高用户粘性来说，是一个不错的方式（含泪给王者农药打钱????）。当然这完全是由你或者设计师来决定的，按照设计稿开搞就是了。
额外收获
当使用 swiftui 的 NavigationView 进行导航时，如果你在一个父级视图中使用了 NavigationView，然后在子级视图中也使用了 NavigationView，那在进行导航的时候，就有可能出现 2 个导航栏的情况。
这时候的解决办法是就是仅在顶级父视图，也就是 ContentView.swift 中使用 NavigationView：
struct ContentView: View { @StateObject var viewRouter: ViewRouter var body: some View { NavigationView { // ... } } } 复制代码此时，如果你使用的是 swiftui 自带的 TabView 视图，而非自定义的，而又想在子视图中不显示 TabView，这会很麻烦，需要借助第三方库：SwiftUI-Introspect。
到这，还没有完，用 SwiftUI-Introspect 控制官方 TabView 的显示，显示和隐藏的时候，会有一个过渡动画...
如果你不介意在每次从子视图返回首页的时候，TabView 显示的这个过度动画带来的延迟效果，那就可以采用官方的 TabView。
而当你使用自定义的 TabView 时，这些问题都迎刃而解????。
总结
我们用简单的代码就实现了一个自定义的 TabView，通过她，我们能做到高度的自定义效果，值得一试！
作者：new_cheng
链接：https://juejin.cn/post/7171233863510245412