Full Customizable Tabbar with IBInspectables

Overview

BEKCurveTabbar

Full Customizable Tabbar with IBInspectables

CI Status License Platform

A fun replacement for UITabbar. The Component uses Bézier paths.

Demo

Example

usage:

You can change the appearance by using Xcode Interface Builder or by using the default config (recommended). BEKCurveTabbarController can be setup with your custom ViewModel that conforms to the BEKTabBarViewModelType protocol. you can set your 'tabbar' to BEKCurveTabbar inside Interface Builder or initiate it programatically in the easiest way possible like this:

Note: BEKCurveTabbarController initiates with .initiate()

Default Config Usage:

        //Initiate your viewControllers
        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .red
        firstViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .search, tag: 0)
        let secondViewController = UIViewController()
        firstViewController.view.backgroundColor = .white
        secondViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 1)
        let thirdViewController = UIViewController()
        thirdViewController.view.backgroundColor = .blue
        thirdViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .more, tag: 2)
        
        //get instance of BEKCurveTabbarController
        let tabBarViewController = BEKCurveTabbarController.instantiate()
        
        //set viewControllers to the tabbar
        tabBarViewController.setViewControllers([firstViewController, secondViewController, thirdViewController], animated: true)

Customized Config Usage:

Create a new struct that conforms to BEKTabBarViewModelType :

struct MyCustomTabBarViewModel: BEKTabBarViewModelType {
    let heightRatio: CGFloat = CGFloat(TabbarHeightRatios.bestSize.rawValue)
    let containerColor: UIColor = .white
    let hideTitle: Bool = false
    let animationDuration: CGFloat = 0.3
    let animated: Bool = true
    let shadowColor: UIColor = UIColor(red: 0.353, green: 0.784, blue: 1, alpha: 1.0)
    let shadowRadius: CGFloat = 16
    let containerBorderWidth: CGFloat = 1.0
    let containerBorderColor: UIColor = .gray
    let selectedTextColor: UIColor = .yellow
    let selectedTextFont: UIFont = .systemFont(ofSize: 13)
    let normalTextColor: UIColor = .lightGray
    let normalTextFont: UIFont = .systemFont(ofSize: 11)
    let topCornerRadius: CGFloat = TabbarHeightRatios.bestSize.cornerRadius()
    let bottomCornerRadius: CGFloat = 0
    let containerInsets: UIEdgeInsets = TabbarHeightRatios.bestSize.containerInsets()
    let selectionCircleRadius: CGFloat = TabbarHeightRatios.bestSize.circleRadius()
    let selectionCircleBorderWidth: CGFloat = 0.0
    let selectionCircleBorderColor: UIColor = .clear
    let selectionCircleBackgroundColor: UIColor = UIColor(red: 0.353, green: 0.784, blue: 1, alpha: 1.0)
    let textOffset: CGFloat = 0
    init() {}
}

Note: TabbarHeightRatios.bestSize provides you computed values for different iOS environments. (recommended)

Now you just need to pass your viewModel to .setupViewModel(viewModel: BEKTabBarViewModelType) function.

        //1- Initiate your viewControllers
        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .red
        firstViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .search, tag: 0)
        let secondViewController = UIViewController()
        firstViewController.view.backgroundColor = .white
        secondViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 1)
        let thirdViewController = UIViewController()
        thirdViewController.view.backgroundColor = .blue
        thirdViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .more, tag: 2)
        
        //2- get instance of BEKCurveTabbarController
        let tabBarViewController = BEKCurveTabbarController.instantiate()
        
        //3- Config your own TabBar ViewModel
        let myViewModel = MyCustomTabBarViewModel()
        
        //4- setup TabBar Controller with you viewModel
        tabBarViewController.setupViewModel(viewModel: myViewModel)
        
        //5- set viewControllers to the tabbar
        tabBarViewController.setViewControllers([firstViewController, secondViewController, thirdViewController], animated: true)
        return tabBarViewController

Installation

  pod 'BEKCurveTabbar', :git => 'https://github.com/behrad-kzm/BEKCurveTabbar.git'

Author

