A flexible TabBarController with search tab like SNKRS.

Overview

PolioPager

License Swift Version CocoaPods Compatible Carthage compatible


PolioPager is the easiest way to use PagerTabStrip including search tab in iOS. Written in pure swift.

(日本語はこちら)



Comparison

SNKRS



↓↓↓↓

PoiloPager

PolioPager enables us to use PagerTabStrip like SNKRS.

Installation

CocoaPods

You can use CocoaPods to install PolioPager by adding it to your Podfile:

pod 'PolioPager'

To get the full benefits, import PolioPager

import PolioPager

Carthage

Create a Cartfile that lists the framework and run carthage update. Follow the instructions to add $(SRCROOT)/Carthage/Build/iOS/PolioPager.framework to an iOS project.

github "YuigaWada/PolioPager"

Swift Package Manager

Open Xcode and Select from menu to File > Swift Packages > Add Package Depende.

Manually

  1. Download and drop PolioPager in your project.
  2. Congratulations!



Usage example

import PolioPager

class ViewController: PolioPagerViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func tabItems()-> [TabItem] {
        return [TabItem(title: "Redbull"),TabItem(title: "Monster"),TabItem(title: "Caffeine Addiction")]
    }

    override func viewControllers()-> [UIViewController]
    {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)

        let viewController1 = storyboard.instantiateViewController(withIdentifier: "searchView")
        let viewController2 = storyboard.instantiateViewController(withIdentifier: "view1")
        let viewController3 = storyboard.instantiateViewController(withIdentifier: "view2")
        let viewController4 = storyboard.instantiateViewController(withIdentifier: "view3")

        return [viewController1, viewController2, viewController3, viewController4]
    }
}



Usage

PolioPager is very simple.

First, you have to create a view controller that extends PolioPagerViewController

class ViewController: PolioPagerViewController {
    ...
}



You need at least tabItems() and viewControllers().

Tab Items

You only have to prepare TabItem Structure and override tabItems() .

Widths of each tab are automatically calculated.

override func tabItems()-> [TabItem] {
    return [TabItem(title: "Redbull"),TabItem(title: "Monster"),TabItem(title: "Caffeine Addiction")]
}

ViewControllers

Override viewControllers() .

override func viewControllers()-> [UIViewController]
{
    let storyboard = UIStoryboard(name: "Main", bundle: nil)

    let viewController1 = storyboard.instantiateViewController(withIdentifier: "searchView")
    let viewController2 = storyboard.instantiateViewController(withIdentifier: "view1")

    return [viewController1, viewController2]
}

In the above example, ViewControllers are prepared from storyboard.

For those who don't know instantiateViewController , check below.







TabItem structure

TabItem is defined as follow.

public struct TabItem {
    var title: String?
    var image: UIImage?
    var font: UIFont
    var cellWidth: CGFloat?
    var backgroundColor: UIColor
    var normalColor:UIColor
    var highlightedColor: UIColor

    public init(title: String? = nil,
    image: UIImage? = nil,
    font:UIFont = .systemFont(ofSize: 15),
    cellWidth: CGFloat? = nil,
    backgroundColor: UIColor = .white,
    normalColor: UIColor = .lightGray,
    highlightedColor: UIColor = .black){

        self.title = title
        self.image = image
        self.font = font
        self.cellWidth = cellWidth
        self.backgroundColor = backgroundColor
        self.normalColor = normalColor
        self.highlightedColor = highlightedColor

    }
}

Search ViewController

To get input on TextFiled in Search ViewController, you have to adopt PolioPagerSearchTabDelegate protocol.

For example,

import PolioPager

class SearchViewController: UIViewController, PolioPagerSearchTabDelegate, UITextFieldDelegate {

    @IBOutlet weak var label: UILabel!


    var searchBar: UIView!
    var searchTextField: UITextField!
    var cancelButton: UIButton!


