Smooth customizable tabs for iOS apps.

Related tags

Tab Bar SmoothTab
Overview

SmoothTab

iOS 11.0+ Swift 5.x Badge w/ Version

Preview

Requirements

  • iOS 11.0+
  • Swift 5.x
  • Xcode 10+

Installation

CocoaPods

pod 'SmoothTab'

How to use

Complete screen

To setup and customize the component you should create items with SmoothTabItem.

// Set Smooth Tab View on UIView in stroyboard
@IBOutlet weak var smoothTabView: SmoothTabView!

// Or create it without storyboard
let smoothTabView = SmoothTabView()
self.addSubview(smoothTabView)

let items: [SmoothTabItem] = [...]

// For configuring styles create new SmoothTabOptions
var options = SmoothTabOptions()
options.titleColor = UIColor.white
options.titleFont = .systemFont(ofSize: 16)
options.shadow = .default

// Finally call setup smoothTabView with items, options and give delegate
smoothTabView.setup(with: items, options: options, delegate: self)

You can customize views with options SmoothTabOptions, SmoothTabShadowOptions:

/// For set corner radius to selected view
///
/// - rounded: for calculating rounded view
/// - fixed: fixed corner radius with corner option
public enum CornerRadius {
	case rounded
	case fixed(corner: CGFloat)
}

public struct SmoothTabOptions {

	/// Tabs parent view options
	public var backgroundColor: UIColor
	public var imageContentMode: UIViewContentMode
	public var itemsMargin: CGFloat
	public var shadow: SmoothTabShadowOptions?
    public var align: ContentPreferredAlign

	/// Selected View Options
	public var titleFont: UIFont
	public var titleColor: UIColor
	public var cornerRadius: CornerRadius
	public var borderWidth: CGFloat
	public var borderColor: UIColor
	public var innerPadding: CGFloat
	public var imageTitleMargin: CGFloat

}

public struct SmoothTabShadowOptions {

	public var color: UIColor
	public var offset: CGSize
	public var opacity: Float
	public var radius: CGFloat

}

For tab selection action please implement SmoothTabDelegate:

@objc public protocol SmoothTabDelegate: class {
    func smootItemSelected(at index: Int)
}

Support

Feel free to open issuses with any suggestions, bug reports, feature requests, questions.

Let us know!

We’d be really happy if you sent us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding the animation.

License

The MIT License (MIT)

Copyright (c) 2018 Yervand

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Adapting to different screen widths by automatically placing tabs evenly

    Adapting to different screen widths by automatically placing tabs evenly

    Found that while it is possible to set all needed parameters to make tabs evenly take the width of the screen. However, this only works for a screen with fixed size. As a workaround it is possible to detect the device type and change itemsMargin, but it would be cool if SmoothTabView was able to to place its tabs evenly in any screen. Also I will need to dynamically hide/show some of the tabs, so that hardcoding itemsMargin won't work work in my case.

    opened by vitalii-tym 3
  • Making the space between tabs tappable

    Making the space between tabs tappable

    In case there are 2 tabs, the respective stackViews are small and in order to switch tabs user has to tap exactly on the image or text. This PR makes stackViews takes whole width so that tapping the white space within the target tab makes it selected now. This fix works only in cases when tabs fully fit the screen (all texts are visible).

    enhancement 
    opened by vitalii-tym 1
  • Tabs not hiding their labels if they already fit the screen nicely + bugfixes

    Tabs not hiding their labels if they already fit the screen nicely + bugfixes

    In short the changes are:

    1. If there are very few tabs of labels are small/short enough and all can fit the screen, the tabs won't hide their labels. This looks better. There is a new parameter called deselectedTitleColor in options now to set a color for labels in unselected tabs (defaults to grey).
    screenshot 2019-01-22 18 29 16
    1. issue #3 fixed
    2. added tag to SmoothTabItem and made these items equatable. This makes it possible to rely directly on the array of tab items later, when you do something (like manage view controllers) based on their presence/absence. In my case I had tabs, which could dynamically appear as data appears and the number of tabs would change thus changing the presence of view controllers in tied UIPageViewController, also tab titles could change and could not be relied upon.

    Please see also commit messages for descriptions of individual changes made.

    opened by vitalii-tym 1
  • It would be good to support badges

    It would be good to support badges

    [feature request] often it happens that there is a need to add a badge near tab to indicate there is something that needs attention inside it. It would be a great addition.

    For example:

    screenshot 2018-09-20 11 36 52

    opened by vitalii-tym 1
  • Can't make first tab selected by default

    Can't make first tab selected by default

    SmoothTabView has tapItem(at:) to programmatically make some tab selected. However, attempt to select the very first one (at index 0) gives no results. Most probably because of the if oldValue != selectedSegmentIndex check in selectedSegmentIndex's didSet

    As a workaround have to do this:

    smoothTabView.tapItem(at: 1) smoothTabView.tapItem(at: 0)

    bug 
    opened by vitalii-tym 1
  • Want to give different images in Tab section

    Want to give different images in Tab section

    Hi Team, I have an requirement, I am trying to give different images in Tab section, As I saw in Example code it is having only single image, Can you please help me Where I can put the code exactly.

    I took the code: let instagram_item = OurTeams.allTeams.map { SmoothTabItem( title: $0.rawValue, image: $0.instagram_image, selectedImage: $0.selected_instagram_Image, tintColor: UIColor(red: 96/255, green: 197/255, blue: 227/255, alpha: 1) ) }

    	let facebook_item =  OurTeams.allTeams.map { SmoothTabItem(
    			title: $0.rawValue,
    			image: $0.facebook_image,
    			selectedImage: $0.selected_facebook_Image,
    			tintColor: UIColor(red: 96/255, green: 197/255, blue: 227/255, alpha: 1)
    			)
    		}
    	let twitter_item =  OurTeams.allTeams.map { SmoothTabItem(
    			title: $0.rawValue,
    			image: $0.twitter_image,
    			selectedImage: $0.selected_twitter_Image,
    			tintColor: UIColor(red: 96/255, green: 197/255, blue: 227/255, alpha: 1)
    			)
    		}
    	
    	var items: [SmoothTabItem] = [instagram_item, facebook_item, twitter_item]
    

    But it is throwing an error: Cannot convert value of type '[SmoothTabItem]' to expected element type 'SmoothTabItem'

    Uploading Screenshot 2020-10-16 at 3.36.28 PM.png…

    opened by KOSURUUDAYSAIKUMAR 0