Behrad Kazemi, [email protected], bekapps.com Visit Web Site

License

BEKCurveTabbar is available under the MIT license. See the LICENSE file for more info.

You might also like...
CustomUI in SwiftUI - Full Native Custom SwiftUI NavBar, TabBar, SearchBar, Dark mode, a little bit animations

CustomUI_in_SwiftUI Full Native Custom SwiftUI NavBar, TabBar, SearchBar, Dark m

📱 TabBar – highly customizable tab bar for your SwiftUI application.
📱 TabBar – highly customizable tab bar for your SwiftUI application.

TabBar SwiftUI standard TabView component is not so flexible and to customize it you have to modify appearance proxy of UITabBar or implement your own

TabDrawer is a customizable TabBar UI element that allows you to run a block of code upon TabBarItem selection
TabDrawer is a customizable TabBar UI element that allows you to run a block of code upon TabBarItem selection

TabDrawer TabDrawer is a customizable TabBar UI element that allows you to run a block of code upon TabBarItem selection, or display a customizable dr

Simple customizable iOS bottom menu works like Tabbar, in Swift
Simple customizable iOS bottom menu works like Tabbar, in Swift

SSCustomTabMenu Simple customizable iOS bottom menu works like Tabbar, in Swift. Features Simple and customizable iOS Tab Menu items, in Swift. Requir

A customizable, full-feature, lightweight iOS framework to be used instead of UIAlertController.
A customizable, full-feature, lightweight iOS framework to be used instead of UIAlertController.

A customizable, full-feature, lightweight iOS framework to be used instead of UIAlertController.

RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

ANIMATED TAB BAR Swift UI module library for adding animation to iOS tabbar items and icons.

A lightweight customized tabbar view. 📌
A lightweight customized tabbar view. 📌

A lightweight customized tabbar view. Screenshots Features Installation Setup ToDos Credits Thanks License Screenshots Features Easily Configurable an

Simple Animated tabbar with native control
Simple Animated tabbar with native control

SSCustomTabbar Simple Animated tabbar with native control. Requirements iOS 11.0+ Xcode 10.0+ Installation SSCustomTabbar doesn't contain any external

TabBar do aplicativo do Mercado Bitcoin para iOS usando SwiftUI
TabBar do aplicativo do Mercado Bitcoin para iOS usando SwiftUI

TabBar do aplicativo do Mercado Bitcoin para iOS usando SwiftUI Screenshots Vídeos Vídeo on YouTube Requisitos iOS 14 SwiftUI Xcode 12 Meta Github: ht

A curved tabbar with a center button
A curved tabbar with a center button

WHTabbar A very simple solution to implement center button in your native UITabbar. Example To run the example project, clone the repo, and run pod in

This library is for adding animation to iOS tabbar items, which is inherited from UITabBarController.
This library is for adding animation to iOS tabbar items, which is inherited from UITabBarController.

This library is for adding animation to iOS tabbar items, which is inherited from UITabBarController. Installation Just add the Sources folder to your

Customisable iOS bottom menu works like Tabbar
Customisable iOS bottom menu works like Tabbar

SSCustomTabMenu Simple customizable iOS bottom menu works like Tabbar, in Swift. Features Simple and customizable iOS Tab Menu items, in Swift. Requir

SNTabBarDemo-Swift - Cool TabBar With Swift
SNTabBarDemo-Swift - Cool TabBar With Swift

SNTabBarDemo-Swift Cool TabBar How To Use // MARK: - setup private func setu

CustomTabBar - A Custom TabBar Built Using Swift
CustomTabBar - A Custom TabBar Built Using Swift

CustomTabBar Thanks to Riccardo Cipolleschi for his awesome tutorial. The TabBar

ListViewSwiftUI - A project for creating a vertical list using the Swift UI.This project include topic,ListView to show list of movies,Tabbar AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.
AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

Hydra ⚡️ Lightweight full-featured Promises, Async & Await Library in Swift
Hydra ⚡️ Lightweight full-featured Promises, Async & Await Library in Swift

