5

有没有一种简单的方法可以使用 SwiftUI 获得更可定制的标签栏视图？我主要是从 macOS 的角度询问（尽管适用于任何系统的系统都是理想的），因为标准系统的 macOS 实现存在各种问题：

  • 它周围有一个圆形边框，这意味着在子视图中使用任何类型的背景颜色都看起来很糟糕。
  • 它不支持标签图标。
  • 它在定制方面非常有限。
  • 它有问题（有时它不会按预期切换视图）。
  • 它看起来很过时。

带有 SwiftUI 的标准 macOS 标签栏

当前代码：

import SwiftUI

struct SimpleTabView: View {

    @State private var selection = 0

    var body: some View {

        TabView(selection: $selection) {

            HStack {
                Spacer()
                VStack {
                    Spacer()
                    Text("First Tab!")
                    Spacer()
                }
                Spacer()
            }
                .background(Color.blue)
                .tabItem {
                    VStack {
                        Image("icons.general.home")
                        Text("Tab 1")
                    }
                }
                .tag(0)

            HStack {
                Spacer()
                VStack {
                    Spacer()
                    Text("Second Tab!")
                    Spacer()
                }
                Spacer()
            }
                .background(Color.red)
                .tabItem {
                    VStack {
                        Image("icons.general.list")
                        Text("Tab 2")
                    }
                }
                .tag(1)

            HStack {
                Spacer()
                VStack {
                    Spacer()
                    Text("Third Tab!")
                    Spacer()
                }
                Spacer()
            }
                .background(Color.yellow)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .tabItem {
                    VStack {
                        Image("icons.general.cog")
                        Text("Tab 3")
                    }
                }
                .tag(2)
        }
    }
}
4

3 回答 3

12

为了解决这个问题，我整理了以下简单的自定义视图，它提供了与 iOS 更相似的选项卡界面，即使在 Mac 上运行也是如此。它只需要一组元组就可以工作，每个元组都概述了选项卡的标题、图标名称和内容。

它可以在 Light & Dark 模式下运行，并且可以在 macOS或iOS / iPadOS / 等上运行，但在 iOS 上运行时您可能只想使用标准TabView实现；由你决定。

它还包含一个参数，因此您可以根据偏好将栏放置在顶部或底部（顶部更适合 macOS 指南）。

这是一个结果示例（在暗模式下）：

自定义标签栏，在 macOS 上运行

这是代码。一些注意事项：

  • 它使用一个基本扩展，Color因此它可以使用系统背景颜色，而不是硬编码。
  • 唯一有点麻烦的部分是额外的background&shadow修饰符，它是防止 SwiftUI 将阴影应用到每个子视图（！）所必需的。当然，如果您不想要阴影，您可以删除所有这些行（包括zIndex）。

斯威夫特 v5.1：

import SwiftUI

public extension Color {

    #if os(macOS)
    static let backgroundColor = Color(NSColor.windowBackgroundColor)
    static let secondaryBackgroundColor = Color(NSColor.controlBackgroundColor)
    #else
    static let backgroundColor = Color(UIColor.systemBackground)
    static let secondaryBackgroundColor = Color(UIColor.secondarySystemBackground)
    #endif
}

public struct CustomTabView: View {
    
    public enum TabBarPosition { // Where the tab bar will be located within the view
        case top
        case bottom
    }
    
    private let tabBarPosition: TabBarPosition
    private let tabText: [String]
    private let tabIconNames: [String]
    private let tabViews: [AnyView]
    
    @State private var selection = 0
    
    public init(tabBarPosition: TabBarPosition, content: [(tabText: String, tabIconName: String, view: AnyView)]) {
        self.tabBarPosition = tabBarPosition
        self.tabText = content.map{ $0.tabText }
        self.tabIconNames = content.map{ $0.tabIconName }
        self.tabViews = content.map{ $0.view }
    }
    
    public var tabBar: some View {
        
        HStack {
            Spacer()
            ForEach(0..<tabText.count) { index in
                HStack {
                    Image(self.tabIconNames[index])
                    Text(self.tabText[index])
                }
                .padding()
                .foregroundColor(self.selection == index ? Color.accentColor : Color.primary)
                .background(Color.secondaryBackgroundColor)
                .onTapGesture {
                    self.selection = index
                }
            }
            Spacer()
        }
        .padding(0)
        .background(Color.secondaryBackgroundColor) // Extra background layer to reset the shadow and stop it applying to every sub-view
        .shadow(color: Color.clear, radius: 0, x: 0, y: 0)
        .background(Color.secondaryBackgroundColor)
        .shadow(
            color: Color.black.opacity(0.25),
            radius: 3,
            x: 0,
            y: tabBarPosition == .top ? 1 : -1
        )
        .zIndex(99) // Raised so that shadow is visible above view backgrounds
    }
    public var body: some View {
        
        VStack(spacing: 0) {
            
            if (self.tabBarPosition == .top) {
                tabBar
            }
            
            tabViews[selection]
                .padding(0)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            if (self.tabBarPosition == .bottom) {
                tabBar
            }
        }
        .padding(0)
    }
}

