onl1ner/tabbar

📱 TabBar – highly customizable tab bar (i.e. TabView) for your SwiftUI application.

TabBar

SwiftUI standard TabView component is not so flexible and to customize it you have to modify appearance proxy of UITabBar or implement your own one from scratch. The goal of this library is to solve this problem.

Table of contents

• Requirements
• Installation
  • Swift Package Manager
• Usage
  • Customization
• Contribution
• License

Requirements

• SwiftUI
• iOS 13.0 or above

Installation

TabBar is available through Swift Package Manager

Swift Package Manager

• In Xcode select:

  File > Swift Packages > Add Package Dependency...
  

• Then paste this URL:

  https://github.com/onl1ner/TabBar.git
  

Usage

To start using TabBar you have to create an enum which will implement Tabbable protocol:

enum Item: Int, Tabbable {
    case first = 0
    case second
    case third
    
    var icon: String {
        switch self {
            case .first:  // Name of icon of first item.
            case .second: // Name of icon of second item.
            case .third:  // Name of icon of third item.
        }
    }
    
    var title: String {
        switch self {
            case .first:  // Title of first item.
            case .second: // Title of second item.
            case .third:  // Title of third item.
        }
    }
}

After that you will be able to create TabBar instance:

struct ContentView: View {
    @State private var selection: Item = .first
    @State private var visibility: TabBarVisibility = .visible

    var body: some View {
        TabBar(selection: $selection, visibility: $visibility) {
            Text("First")
                .tabItem(for: Item.first)
            
            Text("Second")
                .tabItem(for: Item.second)
            
            Text("Third")
                .tabItem(for: Item.third)
        }
        .tabBar(style: CustomTabBarStyle())
        .tabItem(style: CustomTabItemStyle())
    }
}

After these actions tab bar with default style will be created.

Customization

TabBar component is highly customizable. This is achieved by introducing TabBarStyle and TabItemStyle protocols. By implementing each of the protocol you will be able to build your custom tab bar. NOTE that TabBar automaticaly pushes down to bottom any of tab bar styles.

After creating your custom styles you may inject them to your tab bar by using tabBar(style:) and tabItem(style:) functions. Here is the showcase of default style and one of the examples of what you can achieve by customizing tab bar:

Contribution

If you struggle with something feel free to open an issue. Pull requests are also appreciated.

License

TabBar is under the terms and conditions of the MIT license.

MIT License

Copyright (c) 2021 Tamerlan Satualdypov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

tabbar's Issues

How can I change visibility status on another view ? Seems not working

Hi
I would like to hide and show the TabBar when click a view

it show invisible but its not updating

No releases

It would be great if the project had releases and used semantic versioning. It would make the usage and update much easier.

Right now it has to be integrated using branches or commits.

Unable to dynamically change the tabItem icon when tab is selected

Is there a way of changing the icon name with respect to the selection state variable? Example: When "Home" tab is selected, I want to use SF-icon "house.fill", otherwise "house".

Content is hidden behind TabBar

diff --git a/Example/Example/ContentView.swift b/Example/Example/ContentView.swift
index 5b7e8e3..8e591c2 100644
--- a/Example/Example/ContentView.swift
+++ b/Example/Example/ContentView.swift
@@ -61,14 +61,23 @@ struct ContentView: View {
                 Text("Hide/Show TabBar")
             }
             .tabItem(for: Item.first)
-            
-            Text("Second")
-                .tabItem(for: Item.second)
+
+            ScrollView {
+                VStack {
+                    ForEach(0..<100, id: \.self) { i in
+                        Rectangle()
+                            .fill(Color.accentColor)
+                            .overlay(
+                                TextField("\(i)", text: .constant("\(i)"))
+                            )
+                    }
+                }
+            }
+            .tabItem(for: Item.second)
             
             Text("Third")
                 .tabItem(for: Item.third)
         }
-        .tabBar(style: CustomTabBarStyle())
         .tabItem(style: CustomTabItemStyle())
     }
 }

Updating Selection from Another View

How I can updated selected State if I'm navigating to view (presented TabBar), but not from TabBar, like from button inside of another view, or using NavigationLink in another view.

Thank you

View with TabBar

struct GeneralView View {
    
    enum Item: Int, Tabbable {
        case home = 0
        case letters
        case heritage
        case bookmarks
        case third
        
        
        var icon: String {
            switch self {
                case .letters: return "textformat"
                case .heritage: return "command"
                case .home: return "house.fill"
                case .third: return "quote.bubble"
                case .bookmarks: return "bookmark.fill"
               
            }
        }
        