Lightweight full-featured Promises, Async & Await Library in Swift What's this? Hydra is full-featured lightweight library which allows you to write b

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Extremely Fast views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainabl

A compact but full-featured Auto Layout DSL for Swift
A compact but full-featured Auto Layout DSL for Swift

Mortar allows you to create Auto Layout constraints using concise, simple code statements. Use this: view1.m_right |=| view2.m_left - 12.0 Instead of:

Comments
  • Better example code

    Better example code

    Your library seems amazing, but it would be helpful to have more code examples since there are a lot of developers who do not use the Interface Builder. You can use ESTabBarController as an example.

    opened by lfarah 2
  • Configurable rounded corners individually !

    Configurable rounded corners individually !

    Hi there, awesome component. I will use this everytime. But i have a problem, i need corner radius of this Tabbar to be configurable, like IBAnimatable did: https://github.com/IBAnimatable/IBAnimatable/blob/master/Documentation/APIs.md#cornerdesignable

    For example, i need to implement a tabbar rounded topLeft and topRight but squared in bottomLeft and bottomRight. Is this possible @behrad-kzm ??

    I exactly need to make this tabbar: https://www.cubacitas.app/wp-content/uploads/2019/09/mobil3.png, but this bar only have one property for all borders...

    opened by wonder2011 1
  • Swift Version !

    Swift Version !

    Hi, awesome bar, this have support for swift 4 and/or 4.2. I´m begining a project and this component is perfect, but i´m using XCode 10 and Swift 4.2. When try to install the pod trow error for swift version i think.

    opened by wonder2011 1
Owner
Behrad Kazemi
🤲🏻 I Believe in Open-Source #Swift #Typescript | IG:@codebybehrad
Behrad Kazemi
📱 TabBar – highly customizable tab bar for your SwiftUI application.

TabBar SwiftUI standard TabView component is not so flexible and to customize it you have to modify appearance proxy of UITabBar or implement your own

Tamerlan Satualdypov 162 Jan 5, 2023
TabDrawer is a customizable TabBar UI element that allows you to run a block of code upon TabBarItem selection

TabDrawer TabDrawer is a customizable TabBar UI element that allows you to run a block of code upon TabBarItem selection, or display a customizable dr

Winslow DiBona 503 Oct 5, 2022
RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

ANIMATED TAB BAR Swift UI module library for adding animation to iOS tabbar items and icons.

Ramotion 11k Jan 8, 2023
A lightweight customized tabbar view. 📌

A lightweight customized tabbar view. Screenshots Features Installation Setup ToDos Credits Thanks License Screenshots Features Easily Configurable an

Hemang 137 Dec 16, 2022
A curved tabbar with a center button

WHTabbar A very simple solution to implement center button in your native UITabbar. Example To run the example project, clone the repo, and run pod in

wajeehulhassan 18 Dec 4, 2022
Customisable iOS bottom menu works like Tabbar

SSCustomTabMenu Simple customizable iOS bottom menu works like Tabbar, in Swift. Features Simple and customizable iOS Tab Menu items, in Swift. Requir

Simform Solutions 81 Aug 3, 2022
CustomTabBar - A Custom TabBar Built Using Swift

CustomTabBar Thanks to Riccardo Cipolleschi for his awesome tutorial. The TabBar

SM Arif Ahmed 1 Feb 14, 2022
A fully customizable container view controller to display a set of ViewControllers in a horizontal scroll view. Written in Swift.

DTPagerController This is a control for iOS written in Swift. DTPagerController is simple to use and easy to customize. Screenshots Default segmented

Tung Vo 290 Nov 13, 2022
ESTabBarController is a highly customizable TabBarController component, which is inherited from UITabBarController.

ESTabBarController is a highly customizable TabBarController component, which is inherited from UITabBarController. Why? In real-world developmen

Vincent Li 4.9k Jan 5, 2023
Smooth customizable tabs for iOS apps.

SmoothTab Requirements iOS 11.0+ Swift 5.x Xcode 10+ Installation CocoaPods pod 'SmoothTab' How to use Complete screen To setup and customize the comp

Yervand Saribekyan, iOS Dev 105 Feb 13, 2022