    override func viewDidLoad() {
        super.viewDidLoad()

        self.searchTextField.delegate = self
    }

    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        guard let text = textField.text else{ return true }

        label.text = text
        return true
    }


}



Customization

Color & Frame & Duration

Check this.

//color
public var tabBackgroundColor: UIColor = .white

//duration
public var barAnimationDuration: Double = 0.23

public var eachLineSpacing: CGFloat = 5
public var sectionInset: UIEdgeInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 10)

public var selectedBarHeight: CGFloat = 3



//selectedBar
public var selectedBarMargins: (upper: CGFloat, lower: CGFloat) = (1, 2)

//pageView
public var pageViewMargin: CGFloat = 1



Border

You can draw the border between Tab and pageView.

public var needBorder: Bool
public var boderHeight: CGFloat = 1
public var borderColor: UIColor = .lightGray



Duration

public var barAnimationDuration: Double = 0.23 //Default.

public var barAnimationDuration: Double = 0.10



Others

You can also get these Components!

//MARK: open IBOutlet
@IBOutlet weak open var collectionView: UICollectionView!
@IBOutlet weak open var searchBar: UIView!
@IBOutlet weak open var selectedBar: UIView!
@IBOutlet weak open var pageView: UIView!
@IBOutlet weak open var searchTextField: UITextField!
@IBOutlet weak open var cancelButton: UIButton!

For Example, if you want to change the appearance of selectedBar,

//PolioPagerViewController

override func viewDidLoad() {
     self.selectedBarHeight = 2
     self.selectedBar.layer.cornerRadius = 0
     self.selectedBar.backgroundColor = .gray

     super.viewDidLoad()
 }



More

If you want to change the visible child view controller, use moveTo(index: Int)

//PolioPagerViewController

moveTo(index: 1)
moveTo(index: nextIndex)
...

You can set initial index.

class ViewController: PolioPagerViewController {

    override func viewDidLoad() {
        self.initialIndex = 1
        ...
    }
}

Todo

  • highlightedColorがうまく機能しない
  • Carthageの準備
  • selectedBarのwidthを割合指定可能に
  • 日本語版READMEの作成

Contribute

We would love you for the contribution to PolioPager, check the LICENSE file for more info.

Others

Yuiga Wada - WebSite Twitter - @YuigaWada

Distributed under the MIT license. See LICENSE for more information.

https://github.com/YuigaWada/PolioPager

Comments
  • Update PolioPagerViewController.swift

    Update PolioPagerViewController.swift

    Is it possible to switch these lines? In my project PolioPager loads the SearchViewController before its properties (searchBar, searchTextField, cancelButton) are initialized.

    This is because PageViewController.nowIndex will be set while PageViewController.initialized is true. In this case the SearchViewController will be initialized although the properties are not set yet. nowIndex will be set when calling PageViewController.setPages(). And this call happens in PolioPageViewController.setPages() before PolioPageViewController.needSearchTab is checked and the SearchViewController properties were set.

    I have no idea why this is. But switching these lines helps in my case.

    opened by muggy79 2
  • Fatal error: The number of ViewControllers must equal to the number of TabItems.

    Fatal error: The number of ViewControllers must equal to the number of TabItems.

    when i use your package, it failed with the follow error: "Fatal error: The number of ViewControllers must equal to the number of TabItems." However, my number of vc and TabItems is equal, I don't know what happened...

    opened by yuhai-bd 1
  • Add SPM Support

    Add SPM Support

    Describe the request

    A clear and concise description of what your request is.

    Purpose

    Add your clear idea of why we need this feature.

    Todo

    If you think of anything about todo, write down here.

    🌟Enhancement 
    opened by Ganesh623 1
  • Can't set items and reload data

    Can't set items and reload data

    Describe the bug

    Can't change items I set on control creation

    Expected behavior

    UITabBarController allows to change tabs, even collection view you used allows to reload data but you forbid to change view controllers array. Why?

    To Reproduce

    Just try to set another set of view controllers

    Possible cause

    Todo

    It is just another control which has 99% of inner methods and variables marked with private and this forbids any additional customization. MEN FORGET ABOUT private MODIFIER IF YOU WRITE A PUBLIC LIBRARY!

    Screenshots

    🐛Bug 
    opened by Gargo 0
  • Not able to push another ViewController from a tab controller

    Not able to push another ViewController from a tab controller

    Describe the bug

    Not able to push another ViewController from a tab view controller on self.navigationController?.pushViewController( VC )

    Getting navigationController as nil

    🐛Bug 
    opened by KalpeshThakare 1
  • Add a method for changing distance between the top edge and a tab.

    Add a method for changing distance between the top edge and a tab.

    Describe the request

    A method for changing distance between the top edge and a tab. スクリーン上端からタブまでの距離を変更するメソッド。

    Purpose

    Todo

    1. Cancel tab's AutoLayout for y axis on code.
    2. Set up AutoLayout again.

    1. コード上でTabのy軸方向のAutoLayoutを解除する
    2. AutoLayoutを設定し直す
    🌟Enhancement 
    opened by YuigaWada 0
