SwiftUI 开发之旅：自定义 TabView

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

好久不见，我是 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 的皮肤定制，先给自己挖个坑，以后来填上😋。

额外收获

当使用 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，通过她，我们能做到高度的自定义效果，值得一试！

这是 SwiftUI 开发之旅专栏的文章，是 swiftui 开发学习的经验总结及实用技巧分享，欢迎关注该专栏，会坚持输出。同时欢迎关注我的个人公众号 @JSHub：提供最新的开发信息速报，优质的技术干货推荐。或是查看我的个人博客：Devcursor。

👍点赞：如果有收获和帮助，请点个赞支持一下！

🌟收藏：欢迎收藏文章，随时查看！

💬评论：欢迎评论交流学习，共同进步！