How to make an instagram-like tab?

Question

How to make an Instagram-like tab like this?

Instagram's tab

Do I need to make more than one UIViewControllers or make something on one UIViewController?

Thanks in advance for any help!

Answer 1

I suggest to use ESTabBarControllerExample https://github.com/eggswift/ESTabBarController to making that kind of custom TabbarController.First Download the ESTabbarControllerExample from github. We need to use some class letter on. Let me explain how to use step by step:

• First Install CocoaPods

  1 Open terminal and cd ~ to your project directory

  2 Run the command - pod init

  3 Your podfile should be use with - pod "ESTabBarController-swift" and save it

  4 And install it with command pod install

• Open project file of .xcworkspace extension

  1 In project we need to add Content all swift class and pop.framework

  2 Don't add pop.framework using add File to. you must be add from Framework and add Others.

  3 In Content folder's all file import ESTabBarController_swift

• StoryBord Stuff

  1 Add navigation Controller ane also add ExampleNavigationController from the example code of EST demo. (You can add your own too) but make sure you set its Class of navigation custom swift class.

• Code Stuff at AppDelegate.swift

You need to do following code in side didFinishLaunchingWithOptions

            let tabBarController = ESTabBarController()
            tabBarController.delegate = self
            tabBarController.title = "Irregularity"
            tabBarController.tabBar.shadowImage = UIImage(named: "transparent")
            tabBarController.tabBar.backgroundImage = UIImage(named: "background_dark")
            tabBarController.shouldHijackHandler = {
                tabbarController, viewController, index in
                if index == 2 {
                    return true
                }
                return false
            }
            tabBarController.didHijackHandler = {
                [weak tabBarController] tabbarController, viewController, index in

                DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
                    let alertController = UIAlertController.init(title: nil, message: nil, preferredStyle: .actionSheet)
                    let takePhotoAction = UIAlertAction(title: "Take a photo", style: .default, handler: nil)
                    alertController.addAction(takePhotoAction)
                    let selectFromAlbumAction = UIAlertAction(title: "Select from album", style: .default, handler: nil)
                    alertController.addAction(selectFromAlbumAction)
                    let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)
                    alertController.addAction(cancelAction)
                    tabBarController?.present(alertController, animated: true, completion: nil)
                }
            }

            let v1 = ExampleViewController()
            let v2 = ExampleViewController()
            let v3 = ExampleViewController()
            let v4 = ExampleViewController()
            let v5 = ExampleViewController()

            v1.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Home", image: UIImage(named: "home"), selectedImage: UIImage(named: "home_1"))
            v2.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Find", image: UIImage(named: "find"), selectedImage: UIImage(named: "find_1"))
            v3.tabBarItem = ESTabBarItem.init(ExampleIrregularityContentView(), title: nil, image: UIImage(named: "photo_verybig"), selectedImage: UIImage(named: "photo_verybig"))
            v4.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Favor", image: UIImage(named: "favor"), selectedImage: UIImage(named: "favor_1"))
            v5.tabBarItem = ESTabBarItem.init(ExampleIrregularityBasicContentView(), title: "Me", image: UIImage(named: "me"), selectedImage: UIImage(named: "me_1"))

            tabBarController.viewControllers = [v1, v2, v3, v4, v5]

            let navigationController = ExampleNavigationController.init(rootViewController: tabBarController)
            tabBarController.title = "Example"


        self.window?.rootViewController = navigationController

        return true

Add Images for Tabbar items and other that you want to use for in Assets. Hope that helps for you.

Sample Project: https://github.com/nitingohel/CustomTabCenterBig