IOS – Как реализовать настраиваемую панель вкладок с прозрачным наложением в SwiftUI?

Вот отправная точка, из которой вы можете добавить свой собственный стиль/макет и т. д. Здесь просто используется HStack для нижней панели вкладок и отображаются «дополнительные» вкладки в Grid с 4 вкладками в каждой строке.

struct CustomTabView<Content: View, Selection: Hashable>: View {
    
    @Binding var selectedTab: Selection
    
    @ViewBuilder let content: () -> Content
    
    // The maximum number of tabs that can be shown at the bottom (including "More")
    let maxTabsShown = 5
    
    @State private var moreShown = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            ExtractMulti(content) { views in
                // The current tab
                ForEach(views) { view in
                    // Instead of this 'if', use .opacity(view.id(as: Selection.self) == selectedTab ? 1 : 0)
                    // to control visibility if you want to preserve the state in each tab (e.g. scroll offset)
                    if view.id(as: Selection.self) == selectedTab {
                        view
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                    }
                }
                
                // The sheet for selecting the extra tabs
                if moreShown {
                    Color.black.opacity(0.7)
                        .ignoresSafeArea(edges: .top)
                        .onTapGesture {
                            moreShown = false
                        }
                        .transition(.opacity)
                    
                    // Here I've laid the extra tabs in a grid
                    Grid(horizontalSpacing: 30, verticalSpacing: 30) {
                        let hiddenTabs = views.dropFirst(maxTabsShown - 1)
                        let viewRows = hiddenTabs.chunks(ofCount: 4)
                        
                        ForEach(viewRows.indices, id: \.self) { i in
                            let row = viewRows[i]
                            GridRow {
                                ForEach(row) { view in
                                    Button {
                                        if let selection = view.id(as: Selection.self) {
                                            selectedTab = selection
                                            moreShown = false
                                        }
                                    } label: {
                                        if let label = view[CustomTabItemTrait.self] {
                                            label
                                        } else {
                                            Text("Unnamed")
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(.background, in: UnevenRoundedRectangle(topLeadingRadius: 10, topTrailingRadius: 10))
                    .transition(.move(edge: .bottom).combined(with: .opacity))
                }
                Divider()
            }
        }
        // The bottom tab bar
        .safeAreaInset(edge: .bottom) {
            HStack {
                Spacer()
                ExtractMulti(content) { views in
                    let shownTabs = 
                        views.count <= maxTabsShown ?
                            views.prefix(maxTabsShown) :
                            views.prefix(maxTabsShown - 1)
                    
                    ForEach(shownTabs) { view in
                        Group {
                            if let label = view[CustomTabItemTrait.self] {
                                label
                            } else {
                                Text("Unnamed")
                            }
                        }
                        .onTapGesture {
                            if let selection = view.id(as: Selection.self) {
                                selectedTab = selection
                                moreShown = false
                            }
                        }
                        .foregroundStyle(
                            view.id(as: Selection.self) == selectedTab ?
                                AnyShapeStyle(Color.accentColor) : AnyShapeStyle(.opacity(1))
                        )
                        Spacer()
                    }
                    
                    if views.count > maxTabsShown {
                        Label("More", systemImage: "ellipsis")
                            .onTapGesture {
                                moreShown.toggle()
                            }
                            .foregroundStyle(
                                shownTabs.contains(where: { $0.id(as: Selection.self) == selectedTab }) ?
                                    AnyShapeStyle(.opacity(1)) : AnyShapeStyle(Color.accentColor)
                            )
                        Spacer()
                    }
                }
            }
        }
        .animation(.default, value: moreShown)
    }
}

extension View {
    func customTabItem<Content: View>(@ViewBuilder content: () -> Content) -> some View {
        _trait(CustomTabItemTrait.self, AnyView(content()))
    }
}

struct CustomTabItemTrait: _ViewTraitKey {
    static let defaultValue: AnyView? = nil
}

Это зависит от ExtractMulti из View Extractor. Это несложно реализовать самостоятельно, если вы не хотите добавлять зависимость:

// From View Extractor - https://github.com/GeorgeElsham/ViewExtractor
public struct ExtractMulti<Content: View, ViewsContent: View>: View {
    let content: () -> Content
    let views: (Views) -> ViewsContent

    public init(_ content: Content, @ViewBuilder views: @escaping (Views) -> ViewsContent) {
        self.content = { content }
        self.views = views
    }

    public init(@ViewBuilder _ content: @escaping () -> Content, @ViewBuilder views: @escaping (Views) -> ViewsContent) {
        self.content = content
        self.views = views
    }

    public var body: some View {
        _VariadicView.Tree(
            MultiViewRoot(views: views),
            content: content
        )
    }
}

fileprivate struct MultiViewRoot<Content: View>: _VariadicView_MultiViewRoot {
    let views: (Views) -> Content

    func body(children: Views) -> some View {
        views(children)
    }
}

public typealias Views = _VariadicView.Children

Я также использовал chunks(ofCount:) из Swift Algorithms . Опять же, это достаточно легко реализовать самостоятельно, если вы не хотите добавлять зависимость.

При использовании этого не забудьте использовать customTabItem вместо встроенного tabItem и id вместо tag для пометки каждой вкладки.

Пример использования:

@State var selectedTab = 0

var body: some View {
    CustomTabView(selectedTab: $selectedTab) {
        ForEach(0..<10) { i in
            Text("Tab \(i)")
                .customTabItem {
                    Label("\(i)", systemImage: "0\(i).circle")
                }
                .id(i)
        }
    }
}