APFloatingTabBar

July 12, 2025 · View on GitHub

A beautiful, customizable floating tab bar component for iOS applications built with SwiftUI. This library provides a modern alternative to the traditional tab bar with smooth animations, notification badges, and a centered add button.

Features

✨ Beautiful Design: Modern floating design with rounded corners and shadows
🎨 Highly Customizable: Extensive configuration options for colors, sizes, and animations
🔔 Notification Support: Built-in notification badges for tab items
➕ Add Button: Optional centered add button with custom styling
📱 iOS 15+ Support: Built for modern iOS applications
🎯 SOLID Principles: Clean, maintainable code architecture
📦 Swift Package: Easy integration via Swift Package Manager

APFloatingTabBar Poster
Modern, customizable floating tab bar for iOS

Installation

Swift Package Manager (Recommended)

In Xcode, go to File → Add Packages...
Enter the repository URL: https://github.com/Arvindcs/APFloatingTabBar.git
Choose the version you want to install and add the package to your project.
Import the module where needed:
```
import APFloatingTabBar
```

Manual Installation

Download or clone this repository.
Copy the file Sources/APFloatingTabBar/APFloatingTabBar.swift into your project.
(Optional) Copy any supporting files if you want to customize or extend the component.

Quick Start

import SwiftUI
import APFloatingTabBar

struct ContentView: View {
    @State private var selectedTab = 0
    
    private let tabs = [
        TabItem(iconName: "house.fill", title: "Home"),
        TabItem(iconName: "safari", title: "Explore", showNotification: true),
        TabItem(iconName: "chart.bar", title: "Activity"),
        TabItem(iconName: "person", title: "Profile")
    ]
    
    var body: some View {
        ZStack {
            // Your tab content here
            TabView(selection: $selectedTab) {
                HomeView().tag(0)
                ExploreView().tag(1)
                ActivityView().tag(2)
                ProfileView().tag(3)
            }
            
            // Floating Tab Bar
            VStack {
                Spacer()
                APFloatingTabBar(
                    selectedTab: $selectedTab,
                    tabs: tabs,
                    onAddButtonTap: {
                        // Handle add button tap
                        print("Add button tapped!")
                    }
                )
                .padding(.bottom, 20)
            }
        }
    }
}

Customization

The APFloatingTabBar is highly customizable through the TabBarConfiguration:

let customConfig = TabBarConfiguration(
    height: 70,
    cornerRadius: 35,
    backgroundColor: Color(.systemGray6),
    borderColor: Color(.systemGray4),
    borderWidth: 2,
    selectedColor: .purple,
    unselectedColor: .gray,
    iconSize: 26,
    showLabels: true,
    horizontalPadding: 20,
    addButtonColor: .purple,
    addButtonSize: 55,
    addButtonIcon: "plus.circle.fill",
    addButtonIconSize: 24
)

APFloatingTabBar(
    selectedTab: $selectedTab,
    tabs: tabs,
    configuration: customConfig,
    onAddButtonTap: { /* your action */ }
)

Configuration Options

TabBarConfiguration Properties

Property	Type	Default	Description
`height`	`CGFloat`	`64`	Height of the tab bar
`cornerRadius`	`CGFloat`	`64`	Corner radius of the tab bar
`backgroundColor`	`Color`	`.white`	Background color of the tab bar
`borderColor`	`Color`	`.gray`	Border color
`borderWidth`	`CGFloat`	`1`	Border width
`selectedColor`	`Color`	`.blue`	Color for selected tab
`unselectedColor`	`Color`	`.gray.opacity(0.5)`	Color for unselected tabs
`notificationColor`	`Color`	`.red`	Color for notification badges
`iconSize`	`CGFloat`	`24`	Size of tab icons
`labelSize`	`CGFloat`	`12`	Size of tab labels
`showLabels`	`Bool`	`false`	Whether to show tab labels
`horizontalPadding`	`CGFloat`	`16`	Horizontal padding
`selectionAnimation`	`Animation`	`.easeInOut`	Animation for tab selection
`addButtonColor`	`Color`	`.blue`	Color of the add button
`addButtonSize`	`CGFloat`	`50`	Size of the add button
`addButtonIcon`	`String`	`"plus"`	Icon for the add button
`addButtonIconSize`	`CGFloat`	`22`	Size of the add button icon
`addButtonAnimation`	`Animation`	`.easeInOut`	Animation for add button

TabItem Structure

struct TabItem {
    let iconName: String    // SF Symbol name
    let title: String       // Tab title
    let showNotification: Bool // Show notification badge
}