Create the custom UITabBar controller and highlight the selected tab with separator

Question

Please find the below screenshot and their specification for tabbar.

Display the corner radius to only the top left corner and apply the shadow on it.
Apply the curve to the top right corner.
Show the selected tab with red font color and show the separator underneath.

As I am stuck for the last three days.

Any help would be appreciated.

for custom tabbar refer -> https://stackoverflow.com/a/48293806/6630644 — SPatel, Sep 17 '18 at 11:25
For corner radious -> https://stackoverflow.com/questions/10167266/how-to-set-cornerradius-for-only-top-left-and-top-right-corner-of-a-uiview — SPatel, Sep 17 '18 at 11:28
See this app-> https://itunes.apple.com/us/app/luxe-radio/id1073120504?mt=8 — SPatel, Sep 17 '18 at 11:31
Thanks, @SPatel I had reviewed it but I thought for applying the curve to the UITabbar which was not able to achieve it. — Ramkrishna Sharma, Sep 18 '18 at 05:42

score 0 · Answer 1 · answered Sep 17 '18 at 11:30

Put the code in AppDelegate didFinishLaunching method:-

let tabBarController = self.window!.rootViewController as! UITabBarController
        let tabBar = tabBarController.tabBar

        DispatchQueue.main.async {
            tabBar.selectionIndicatorImage = UIImage().createSelectionIndicatorFill(fillColor:.red, lineColor:.blue,size: CGSize(width:tabBar.frame.width/CGFloat(tabBar.items!.count), height:tabBar.frame.height), lineWidth: 1.0)
            tabBar.unselectedItemTintColor = customColor
        }

and make extension of UIImage

extension UIImage {
    func createSelectionIndicatorFill(fillColor: UIColor,lineColor:UIColor,size: CGSize, lineWidth: CGFloat) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        fillColor.setFill()
        UIRectFill(CGRect(x:0, y:0, width:size.width, height:size.height - lineWidth))

        lineColor.setFill()

        UIRectFill(CGRect(x:0, y:size.height - lineWidth, width:size.width, height:lineWidth))

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }

Thanks Shabbir for your answer but it only satisy to display the separator under the selected tabbar. As I also need to match the same look of UITabbar to attach screenshot. — Ramkrishna Sharma, Sep 17 '18 at 11:37

score 0 · Answer 2 · answered Sep 17 '18 at 11:46

0

You can achieve it by creating a custom tab bar and add every respect view controller of the tab to add it as child vc with these steps.

create a custom view with a view(add buttons and separators as subviews). You can achieve the curve of top corners with either UIBezierPath or using the binary image, and manage button and separator behaviors like the color.

Add first tab's VC on view did load

    self.add(asChildViewController: firstViewController)

And add/remove(show/hide) child view controller while on every button taps like this

//MARK: - Add Child View Controller

private func add(asChildViewController viewController: UIViewController) {

// Add Child View Controller
addChildViewController(viewController)

// Add Child View as Subview
view.addSubview(viewController.view)

// Configure Child View
viewController.view.frame = view.bounds
viewController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]

// Notify Child View Controller
viewController.didMove(toParentViewController: self)
}



//MARK: - Remove Child View Controller
private func remove(asChildViewController viewController: UIViewController) {

// Notify Child View Controller
viewController.willMove(toParentViewController: nil)

// Remove Child View From Superview
viewController.view.removeFromSuperview()

// Notify Child View Controller
viewController.removeFromParentViewController()
}

answered Sep 17 '18 at 11:46

Krimi

332
1
15

Thanks for your idea which is good but for that, I need to maintain a lot of things, As I need to show the UITabbar in each VC, suppose if the user goes from first tab's VC to detail VC then I need to create the View again and display at the bottom. – Ramkrishna Sharma Sep 18 '18 at 05:06
No, you have to create a view Contoller like custumTabBarViewController, and in that VC you will manage the tab bar's view(like buttons and curve) and only add and remove the viewControllers as childVC on parentViewController(custumTabBarViewController). You don't have to create tab bar's view(like buttons and curve) everywhere. – Krimi Sep 18 '18 at 05:28
"you have to create a view Contoller like custumTabBarViewController" >> For that I need to manage each VC transition and status of the tab as well as in detail VC also. Result lots of handling and may possible for dublication of code. – Ramkrishna Sharma Sep 18 '18 at 05:38
Code duplication for sure is not there, and by using this approach you can achieve curve design. – Krimi Sep 18 '18 at 05:45
by using this approach you can achieve curve design >> Agree but I am looking if it is done by the UITabbar then it's great. – Ramkrishna Sharma Sep 18 '18 at 05:47

Create the custom UITabBar controller and highlight the selected tab with separator

2 Answers2