AnimatedTabBar Documentation

repository·main·Indexed 19 days ago

https://github.com/exyte/animatedtabbar

A SwiftUI library for implementing interactive tab navigation with preset animations. Features customizable ball trajectories (parabolic, teleport, straight), adjustable visual styles, and built-in animatable buttons like DropletButton and WiggleButton. Requires iOS 16+ and Xcode 14+.

Tokens
719
Snippets
2
Records
5
Agent score
19%

What's inside AnimatedTabBar

  1. Use AnimatedTabBar in SwiftUI

    main

    To use AnimatedTabBar, follow these steps:

    1. Create a @State Int to track the current selection.
    2. Initialize AnimatedTabBar using one of two methods:
    • View Builder Initializer: Pass any view type directly within the trailing closure. This is the most flexible method.
    • Array Initializer: Pass an array of views. Note that all views in the array must be of the same type, or you must manually wrap them in AnyView.

    Required Parameters

    • selectedIndex: A Binding<Int> to the current selection index.
    • views: The buttons to display in the tab bar.
    import AnimatedTabBar
    
    // Method 1: View Builder
    AnimatedTabBar(selectedIndex: $selectedIndex) {
        TabButton1()
        TabButton2()
        TabButton3()
    }
    
    // Method 2: Array of views
    AnimatedTabBar(selectedIndex: $selectedIndex, views: [TabButton1(), TabButton2(), TabButton3()])
  2. Customize AnimatedTabBar with modifiers

    main

    You can customize the appearance and behavior of the tab bar using the customize closure in the popup modifier.

    Visual Customizations

    • barColor: Color of the tabbar background.
    • selectedColor: Color for the selected tab (use template rendering for proper application).
    • unselectedColor: Color for unselected tabs.
    • ballColor: Color of the ball indicator.
    • verticalPadding: Space between the buttons and the bar's top/bottom edges.
    • cornerRadius: Corner radius for the tabbar background.

    Animation Customizations

    • ballAnimation: Animation curve for the ball motion (default is .easeOut(duration: 0.6)).
    • indentAnimation: Animation curve for the growing/shrinking of the indent.
    • buttonsAnimation: Animation curve for applying color to tab buttons.
    • ballTrajectory: Defines the path of the ball indicator:
      • .parabolic: Jumps to the selected button following a parabolic arc.
      • .teleport: Disappears and quickly re-appears above the selected tab.
      • .straight: Slides directly to the selected tab.

    Events

    • didSelectIndex: A closure called every time a tab is tapped.