Swipeable Views with Tabs (Like Android SwipeView With Tabs Layout)

Overview

SMSwipeableTabView

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

SMSwipeableTabView is a custom control which is mixture of UIPageViewController and Scrollable Tab Bar. This is similar to Swipe view with tabs alyout in android. Any number of tabs can be added along with the swipeable views. User can fully customize the control.

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

This library works with iOS version 8.0 and above. It is written in Swift.

  • iOS 8.0+ / Mac OS X 10.9+
  • Xcode 7

Demo:

(Without Customization)

demo

Installation

####CocoaPods (iOS 8+, OS X 10.9+) SMSwipeableTabView is available through CocoaPods. To install it, simply add the following line to your Podfile:

platform: ios, '8.0'
use_framework!

target 'MyApp' do
    pod "SMSwipeableTabView"
end

####Carthage (iOS 8+, OS X 10.9+) Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

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

github "smahajan28/SMSwipeableTabView"

Run carthage update to build the framework and drag the built SMSwipeableTabView.framework into your Xcode project.

####Swift Package Manager

How to use

(check out the provided Example)

We need to add the following code in the viewController where we need to implement this control.

//Add the title bar elements as an Array of String
swipeableView.titleBarDataSource = titleBarDataSource //Array of Button Titles like ["Punjab", "Karnataka", "Mumbai"]

//Assign your viewcontroller as delegate to load the Viewcontroller
swipeableView.delegate = self

//Set the View Frame (64.0 is 44.0(NavigationBar Height) + 20.0(StatusBar Height))
swipeableView.viewFrame = CGRect(x: 0.0, y: 64.0, width: UIScreen.mainScreen().bounds.width, height: UIScreen.mainScreen().bounds.height-64.0)

//Then add the view controller on the current view.
self.addChildViewController(swipeableView)
self.view.addSubview(swipeableView.view)
swipeableView.didMoveToParentViewController(self)

Delegate Callback

Whenever you click on any segment button or swipe the page on the controller. Delegate method will return the next viewcontroller to load

func didLoadViewControllerAtIndex(index: Int) -> UIViewController {
    //We can implement switch case with the index Parameter and load new controller at every new index. Or we can load the same list view with different datasource.
    let listVC = UIViewController()
    listVC.backgroundColor = UIColor.red
    listVC.dataSource = anyArray[index] // This will be an array of arrays or we need to set our dataSource of every different controller.
    return listVC
}

Customization

We can customize each and every control in this view. Just pass a dictionary with required fields.

NOTE: Set the frame of swipeableViewController after setting all the attributes.

e.g.: If you want to change the background color of the top bar, just add the following code:

swipeableView.segmentBarAttributes = [SMBackgroundColorAttribute : UIColor.lightGray]

If you want to change the background color of the selection bar(Bar display under the segment button) and set Alpha of the selection bar, just add the following code:

swipeableView.selectionBarAttributes = [
                                        SMBackgroundColorAttribute : UIColor.green, 
                                        SMAlphaAttribute : 0.8
                                        ]

Also you can update the segment Button, just add attributes for button:

// Setting Font And BackgroundColor of Button
swipeableView.buttonAttributes = [
                                    SMBackgroundColorAttribute : UIColor.green, 
                                    SMAlphaAttribute : 0.8,
                                    SMFontAttribute : UIFont(name: "HelveticaNeue-Medium", size: 13.0)
                                 ]

if you want to add images instead of Title in buttons, you can easily set Normal and Highlighted Image attribute in the dictionary, like

// Setting Font And BackgroundColor of Button
// Here for Normal and Highlighted Images we need to send the imageName array
swipeableView.buttonAttributes = [
                                    SMBackgroundColorAttribute : UIColor.clear, 
                                    SMAlphaAttribute : 0.8,
                                    SMButtonHideTitleAttribute : true,
                                    SMButtonNormalImagesAttribute :["image_name1", "image_name2"] as [String]),
                                    SMButtonHighlightedImagesAttribute : ["high_image_name1", "high_image_name2"] as [String])
                                 ]

you can add the following attribute keys in the dictionary

SMFontAttribute // Set UIFont insatance
SMForegroundColorAttribute  // Set UIColor instance (e.g. : Button Title Label ForegroundColor)
SMBackgroundColorAttribute // Set UIColor instance
SMAlphaAttribute // Set CGFloat value
SMBackgroundImageAttribute // Set UIImage instance
SMButtonNormalImageAttribute // Set UIImage instance
SMButtonHighlightedImageAttribute // Set UIImage instance
SMButtonHideTitleAttribute // Set Bool instance

Width of selectionBar is highly customizable. We can make the width fix or variabele.

swipeableView.buttonWidth = 60.0

Similarly Height of selectionBar can be changed using

swipeableView.selectionBarHeight = 2.0 //For thin line

We can also change the height of the segmentBar, use the below line of code:

swipeableView.segementBarHeight = 50.0 //Default is 44.0

Padding in the button can be customised using:

swipeableView.buttonPadding = 10.0 //Default is 8.0

Customized App Demo

(With Customization)

demo

Author

Sahil Mahajan, [email protected]

License

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

You might also like...
SwiftUI views that arrange their children in a Pinterest-like layout
SwiftUI views that arrange their children in a Pinterest-like layout

