• Usage
  • Shape and Fill Style
  • Visibility with Animation and Transition
• Installation
  • Swift Package Manager (SPM)
  • Xcode

TabBar

TabBar is a highly customizable tab bar view made in SwiftUI that functions similarly to TabView.

Usage

Similar to TabView, the TabBar accepts a Binding value that conforms to Hashable.

import SwiftUI
import TabBarModule

struct ContentView: View {
    @State private var item: Int = 0

    var body: some View {
        TabBar(selection: $item) {
            HomeView()
                .tabItem(0) {
                    Image(systemName: item == 0 ? "house.fill" : "house")
                        .font(.title3)
                    Text("Home")
                        .font(.system(.footnote, design: .rounded).weight(item == 0 ? .bold : .medium))
                }
            MarksView()
                .tabItem(1) { /* ... */ }
            UserView()
                .tabItem(2) { /* ... */ }
        }
    }
}

The TabBar provides a default style when no other modifiers are set.

With modifiers, it is easy to set the TabBar's styles.

TabBar(selection: $item) {
    // ...
}
.tabBarFill(.regularMaterial)
.tabBarMargins(.vertical, 8)
.tabBarPadding(.vertical, 8)
.tabBarPadding(.horizontal, 16)
.tabBarShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.tabBarShadow(radius: 1, y: 1)

Shape and Fill Style

The TabBar accepts any background shape that conforms to the Shape protocol (e.g., Capsule).

TabBar(selection: $item) { /* ... */ }
    .tabBarPadding(.vertical, 8)
    .tabBarPadding(.horizontal, 16)
    .tabBarShape(Capsule(style: .continuous))
    .tabBarFill(.linearGradient(
        colors: [.yellow, .yellow.opacity(0.4)], 
        startPoint: .top, endPoint: .bottom))

The TabBar accepts any fill that conforms to the ShapeStyle protocol.

TabBar(selection: $item) { /* ... */ }
    .tabBarFill(.linearGradient(
        colors: [.orange, .yellow], startPoint: .top, endPoint: .bottom))

In addition to using ShapeStyle for filling, you can also use any view to set the foreground of the TabBar.

TabBar(selection: $item) { /* ... */ }
    .tabBarForeground {
        Image("BarOrange").resizable().scaledToFill()
    }
    .tabBarShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
    .tabBarShadow(radius: 1, y: 2)

Visibility with Animation and Transition

The TabBar accepts a Binding value of type Visibility to control its visibility. When visibility is set to .automatic, the TabBar will observe the keyboard's appearance to automatically show or hide itself.

You can customize the animation and transition for the appearance and disappearance of the TabBar.

TabBar(selection: $item, visibility: $visibility) { /* ... */ }
    .tabBarTransition(.move(edge: .bottom).combined(with: .opacity))
    .tabBarAnimation { isTabBarVisible in
        isTabBarVisible ? .easeInOut : .linear
    }

Installation

Requirement: iOS 15.0+

Swift Package Manager (SPM)

Add the following line to the dependencies in Package.swift, to use the TabBarModule in a SPM project:

.package(url: "https://github.com/zijievv/swiftui-tab-bar", from: "0.0.1"),

In your target:

.target(name: "<TARGET_NAME>", dependencies: [
    .product(name: "TabBarModule", package: "swiftui-tab-bar"),
    // ...
]),

Add import TabBarModule into your source code to use TabBar.

Xcode

Go to File > Add Package Dependencies... and paste the repo's URL:

https://github.com/zijievv/swiftui-tab-bar.git