SwiftUI - Putting a bar above the TabView?

Question

I want to put a bar above the TabView, as shown. Currently I'm achieving this by coding it at the bottom on the main views. I'd like to unify the code and put it into the TabView as a one off.

var body: some View {
    VStack {
        TabView(selection: $tabs.selectedTab) {
            LocationView()
                .tabItem {
                    Label("Location", systemImage: "globe.europe.africa")
                }
                .tag(TabChoice.location)
            CalculateView()
                .tabItem {
                    Label("Calculate", systemImage: "apps.ipad")
                }
                .tag(TabChoice.calculate)
            InstallView()
                .tabItem {
                    Label("Install", systemImage: "window.ceiling.closed")
                }
                .tag(TabChoice.install)
            ResultsView()
                .tabItem {
                    Label("Results", systemImage: "sun.max.fill")
                }
                .tag(TabChoice.results)
            AboutView()
                .tabItem {
                    Label("About", systemImage: "gear")
                }
                .tag(TabChoice.about)
        } // TabView
    }
}

My efforts to date display the bar at the top of the screen whilst the Tab Bar remains at the bottom, where it should be.

Can this be done?

TabView is one of the more non-customizable SwiftUI components. I know it's a lazy answer but it may be better to roll your own tab bar to achieve the look you want. Or at the very least create a sort-of "TabItemWrapper" view that applies the bottom bar at the `TabView` level instead. — Shawn, May 11 '23 at 12:20
That explains a lot - compared to UI there is no ability to control individual tab items with such as .ishidden I didn't fully appreciate that it really is what you see is all there is. — Edward Hasted, May 11 '23 at 12:57
Does this answer your question? [Programmatically detect Tab Bar or TabView height in SwiftUI](https://stackoverflow.com/questions/59969911/programmatically-detect-tab-bar-or-tabview-height-in-swiftui) — lorem ipsum, May 11 '23 at 13:38

score -2 · Accepted Answer · answered May 11 '23 at 13:03

You could achieve this using a ZStack and adding a line on top of the TabBar. You can use a fixed height for this as in my example, however you might want to calculate the actual height of the TabBar and offset your line with that value instead. Take a look here: https://stackoverflow.com/a/60136275/12764203

struct ContentView: View {
    var body: some View {
        ZStack {
            TabView {
                Tab1()
                    .tabItem {
                        Label("Tab1", systemImage: "star")
                    }
                Tab2()
                    .tabItem {
                        Label("Tab2", systemImage: "star")
                    }
            }

            VStack {
                Spacer()
                Rectangle()
                    .frame(maxWidth: .infinity, maxHeight: 1)
                    .foregroundColor(.red)
                    .padding(.bottom, 60)
            }
        }
    }
}

I think for the time being this is the workable answer until TabView gets fleshed out. The problem is that, currently, getting the TabView height is tortuous. Many thanks. — Edward Hasted, May 11 '23 at 13:37
You shouldn't take other answers and post them as your own answer. If there is another question that has an answer mark as a duplicate. — lorem ipsum, May 11 '23 at 13:37
@loremipsum Sorry about that. I did provide my own answer, but then referred to a way to calculate the height. So I did not copy an answer, this is a different solution. — bjorn.lau, May 13 '23 at 13:17

SwiftUI - Putting a bar above the TabView?

1 Answers1