SwiftUI Masonry SwiftUI views that arrange their children in a Pinterest-like layout. HMasonry A view that arranges its children in a horizontal mason

Ported scrcpy for mobile platforms, to remotely control Android devices on your iPhone or Android phone.
Ported scrcpy for mobile platforms, to remotely control Android devices on your iPhone or Android phone.

scrcpy-mobile Ported scrcpy for mobile platforms, to remotely control Android devices on your iPhone or Android phone. Currently only supports control

Duplicate Tab is a Safari Extension for iOS and iPadOS that makes duplicating tabs much easier!

Duplicate Tab Duplicate Tab is a Safari Extension for iOS and iPadOS that makes duplicating tabs much easier! Check it out on the App Store Privacy Po

A Safari Web Extension to allow auto-refreshing of individual tabs

Safari Web Extension - AutoRefresh See article on Medium. App store download (free and no Ads). There are a few websites that I visit and that time ou

UITabBarController with swipe interaction between its tabs.
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

Smooth customizable tabs for iOS apps.
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

Highly configurable iOS Alert Views with custom content views
Highly configurable iOS Alert Views with custom content views

NYAlertViewController NYAlertViewController is a replacement for UIAlertController/UIAlertView with support for content views and UI customization. Fe

Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views
Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views

StatusProvider Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views CocoaPods Podfile pod 'StatusProvider'

Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple
Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

A Swift utility to make updating table views/collection views trivially easy and reliable.

ArrayDiff An efficient Swift utility to compute the difference between two arrays. Get the removedIndexes and insertedIndexes and pass them directly a

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

Expose layout margins and readable content width to SwiftUI's Views

SwiftUI Layout Guides This micro-library exposes UIKit's layout margins and readable content guides to SwiftUI. Usage Make a view fit the readable con

Another UITabBar & UITabBarController (iOS Tab Bar) replacement, but uses Auto Layout for arranging it's views hierarchy.
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

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

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]

SwiftUI views that arrange their children in a flow layout.
SwiftUI views that arrange their children in a flow layout.

SwiftUI Flow SwiftUI views that arrange their children in a flow layout. HFlow A view that arranges its children in a horizontal flow. Usage ScrollVie

Reframing SwiftUI Views. A collection of tools to help with layout.
Reframing SwiftUI Views. A collection of tools to help with layout.

Overview A Swift Package with a collection of SwiftUI framing views and tools to help with layout. Size readers like WidthReader, HeightReader, and on

Arrange views in your appโ€™s interface using layout tools that SwiftUI provides.

Composing custom layouts with SwiftUI Arrange views in your app's interface using layout tools that SwiftUI provides. Overview This sample app demonst

๐Ÿž Toast for Swift - Toaster Android-like toast with very simple interface
๐Ÿž Toast for Swift - Toaster Android-like toast with very simple interface

Toaster Android-like toast with very simple interface. (formerly JLToast) Screenshots Features Queueing: Centralized toast center manages the toast qu

Comments
  • Adding this Cocoapod does not give me the updated Code

    Adding this Cocoapod does not give me the updated Code

    If i add the cocoapod, i did not receive the updated code for the project. More specifically i got error like SegmentBarAttributes not found. However SegmentAttributes are present.

    I think if you install this from cocoa pods it is giving the code from 12/21/15 . Can you please upload the recent version. I can run this repository however. If i create a new Xcode Project i would not get the current version for jan 5

    opened by vjujjavarapu 1
  • How to programatically set default selected index for the view controllers?

    How to programatically set default selected index for the view controllers?

    I have four view controllers as four tabs. I want to load the container with 3rd view controller selected by default. How can I achieve it? Thanks in advance for the help.

    opened by amit2908 0
  • Changing from LTR to RTL

    Changing from LTR to RTL

    Hi there,

    Thanks for your awesome library! Am using two languages in my app Arabic and English, does the SMSwipeableTabView supports RTL language? Also, how can i change the first selected tab? can i change the index of first view?

    Thanks in advance.

    opened by lamatat 0
Owner
Sahil Mahajan
Sahil Mahajan
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
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
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 flexible TabBarController with search tab like SNKRS.

PolioPager PolioPager is the easiest way to use PagerTabStrip including search tab in iOS. Written in pure swift. (ๆ—ฅๆœฌ่ชžใฏใ“ใกใ‚‰) Comparison SNKRS โ†“โ†“โ†“โ†“ Poil

Yuiga Wada 176 Jan 7, 2023
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
Android/iOS Apps created to practice with different iOS/Android Tech. These apps were built to have similar feature sets using native Android/iOS.

AgilityFitTodayApp Android/iOS Apps created to practice with different iOS/Android Tech. These apps were built to have similar feature sets using nati

Lauren Yew 1 Feb 25, 2022
A Swift library for swipeable table cells

BWSwipeRevealCell Using the library **Note: Use version 1.0.1 for Swift 2.3 support and version 2.0.0 or higher for Swift 3 support ** There are two m

Kyle Newsome 67 May 11, 2022
Swipeable UITableViewCell/UICollectionViewCell based on the stock Mail.app, implemented in Swift.

SwipeCellKit Swipeable UITableViewCell/UICollectionViewCell based on the stock Mail.app, implemented in Swift. About A swipeable UITableViewCell or UI

null 6k Jan 7, 2023
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