SwiftUI CustomTabView

Language Platforms License

CustomTabView 是一个 SwiftUI 组件，它使开发者能够轻松创建可自定义的标签视图。它的设计旨在提供最大的灵活性和无缝的用户体验。

为什么选择 CustomTabView？

1. 无与伦比的自定义性

CustomTabView 让您完全控制标签栏的外观。
无论您想要简约的设计还是充满活力的动画标签栏，您只需定制标签栏以适应您应用程序的视觉形象，CustomTabView 将负责其余的工作。

2. 遵循 SwiftUI 视图生命周期更新

使用 CustomTabView 充分发挥 SwiftUI 视图生命周期更新的潜力。该库与 onAppear(perform:)、onDisappear(perform:) 和 task(priority:_:) 方法无缝集成，确保每次您从标签栏切换选项卡时，都会触发这些生命周期事件。

注意
这种行为使 CustomTabView 与依赖 ZStack 覆盖标签视图的常见自定义标签视图实现区分开来，后者可能错过这些关键的视图生命周期更新。

3. 在标签页更改之间保持视图状态

CustomTabView 会在标签页更改之间保持您的视图状态。无论您是在执行应用程序中的重要操作时在标签页之间导航，每次返回先前选择的标签页时，都保证找到您离开时完全相同的视图状态。

注意
这种行为使 CustomTabView 与使用 switch 机制的常见自定义标签视图实现区分开来，后者会导致每次用户切换标签页时都重新创建视图。

安装

Swift Package Manager

将此仓库作为依赖项添加到您的 Package.swift 中

// swift-tools-version:5.0

import PackageDescription

let package = Package(
    ...,
    dependencies: [
        .package(url: "https://github.com/NicFontana/SwiftUI-CustomTabView.git", .upToNextMajor(from: "1.0.0"))
    ],
    ...
)

Xcode

选择 File > Swift Packages > Add Package Dependency，然后输入以下 URL

https://github.com/NicFontana/SwiftUI-CustomTabView.git

有关更多详细信息，请参阅向您的应用程序添加包依赖项。

用法

要将 CustomTabView 集成到您的项目中，请按照以下简单步骤操作

1. 创建您的自定义标签栏

enum Tab: String, Hashable, CaseIterable {
    case home, explore, favourites, other
}

struct SampleTabBarView: View {
    @Binding var selection: Tab
    let onTabSelection: (Tab) -> Void

    var body: some View {
        HStack {
            ForEach(Tab.allCases, id: \.self) { tab in
                tabBarItem(for: tab)
                    .frame(maxWidth: .infinity)
                    .contentShape(Rectangle())
                    .onTapGesture {
                        selection = tab
                        onTabSelection(tab)
                    }
            }
        }
    }

    private func tabBarItem(for tab: Tab) -> some View {
        ...
    }
}

2. 初始化一个 CustomTabView

import SwiftUI
import CustomTabView

@main
struct CustomTabViewExampleApp: App {

    @State private var selectedTab: Tab = .home

    private var tabBarView: SampleTabBarView {
        SampleTabBarView(selection: $selectedTab) { tab in
            print("Enjoying a custom TabView")
        }
    }

    var body: some Scene {
        WindowGroup {
            CustomTabView(tabBarView: tabBarView, tabs: Tab.allCases, selection: selectedTab) {
                NavigationView {
                    Text("Home")
                        .navigationBarTitle("Home")
                }

                NavigationView {
                    Text("Explore")
                        .navigationBarTitle("Explore")
                }

                NavigationView {
                    Text("Favourites")
                        .navigationBarTitle("Favourites")
                }

                NavigationView {
                    Text("Other")
                        .navigationBarTitle("Other")
                }
            }
        }
    }
}

重要
视图的顺序必须反映在提供的标签栏中。

3. (可选) 更改标签栏位置

您可以通过调用 CustomTabView 上的 tabBarPosition(_:) 方法来更改标签栏位置

CustomTabView(tabBarView: tabBarView, tabs: Tab.allCases, selection: selectedTab) {
    ...
}
.tabBarPosition(.edge(.bottom))

支持的位置有

贡献和问题

欢迎贡献！如果您发现任何问题或有改进建议，请打开一个 issue 或提交一个 pull request。让我们一起让 CustomTabView 变得更好。

鸣谢

特别感谢 Moving Parts 团队撰写关于 "SwiftUI 中的可变参数视图" 的富有洞察力的文章。他们对 SwiftUI 内部机制的宝贵见解和探索极大地促进了 CustomTabView 的开发，使我能够模仿 SwiftUI 本机组件 API 的优雅性。

许可证

CustomTabView 在 MIT 许可证下可用。有关详细信息，请参阅 LICENSE。