Create a UITabBar Programmatically
- 18 октября, 2022
- 12:16 пп
- Нет комментариев
In this short tutorial, we will learn how to create a Tab Bar without storyboard.
Step 1: Create a new Xcode project & UITabBarController
Let’s go ahead and create a new Xcode project, let’s call it TabBarExample:
Then, go to File > New… > Select Cocoa Touch Class and call the file TabBar. Make sure to select the subclass of UITabBarControlleras shown in the following example:
Step 2: Delete the storyboard and place the TabBar as the rootViewController
Let’s set up our project to be handled programmatically: go to your SceneDelegate file and replace the scene function with this code:https://medium.com/media/3e51b5366eb426aa0fa84fb6b6fc5ce3
Also, complete the following steps to remove the storyboard target:
- Delete the storyboard file.
- Remove “main” from the main interface target under Deployment Info.
- Delete the storyboard key in the Info.Plist file.
For more details on how to set up your project programmatically with a UIKit interface, check out my article on the topic.
Step 3: Let’s write some code
Copy/paste the code below and add it to the tabBar file that you have just created:https://medium.com/media/4ea464a4d1aa5d046f75fc39083ad45c
This function will help us generate the navigationController for our Tab Bar with title, icon, and icon title. Next, let’s give to our Tab Bar the corresponding ViewController, an icon image and title. Add the following function to the tabBar file:https://medium.com/media/44acbac917af32c8f79e2b1c71dfc034
Here, we are creating an array of ViewControllers. You can put as many as you want, but I recommend you do not go over five tabs in a Tab Bar.
In the example, we directly call the ViewController that was already created with the project. In a real project, call the ViewController that you want to be shown to handle your app’s organization.
A little trick: by just typing create inside the array, Xcode will automatically suggest how to complete it:
Note: in this example, we used SFSymbol for the icon of our Tab Bar. Make sure that your project target is under iOS 13 or later.
Now add these lines of code inside your ViewDidLoad function:https://medium.com/media/b89037488dc3bc31ddfa7e3b993c89e5
Here, we just call our function to add the Tab Bar and declare the Tint Color and background color.
Now, your TabBar file should look like this:
Next, run your project and you will see a Tab Bar up and running:
Another trick here: if you want to bring your user directly to the home tab (in the middle), add the following line of code inside the SceneDelegate (the index of a Tab Bar start at 0).