• Stars
    star
    284
  • Rank 140,204 (Top 3 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 1 year ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A tabbar with a number of preset animations written in pure SwiftUI

Β Β Β Β Β 

demo

Animated Tab Bar

AnimatedTabBar is a tabbar with a number of preset animations written in pure SwiftUI

Read Article Β»

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

Usage

  1. Add an Int to store the current selection
  2. Pass your buttons to the AnimatedTabBar using one of 2 initializers. For the first one you can pass any view type:
import AnimatedTabBar

AnimatedTabBar(selectedIndex: $selectedIndex) {
    TabButton1()
    TabButton2()
    TabButton3()
}

For the second one the views must have the same type, or be manually converted to AnyView

AnimatedTabBar(selectedIndex: $selectedIndex, views: [TabButton1(), TabButton2(), TabButton3()])

Required parameters

selectedIndex - binding to the current index
views - buttons to display in the tabbar

Available customizations - modifiers

use the customize closure in the popup modifier:

barColor - Color of the tabbar itself
selectedColor - Selected tab color (use template rendering for this color to be applied properly)
unselectedColor - Unselected tab color
ballColor - Ball indicator color
verticalPadding - Space from the buttons to the bar's top and bottom edges
cornerRadius - The corner radius applied to the tabbar background color
ballAnimation - Animation curve to apply to ball motion, default is .easeOut(duration: 0.6) indentAnimation - Animation curve for growing/shrinking of the indent in the tabbar
buttonsAnimation - Animation curve for applying color to tab buttons
didSelectIndex - Closure which gets called on every tab tap

ballTrajectory - Options for ball indicator animation paths:

  • parabolic - Jump to the selected button following a parabolic arc
  • teleport - Disappear and quickly re-appear above selected tab
  • straight - Slide to the selected tab

Built-in animatable tab buttons

By default tabs only have a simple color animation, but you can customize that. This library has two built-in button types you can use out-of-the-box: DropletButton and WiggleButton, and a super custom ColorButton type in the Example project. Please feel free to use them in your projects or build your own buttons on top of them.

Examples

To try the AnimatedTabBar examples:

  • Clone the repo https://github.com/exyte/AnimatedTabBar.git
  • Open terminal and run cd <AnimatedTabBarRepo>/Example/
  • Run pod install to install all dependencies
  • Run open AnimatedTabBarExample.xcworkspace/ to open the project in Xcode
  • Try it!

Installation

dependencies: [
    .package(url: "https://github.com/exyte/AnimatedTabBar.git")
]

To install AnimatedTabBar, simply add the following line to your Podfile:

pod 'ExyteAnimatedTabBar'

To integrate AnimatedTabBar into your Xcode project using Carthage, specify it in your Cartfile

github "Exyte/AnimatedTabBar"

Requirements

  • iOS 16+
  • Xcode 14+

Acknowledgements

Many thanks to Yeasin Arafat for their beautiful original work that we recreated with SwiftUI.

Our other open source SwiftUI libraries

PopupView - Toasts and popups library
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll.
MediaPicker - Customizable media picker
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation

More Repositories

1

Macaw

Powerful and easy-to-use vector graphics Swift library with SVG support
Swift
5,964
star
2

PopupView

Toasts and popups library written with SwiftUI
Swift
2,976
star
3

Grid

The most powerful Grid container missed in SwiftUI
Swift
1,643
star
4

ARTetris

Augmented Reality Tetris made with ARKit and SceneKit
Swift
1,532
star
5

ActivityIndicatorView

A number of preset loading indicators created with SwiftUI
Swift
1,276
star
6

ConcentricOnboarding

SwiftUI library for a walkthrough or onboarding flow with tap actions
Swift
1,242
star
7

FloatingButton

Easily customizable floating button menu created with SwiftUI
Swift
1,010
star
8

ScalingHeaderScrollView

A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.
Swift
890
star
9

ReadabilityKit

Preview extractor for news, articles and full-texts in Swift
Swift
829
star
10

fan-menu

Menu with a circular layout based on Macaw
Swift
726
star
11

Chat

A SwiftUI Chat UI framework with fully customizable message cells and a built-in media picker
Swift
561
star
12

SVGView

SVG parser and renderer written in SwiftUI
Swift
530
star
13

LiquidSwipe

Example of using SwiftUI to create a beautiful Liquid Swipe control
Swift
474
star
14

Macaw-Examples

Various usages of the Macaw library
Swift
354
star
15

AndroidAnimatedNavigationBar

AnimatedNavigationBar is a navigation bar with a number of preset animations written in Jetpack Compose
Kotlin
263
star
16

MediaPicker

Customizable media picker written with SwiftUI
Swift
255
star
17

replicating

Kotlin
245
star
18

ProgressIndicatorView

An iOS progress indicator view library written in SwiftUI
Swift
200
star
19

ComposeMultiplatformDribbbleAudio

A repo for the Dribbble Replicating Compose Multiplatform article
Kotlin
71
star
20

android-waves-progressbar

A depth gauge progress bar, inspired by Apple Watch dive widget.
Kotlin
41
star
21

clean-swift-article

Swift
37
star
22

sweet.eclipse

Sweet Eclipse
HTML
33
star
23

gaster

Ethereum transactions stats for your smart contracts
JavaScript
30
star
24

FlagAndCountryCode

A country code and flag icon provider library for iOS apps
Swift
28
star
25

android-replicating

Replicating complex UI using Jetpack Compose
Kotlin
23
star
26

ShapedBackgroundAndroid

Repo for the instagram-like shaped background on Android
Kotlin
23
star
27

wwdc2020-tutorials

Swift
21
star
28

AnimatedGradient

Swift
18
star
29

core-haptics-example

Swift
13
star
30

homebrew-formulae

Ruby
1
star
31

openai-assistants-api

Swift
1
star