Skip to content

Latest commit

 

History

History
153 lines (113 loc) · 4.93 KB

README.md

File metadata and controls

153 lines (113 loc) · 4.93 KB
Raw

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.

default-half

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)

RoundedRectShadow-half

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))

CapsuleGradient-half

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

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

defaultShapeGradient-half

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)

ForegroundView-half

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