Releases(2.6)
Owner
Yuiga Wada
Fuck regular life, fuck society, fuck the system.
Yuiga Wada
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
A TabBarController with a unique animation for selection

BATabBarController Overview Recent Versions Language Version Swift 5 2.0.1 Swift 4 1.0.1 Obj C 0.1.6 The standard TabBarController is very limited in

Bryan Antigua 1.1k Dec 25, 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
Paging view controller and scroll tab view

TabPageViewController Description TabPageViewController is paging view controller and scroll tab view. Screenshot Infinity Mode Limited Mode Customiza

M 1.3k Jan 7, 2023
Different Styles of Custom Tab Bar

LightCardTabBar An expiremental project exploring different types of custom-tabbar styles, screenshots as below. Screenshots Implementation The implem

Hussein Ryalat 31 Dec 23, 2022
Simplistic & unfinished recreation of MobileSafari's tab bar

SafariTabBar This is a simplistic recreation of the MobileSafari tab bar on iPad (prior to iPadOS 15). It is also very unfinished, and not intended in

Steven Troughton-Smith 51 Oct 26, 2022
📱 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
Aesthetic floating tab bar ––– SwiftUI & Combine ⛓️ Importable via Swift Package Manager 📦

FloatingTabBar An aesthetic floating tab bar made with SwiftUI & Combine importabable via Swift Package Manager ?? Based off BottomBar-SwiftUI Preview

10011.co 135 Jan 8, 2023
A prototype of custom tab bar using SwiftUI with techniques of mask + matchedGeometryEffect

SliderTabBar A prototype of custom tab bar using SwiftUI with techniques of mask

Ka Kui 1 Dec 24, 2021
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
Emoji Tab Bar button badges ✨

SuperBadges Add emojis and colored dots as badges for your Tab Bar buttons ✨ Usage Add an emoji badge: YourTabBarController.addDotAtTabBarItemIndex(

Oded Harth 55 Dec 13, 2021
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
📱 A minimal tab bar alternative

MiniTabBar A clean simple alternative to the UITabBar. Only shows the title when being tapped on. Gives the app a way cleaner look :) Requirements iOS

Dylan Marriott 155 Dec 20, 2022
Aesthetic floating tab bar ––– SwiftUI & Combine ⛓️ Importable via Swift Package Manager 📦

FloatingTabBar An aesthetic floating tab bar made with SwiftUI & Combine importabable via Swift Package Manager ?? Based off BottomBar-SwiftUI Preview

10011.co 134 Jan 5, 2023
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
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
Folding Tab Bar and Tab Bar Controller

FoldingTabBar.iOS Folding Tab Bar and Tab Bar Controller Inspired by this project on Dribbble Also, read how it was done in our blog Requirements iOS

Yalantis 3.7k Dec 21, 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