Releases(1.2.0)
Owner
Yervand Saribekyan, iOS Dev
Yervand Saribekyan, iOS Dev
A scroll pager that displays a list of tabs (segments) and manages paging between given views

ScrollPager A scroll pager similar to the one in Flipboard. The control creates a tabbar given a title or an image, and has the option of connecting t

Aryan Ghassemi 512 Aug 31, 2022
UITabBarController with swipe interaction between its tabs.

?? Features Zero setup Different animations Enable/Disable interactions easily Fluid gestures ?? Installation Using CocoaPods Edit your Podfile and sp

Marcos Griselli 1.4k Jan 7, 2023
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
📱 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
Full Customizable Tabbar with IBInspectables

BEKCurveTabbar Full Customizable Tabbar with IBInspectables A fun replacement for UITabbar. The Component uses Bézier paths. Demo Example usage: You c

Behrad Kazemi 169 Dec 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
:octocat: AdaptiveController is a 'Progressive Reduction' Swift UI module for adding custom states to Native or Custom iOS UI elements. Swift UI component by @Ramotion

ADAPTIVE TAB BAR 'Progressive Reduction' module for adding custom states to Native or Custom UI elements. We specialize in the designing and coding of

Ramotion 2k Nov 9, 2022
A fun, easy-to-use tab bar navigation controller for iOS.

CircleBar Don’t you, sometimes, miss fun user interfaces? Truth is, we do. Sure, you can't use them in enterprise apps for obvious reasons, but if you

softhaus 786 Dec 25, 2022
youtube iOS app template written in swift 5

Youtube iOS Template Youtube iOS Template is developed by Haik Aslanyan and written in Swift 3. Purpose of this repo is to show how ViewControllers ca

Henry Aslanyan 2.5k Jan 4, 2023
A custom tab bar controller for iOS.

ESTabBarController ESTabBarController is a custom tab bar controller for iOS. It has a tab indicator that moves animated along the bar when switching

null 122 Oct 6, 2022
Another UITabBar & UITabBarController (iOS Tab Bar) replacement, but uses Auto Layout for arranging it's views hierarchy.

GGTabBar GGTabBar is a simple UITabBar & UITabBarController replacement that uses Auto Layout for constructing the GUI. I created it for curiosity, bu

Nicolas Goles 157 Sep 26, 2022
Android PagerTabStrip for iOS.

XLPagerTabStrip Made with ❤️ by XMARTLABS. Android PagerTabStrip for iOS! ?? Looking for a SwiftUI version? Check out PagerTabStripView, it's fully wr

xmartlabs 6.8k Jan 3, 2023
A custom tab bar controller for iOS written in Swift 4.2

A custom tab bar controller for iOS written in Swift 4.0 Screenshots Installation Cocoa Pods: pod 'AZTabBar' Swift Package Manager: You can use The Sw

Antonio Zaitoun 335 Dec 11, 2022
🐛 WormTabStrip ViewPager for iOS written in Swift, which gives continuous feedback to the user when scrolling

Worm Tab Strip Worm Tab Strip is inspired by android SmartTabStrip, android view pager like library for iOS written in swift. Basically it was build u

EzimetYusup 176 Dec 13, 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
iOS Top Tab Navigation

iOS-Top-Tab-Navigation Good news for all our users out there! Now there are no boundaries to your convenience, you can pass as much words as you want

MindInventory 14 Aug 3, 2022
Swipeable Views with Tabs (Like Android SwipeView With Tabs Layout)

SMSwipeableTabView [![CI Status](http://img.shields.io/travis/Sahil Mahajan/SMSwipeableTabView.svg?style=flat)](https://travis-ci.org/Sahil Mahajan/SM

Sahil Mahajan 57 Sep 9, 2022
Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller.

A smooth, flowing, customizable decision for a UICollectionView Swift Controller We specialize in the designing and coding of custo

Ramotion 1.5k Dec 19, 2022