pawanline / pkcategoryview

PKCategoryView helps you to create dynamic UITabBarController, that will manage be managed on scrolling or tap on the tab

PKCategoryView

PKCategoryView helps you to create dynamic UITabBarController, that will manage be managed on scrolling or tap on the tab.

Requirements

• iOS 11.0+
• Xcode 10.0+

Installation

For manual instalation, drag Source folder into your project.

or use CocoaPod adding this line to you Podfile:

pod 'PKCategoryView'

Usage

For Static Tabs

It'll adjust all the tabs in the PKCategoryView's width.

Code example for setup:

//setting up the visual of the navBar
var config = PKCategoryViewConfiguration()
config.isNavBarScrollEnabled = false
config.normalColor = #colorLiteral(red: 0, green: 0.8, blue: 0.6, alpha: 1).withAlphaComponent(0.5)
config.selectedColor = #colorLiteral(red: 0, green: 0.8, blue: 0.6, alpha: 1)
config.indicatorColor = #colorLiteral(red: 0, green: 0.8, blue: 0.6, alpha: 1)

//frame for the category view
let rect = CGRect(x: 10.0, y: 60.0, width: (self.view.frame.size.width - 20.0), height: (self.view.frame.size.height - 70.0))

//setting up the tabs
let titleArr = ["Sushi", "Kebab", "Pizza", "Bread"]
let allTab = titleArr.map { PKCategoryItem(title: $0, normalImage: #imageLiteral(resourceName: "1"), selectedImage:#imageLiteral(resourceName: "2")) }

//create the child ViewControllers for the each tab
var allChild: [TabChildVC] = []
for (idx, ttl) in titleArr.enumerated() {
if let vc =  self.storyboard?.instantiateViewController(withIdentifier: "TabChildVC") as? TabChildVC {
vc.message = "Showing for \(ttl)"
vc.view.backgroundColor = (idx%2 == 0) ? UIColor.green.withAlphaComponent(0.3) : UIColor.yellow.withAlphaComponent(0.3)
allChild.append(vc)
}
}

//add category view to the viewController's desired view.
let catView = PKCategoryView(frame: rect, categories: allTab, childVCs: allChild, configuration: config, parentVC: self)
catView.delegate = self
self.view.addSubview(catView)

For Dynamic Tabs

It'll make the navBar as scrollable.

Code example for setup:

//setting up the visual of the navBar
var config = PKCategoryViewConfiguration()
config.isNavBarScrollEnabled = true
config.normalColor = #colorLiteral(red: 0, green: 0.8, blue: 0.6, alpha: 1).withAlphaComponent(0.5)
config.selectedColor = #colorLiteral(red: 0, green: 0.8, blue: 0.6, alpha: 1)
config.indicatorColor = #colorLiteral(red: 0, green: 0.8, blue: 0.6, alpha: 1)

//frame for the category view
let rect = CGRect(x: 10.0, y: 60.0, width: (self.view.frame.size.width - 20.0), height: (self.view.frame.size.height - 70.0))

//setting up the tabs
let titleArr = ["Pizza", "Sushi", "Bread", "Chocolate", "Massaman curry", "Buttered popcorn", "Hamburger", "Chicken", "Rendang", "Donuts"]
let allTab = titleArr.map { PKCategoryItem(title: $0, normalImage: #imageLiteral(resourceName: "1"), selectedImage:#imageLiteral(resourceName: "2")) }

//create the child ViewControllers for the each tab
var allChild: [TabChildVC] = []
for (idx, ttl) in titleArr.enumerated() {
if let vc =  self.storyboard?.instantiateViewController(withIdentifier: "TabChildVC") as? TabChildVC {
vc.message = "Showing for \(ttl)"
vc.view.backgroundColor = (idx%2 == 0) ? UIColor.green.withAlphaComponent(0.3) : UIColor.yellow.withAlphaComponent(0.3)
allChild.append(vc)
}
}

//add category view to the viewController's desired view.
let catView = PKCategoryView(frame: rect, categories: allTab, childVCs: allChild, configuration: config, parentVC: self)
catView.delegate = self
self.view.addSubview(catView)

Add Badge

For set the badge count at any index call the setBadge method of the categoryView. Code example for setup:

catView.setBadge(count: 4, atIndex: 1)

Note: Badge can be set the the count or just a dot, refer the configuration properties for setting up the things

Delegates

Just implement the protocol PKCategoryViewDelegate to the UIViewController's class, after confirming the protocol there will be two methods:

1. func categoryView(_ view: PKCategoryView, willSwitchIndexFrom fromIndex: Int, to toIndex: Int) will call before swtching the tabs.
2. func categoryView(_ view: PKCategoryView, didSwitchIndexTo toIndex: Int) will call just after the tab switched.

Useful Property:

For NavBarView and ContentView:

There is a structur PKCategoryViewConfiguration used to provide the configuration for the category view. Some of usefull properties are:

1. navBarHeight used to give the height of the to navBar of category view. Default: 44.0

2. isNavBarScrollEnabled used to decide navBar will be scrollable or not. Default: false

3. defaultFont used to provide the font for un-selected tabs. Default: UIFont.systemFont(ofSize: 15.0)

4. selectedFont used to provide the font for selected tab. Default: UIFont.systemFont(ofSize: 17.0)

5. normalColor used to provide the color for non-selected tabs. Default: #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)

6. selectedColor used to provide the color for selected tab. Default: #colorLiteral(red: 0.9568627451, green: 0.6784313725, blue: 0.3843137255, alpha: 1)

7. showBottomSeparator used to hide/show seprator between navBar and content view. Default: true

8. bottomSeparatorColor used to provide the color for bottom seprator. Default: UIColor.lightGray

9. showIndicator used to hide/show the indicator below the selected tab. Default: true

10. indicatorHeight used to provide the height for the indicator view. Default: 2.0

11. indicatorColor used to provide the color for the indicator view. Default: #colorLiteral(red: 0.9568627451, green: 0.6784313725, blue: 0.3843137255, alpha: 1)

For Badge:

1. badgeBackgroundColor used to provide background color for the badge view. Default: UIColor.red
2. badgeTextColor used to provide text color for the badge view. Default: UIColor.white
3. shouldShowBadgeCount used to decide, it will show as dot or badge count. Default: #colorLiteral(red: 0.9568627451, green: 0.6784313725, blue: 0.3843137255, alpha: 1)

Usefull in case of dot:

4. badgeDotSize used to provide size for the badge view. Default: CGSize(width: 8.0, height: 8.0)

Usefull in case of Badge Count:

5. badgeTextFont used to provide text font for the badge view. Default: UIFont.systemFont(ofSize: 12.0)
6. badgeInset used to provide the padding for the badge content. Default: UIEdgeInsets(top: 1.0, left: 3.0, bottom: 1.0, right: 3.0)
7. maxBadgeCount used to limit the badge count. If count exceed from maxBadgeCount, will be converted in to + format like: 99+ Default: 99
8. badgeBorderWidth used to provide border width for badge view. Default: 0.0
9. badgeBorderColor used to provide border color for badge view. Default: UIColor.clear

Licence

PKCategoryView is released under the MIT license.