        var title: String {
            switch self {
                case .letters: return "Letters"
                case .heritage: return "Heritage"
                case .home: return "Arageel"
                case .third: return "Third"
                case .bookmarks: return "Bookmarks"
               
            }
        }
    }
    
    @State private var selection: Item = .home
    @State private var visibility: TabBarVisibility = .visible
    
    
    var body: some View {
        
        TabBar(selection: $selection, visibility: $visibility) {
            LettersGridView()
                .tabItem(for: Item.letters)
            
            HeritageZineHomeView()
                .environmentObject(RSSReader())
                .tabItem(for: Item.heritage)
            HomeView()
                .tabItem(for: Item.home)
            PBHomeView()
                .tabItem(for: Item.third)
            
            PBHomeView()
                .tabItem(for: Item.bookmarks)
        }
        .tabBar(style: CustomTabBarStyle())
        .tabItem(style: CustomTabItemStyle())
        .ignoresSafeArea(.all)
    }
}

Another View

    var stickyHeaderView: some View {
        HStack {
            Text("Heritage").modifier(MainStoryTitle(color: "BlackDark"))
            Spacer()
            NavigationLink (
                destination:
                    HeritageHomeView()
            ) {
                Image(systemName: "arrow.up.forward")
                    .foregroundColor(Color("Orange"))
            }
        }
        .padding(.horizontal, 30)

    }

Using environmental size classes

Is there a way to use environmental size classes when defining a custom TabItemStyle?

I would like to show text bellow the icon when the app has a .regular .horizontalSizeClass, and only show the icon when it is .compact. With the current implementation I'm not really sure how to do it in a way that the size class variable gets updated correctly and I don't get "Accessing Environment<Optional<UserInterfaceSizeClass>>'s value outside of being installed on a View. This will always read the default value and will not update."

TabBar doesn't follow system dark mode

I noticed that it doesn't follow system dark mode. Is this an issue or am I missing something? Thanks.

It seems the page will be recreated when switch between tabs each time.

struct ContentView: View {
    
    private enum Item: Int, Tabbable {
        case first = 0
        case second
        case third
        
        var icon: String {
            switch self {
                case .first: return "house"
                case .second: return "magnifyingglass"
                case .third: return "person"
            }
        }
        
        var title: String {
            switch self {
                case .first: return "First"
                case .second: return "Second"
                case .third: return "Third"
            }
        }
    }
    
    @State private var selection: Item = .first
    @State private var visibility: TabBarVisibility = .visible
    
    var body: some View {
        TabBar(selection: $selection, visibility: $visibility) {
            Button {
                withAnimation {
                    visibility.toggle()
                }
            } label: {
                Text("Hide/Show TabBar")
            }
            .tabItem(for: Item.first)
            
			Second()
                .tabItem(for: Item.second)
            
            Text("Third")
                .tabItem(for: Item.third)
        }
        .tabBar(style: CustomTabBarStyle())
        .tabItem(style: CustomTabItemStyle())
    }
}

struct ContentSystemTabView: View {
	var body: some View {
		TabView {
			Text("First")
				.tabItem {
					Text("first")
				}

			Second()
				.tabItem {
					Text("second")
				}
		}
	}
}

struct Second: View {
	init() {
		print("init...")
	}
	var body: some View {
		Text("Second")
	}
}

You will find the difference between TabView.

couldn't find it in SPM

copy the url and found 0 results
please help

TabBar content did not appear (render) in iOS14.0

In iOS14.0, I use TabBar in a NavigationView, content of the tabbar is invisible, but CustomTabBarStyle works.Without NavigationView, all things go well.

Every tab item has a view, is it possible to give no view to tabitem

The idea behind doing this, I want to open a view on the top of previous selected view instead of opening a new view.

Wrap the TabBar in the NavigationView on the ipad side. The TabBar cannot be displayed

Wrap the TabBar in the NavigationView on the ipad side. The TabBar cannot be displayed,How to solve this please

Add code documentation

Option to give Image String instead of custom image String

How could we give the asset string name instead of giving custom image name?

How to hide tabor dynamically

Is it possible to hide tab bar when user selects second tab item only, for example? I want to have several items and if selects first item tabbar should be show but for another (or navigation links) - not.

Feature Request: Allow badges

It would be nice to have the possibility to show a badge on a tabBar icon if needed/wanted.

The idea would be to extend TabItemStyle with a badgeNumber: Int? parameter, which would allow handling the drawing of badges. Additionally, the Tabbable protocol must also be extended with a function func badgeNumber(for item: Tabbable) -> Int?, can have a default implementation { nil }

Hide/Show TabBar

hey, great work really. Is it possible to hide the navbar? (remove from screen)|
The idea is when a user clicks on a navigation button and go to another view the navbar should fall down and when the user click on Back button it should appear again.