CODEWITHSUNDEEP
iosswiftui
Sukitha Udugamasooriya
Sukitha Udugamasooriya

Reputation: 2308

Swiftui how to add a view above a tabview?

The requirement is to display a banner above the tabbar. So that the banner does not disappear when the tabs are changed? How can I achieve it?

enter image description here

Upvotes: 1

Views: 5652

Answers (2)

Helperbug
Helperbug

Reputation: 567

Update Try a pair of TabViews bound to the same State:

struct BanneredTabView: View {
    @State private var selected = panels.one
    
    var body: some View {
        VStack {
            TabView(selection: $selected) {
                panels.one.label.tag(panels.one)
                panels.two.label.tag(panels.two)
                panels.three.label.tag(panels.three)
            }
            .tabViewStyle(PageTabViewStyle())
            Text("Banner")
                .frame(height: 40, alignment: .top)
            TabView(selection: $selected) {
                ForEach(panels.allCases) { panel in
                    Text("").tabItem {
                        panel.label
                    }
                    .tag(panel)
                }
            }
            .frame(height: 30)
        }
    }
    
    enum panels : Int, CaseIterable, Identifiable {
        case one = 1
        case two = 2
        case three = 3
        
        var label : some View {
            switch self {
            case .one:
                return Label("Tab One", systemImage: "1.circle")
            case .two:
                return Label("Tab Two", systemImage: "2.square")
            case .three:
                return Label("Tab Three", systemImage: "asterisk.circle")
            }
        }
        // so the enum can be identified when enumerated
        var id : Int { self.rawValue }
    }
}

Upvotes: 1

John Nimis
John Nimis

Reputation: 606

I can think of starting points, to help you see ways to approach this, but I don't think either idea really meets your requirements. It will depend on the details of whether the banner is permanent, where its content comes from, etc.

The first idea:

struct BannerView : View {
    
    var text : String
    
    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Text(text)
                Spacer()
            }.background(Color.orange)
            
        }
    }
}

Then you can include this in a ZStack along with your tabs:

TabView {
    ZStack {
        Text("Tab 1")
        BannerView("BANNER")
    }.tabItem { Text("Home") }
    ZStack {
        Text("Tab 2")
        BannerView("BANNER")
    }.tabItem { Text("History") }
}

The second idea uses the BannerView from the first idea, but in a slightly cleaner way, still not great:

struct TabWrapperWithOptionalBanner<Content> : View where Content : View {

    var showBanner : Bool
    var content : Content
    
    init(showBanner : Bool, @ViewBuilder content: () -> Content) {
        self.showBanner = showBanner
        self.content = content()
    }
        
    var body: some View {
        ZStack {
            content
            if showBanner {
                BannerView(text: "BANNER")
            }
        }
    }
}

then your ContentView looks like this:

TabView {
    TabWrapperWithOptionalBanner(showBanner: showBanner) {
        Text("Tab 1")
    }.tabItem { Text("Home") }
    TabWrapperWithOptionalBanner(showBanner: showBanner) {
        Text("Tab 2")
    }.tabItem { Text("History") }
}

Upvotes: 2

Related Questions