这是一个如何使用它的示例。显然，您也可以将一个完全自定义的子视图传递给它，而不是像这样动态构建它们。只要确保将它们包装在该AnyView初始化程序中即可。

图标及其名称是自定义的，因此您必须使用自己的替代品。

struct ContentView: View {
    
    var body: some View {
        CustomTabView(
            tabBarPosition: .top,
            content: [
                (
                    tabText: "Tab 1",
                    tabIconName: "icons.general.home",
                    view: AnyView(
                        HStack {
                            Spacer()
                            VStack {
                                Spacer()
                                Text("First Tab!")
                                Spacer()
                            }
                            Spacer()
                        }
                        .background(Color.blue)
                    )
                ),
                (
                    tabText: "Tab 2",
                    tabIconName: "icons.general.list",
                    view: AnyView(
                        HStack {
                            Spacer()
                            VStack {
                                Spacer()
                                Text("Second Tab!")
                                Spacer()
                            }
                            Spacer()
                        }
                        .background(Color.red)
                    )
                ),
                (
                    tabText: "Tab 3",
                    tabIconName: "icons.general.cog",
                    view: AnyView(
                        HStack {
                            Spacer()
                            VStack {
                                Spacer()
                                Text("Third Tab!")
                                Spacer()
                            }
                            Spacer()
                        }
                        .background(Color.yellow)
                    )
                )
            ]
        )
    }
}
于 2020-03-13T16:28:01.950 回答
1

回复 TheNeil（我没有足够的声誉来添加评论）：

我喜欢你的解决方案，稍微修改了一下。

public struct CustomTabView: View {
    
    public enum TabBarPosition { // Where the tab bar will be located within the view
        case top
        case bottom
    }
    
    private let tabBarPosition: TabBarPosition
    private let tabText: [String]
    private let tabIconNames: [String]
    private let tabViews: [AnyView]
    
    @State private var selection = 0
    
        public init(tabBarPosition: TabBarPosition, content: [(tabText: String, tabIconName: String, view: AnyView)]) {
        self.tabBarPosition = tabBarPosition
        self.tabText = content.map{ $0.tabText }
        self.tabIconNames = content.map{ $0.tabIconName }
        self.tabViews = content.map{ $0.view }
        }
    
        public var tabBar: some View {
        VStack {
            Spacer()
                .frame(height: 5.0)
            HStack {
                Spacer()
                    .frame(width: 50)
                ForEach(0..<tabText.count) { index in
                    VStack {
                        Image(systemName: self.tabIconNames[index])
                            .font(.system(size: 40))
                        Text(self.tabText[index])
                    }
                    .frame(width: 65, height: 65)
                    .padding(5)
                    .foregroundColor(self.selection == index ? Color.accentColor : Color.primary)
                    .background(Color.secondaryBackgroundColor)
                    .onTapGesture {
                        self.selection = index
                    }
                    .overlay(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(self.selection == index ? Color.backgroundColor.opacity(0.33) : Color.red.opacity(0.0))
                    )               .onTapGesture {
                        self.selection = index
                    }

                }
                Spacer()
            }
            .frame(alignment: .leading)
            .padding(0)
            .background(Color.secondaryBackgroundColor) // Extra background layer to reset the shadow and stop it applying to every sub-view
            .shadow(color: Color.clear, radius: 0, x: 0, y: 0)
            .background(Color.secondaryBackgroundColor)
            .shadow(
                color: Color.black.opacity(0.25),
                radius: 3,
                x: 0,
                y: tabBarPosition == .top ? 1 : -1
            )
            .zIndex(99) // Raised so that shadow is visible above view backgrounds
        }
        }

    public var body: some View {
        VStack(spacing: 0) {
                if (self.tabBarPosition == .top) {
                tabBar
            }
        
            tabViews[selection]
            .padding(0)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        
            if (self.tabBarPosition == .bottom) {
            tabBar
            }
    }
    .padding(0)
    }
}

我添加了一个屏幕截图，不知道如何使其内联显示。

修改了 CustomTabView

于 2020-12-28T17:41:32.823 回答
0

您可以通过应用负填充并使用您自己的控件视图设置可见选项卡项来简单地隐藏 TabView 的边框。

struct MyView : View
{
    @State private var selectedTab : Int = 1

    var body: some View
    {
        HSplitView
        {
            Picker("Tab Selection", selection: $selectedTab)
            {
                Text("A")
                    .tag(1)

                Text("B")
                    .tag(2)
            }


            TabView(selection: $selectedTab)
            {
                ViewA()
                    .tag(1)

                ViewB()
                    .tag(2)
            }
            // applying negative padding to hide the ugly frame
            .padding(EdgeInsets(top: -26.5, leading: -3, bottom: -3, trailing: -3))
        }
    }
}

当然，只有在 Apple 不对 TabView 的视觉设计进行任何更改的情况下，这种 hack 才有效。

于 2020-12-18T13:33:52.737 回答