https://github.com/zijievv/swiftui-tab-bar
A highly customizable tab bar view made in SwiftUI
https://github.com/zijievv/swiftui-tab-bar
customview ios swift swiftui tab-bar tabbar
Last synced: over 1 year ago
JSON representation
A highly customizable tab bar view made in SwiftUI
- Host: GitHub
- URL: https://github.com/zijievv/swiftui-tab-bar
- Owner: zijievv
- License: apache-2.0
- Created: 2023-05-18T08:08:14.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-01T14:30:43.000Z (about 2 years ago)
- Last Synced: 2024-06-01T16:34:37.411Z (about 2 years ago)
- Topics: customview, ios, swift, swiftui, tab-bar, tabbar
- Language: Swift
- Homepage:
- Size: 1.12 MB
- Stars: 67
- Watchers: 4
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
- [Usage](#usage)
- [Shape and Fill Style](#shape-and-fill-style)
- [Visibility with Animation and Transition](#visibility-with-animation-and-transition)
- [Installation](#installation)
- [Swift Package Manager (SPM)](#swift-package-manager-(spm))
- [Xcode](#xcode)
# TabBar
**`TabBar`** is a highly customizable tab bar view made in SwiftUI that functions similarly to [`TabView`](https://developer.apple.com/documentation/swiftui/tabview).
## Usage
Similar to `TabView`, the `TabBar` accepts a Binding value that conforms to `Hashable`.
```swift
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.
```swift
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`).
```swift
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.
```swift
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`.
```swift
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`.
```swift
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](https://www.swift.org/package-manager/) (SPM)
Add the following line to the dependencies in `Package.swift`, to use the `TabBarModule` in a SPM project:
```swift
.package(url: "https://github.com/zijievv/swiftui-tab-bar", from: "0.0.1"),
```
In your target:
```swift
.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
```