Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hadiuzzaman524/swiftui-scrollable-tab-view
ScrollableTabView is a SwiftUI component for creating a customizable, horizontally scrollable tab view. It offers adjustable styles for tab colors, corner radius, and spacing, and includes predefined components like WithText and WithTextAndIcon for easy tab content setup.
https://github.com/hadiuzzaman524/swiftui-scrollable-tab-view
ios scrollable-tab-view scrollableview swift swiftui tabview-swiftui
Last synced: about 1 month ago
JSON representation
ScrollableTabView is a SwiftUI component for creating a customizable, horizontally scrollable tab view. It offers adjustable styles for tab colors, corner radius, and spacing, and includes predefined components like WithText and WithTextAndIcon for easy tab content setup.
- Host: GitHub
- URL: https://github.com/hadiuzzaman524/swiftui-scrollable-tab-view
- Owner: hadiuzzaman524
- License: mit
- Created: 2024-09-03T16:34:40.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-05T15:03:11.000Z (about 2 months ago)
- Last Synced: 2024-11-05T16:27:28.442Z (about 2 months ago)
- Topics: ios, scrollable-tab-view, scrollableview, swift, swiftui, tabview-swiftui
- Language: Swift
- Homepage:
- Size: 20.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# ScrollableTabView
ScrollableTabView is a customizable, horizontally scrollable tab view built in SwiftUI. It allows you to display multiple tabs with smooth scrolling and animation. The tabs can be styled with different colors, backgrounds, and layouts. The package includes predefined tab item views like WithText and WithTextAndIcon, which make it easy to display text or text with an icon in your tabs.
## Features
- Horizontally scrollable tabs with customizable background and foreground colors.
- Support for active/inactive tab states with separate styles.
- Adjustable tab corner radius, spacing, and padding.
- Easy-to-use TabItem initializer to define custom tab views.
- Smooth transitions and animations between tabs.
- Works with SwiftUI's TabView for content rendering.
## Installation
Swift Package Manager (SPM)
To install the ScrollableTabView using Swift Package Manager, follow these steps:
1. Open your Xcode project.
2. Go to File > Add Packages.
3. In the search bar, paste the following URL:
```bash
https://github.com/hadiuzzaman524/swiftui-scrollable-tab-view.git
```
4. Select the package and click Add Package to integrate it into your project.
To create a `ScrollableTabView`, initialize it with an array of TabItem instances that define the title and body for each tab.
### Example 1: Simple Text Tabs
```swift
import SwiftUI
import ScrollableTabView
struct ContentView: View {
var body: some View {
ScrollableTabView(
items: [
TabItem(title: WithText(text: "Home"), body: Text("Home Content")),
TabItem(title: WithText(text: "Profile"), body: Text("Profile Content")),
TabItem(title: WithText(text: "Settings"), body: Text("Settings Content"))
]
)
}
}
```
Each tab's title is displayed using the WithText component.
The corresponding body is simple text content.
### Example 2: Tabs with Icons
```swift
import SwiftUI
import ScrollableTabView
struct ContentView: View {
var body: some View {
ScrollableTabView(
items: [
TabItem(title: WithTextAndIcon(text: "Home", systemName: "house"), body: Text("Home Content")),
TabItem(title: WithTextAndIcon(text: "Profile", systemName: "person.circle"), body: Text("Profile Content")),
TabItem(title: WithTextAndIcon(text: "Settings", systemName: "gearshape"), body: Text("Settings Content"))
]
)
}
}
```
### Custom Styling
`ScrollableTabView` allows you to fully customize the appearance of the tabs through several styling parameters. You can control the background color, foreground color, corner radius, and spacing for both active and inactive states of the tabs.
#### Customizing Background and Foreground Colors
You can change the background and text (foreground) colors of the active and inactive tabs using the following parameters:
- `activeBgColor`: The background color of the active tab.
- `inactiveBgColor`: The background color of inactive tabs.
- `activeColor`: The text (foreground) color of the active tab.
- `inActiveColor`: The text (foreground) color of inactive tabs.
- `cornerRadius`: Controls the roundness of the tab corners.
- `spaceBetween`: Defines the space between each tab in the scroll view.
- `leadingSpace` and `trailingSpace`: Set custom padding before the first tab and after the last tab, respectively.
### Complete Example
```swift
import SwiftUI
import ScrollableTabView
struct ContentView: View {
var body: some View {
ScrollableTabView(
activeBgColor: Color.green,
inactiveBgColor: Color.orange,
activeColor: Color.white,
inActiveColor: Color.black,
cornerRadius: 16,
spaceBetween: 10,
leadingSpace: 20,
trailingSpace: 20,
items: [
TabItem(title: WithTextAndIcon(text: "Home", systemName: "house"), body: Text("Home Content")),
TabItem(title: WithTextAndIcon(text: "Search", systemName: "magnifyingglass"), body: Text("Search Content")),
TabItem(title: WithTextAndIcon(text: "Settings", systemName: "gearshape"), body: Text("Settings Content"))
]
)
}
}
```
## Parameters
| Parameter | Type | Default | Description |
|------------------|------------|-----------------------|------------------------------------------------------------------|
| `activeBgColor` | `Color` | `Color.accentColor` | The background color for the active tab. |
| `inactiveBgColor`| `Color` | `Color.gray` | The background color for inactive tabs. |
| `activeColor` | `Color` | `Color.primary` | The text/icon color for the active tab. |
| `inActiveColor` | `Color` | `Color.secondary` | The text/icon color for inactive tabs. |
| `cornerRadius` | `CGFloat` | `12` | The corner radius applied to the tabs. |
| `spaceBetween` | `CGFloat` | `12` | The space between each tab in the scroll view. |
| `leadingSpace` | `CGFloat` | `0` | The space before the first tab. |
| `trailingSpace` | `CGFloat` | `0` | The space after the last tab. |
| `items` | `[TabItem]`| **Required** | An array of `TabItem` objects representing each tab. |
## Predefined TabItem Components
`WithText`
Displays text as the tab title.
```swift
WithText(text: "Tab Title", cornerRadius: 12)
```
`WithTextAndIcon`
Displays both text and an SF Symbol icon as the tab title.
```swift
WithTextAndIcon(text: "Tab Title", systemName: "icon.name", cornerRadius: 12)
```
## License
This package is available under the MIT license.