I am currently trying to build an app with Swift that has an UITabBarController. I have added a screenshot down below to show the result that I have right now.
Screenshot when running the app
My goal is simple. I want to move the green plus symbol a bit downwards. And to keep the title readable, I also want the "Add Product" text to be moved downwards as well.
So my question is: How can I move the plus icon downwards as well as the text?
Right now I have created two functions to make some adjustments for the TabBarController. These functions are storen inside the Xcode project, but in a different file so therefore I used extension.
extension UITabBarController {
func setupTabBarAppearance() {
// Set up appearance using UITabBarAppearance
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .customLightGrey
appearance.shadowImage = nil
appearance.shadowColor = nil
// Set the tab bar appearance
self.tabBar.standardAppearance = appearance
self.tabBar.scrollEdgeAppearance = appearance
}
}
extension UITabBarController {
func setupMiddleTabBarItem() {
// Get the middle tab bar item
guard let middleTabBarItem = self.tabBar.items?[2] else { return }
// Create a custom image with double the size of the original image
let imageSize = CGSize(width: middleTabBarItem.image?.size.width ?? 0, height: middleTabBarItem.image?.size.height ?? 0)
let customImage = UIImage(systemName: "plus.circle.fill", withConfiguration: UIImage.SymbolConfiguration(pointSize: imageSize.width * 3.0))?.withTintColor(.customGreen, renderingMode: .alwaysOriginal)
// Set the custom image and title for the middle tab bar item
middleTabBarItem.title = "Add Product"
middleTabBarItem.image = customImage
// Move the title
middleTabBarItem.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 10)
}
}
I gave the UITabBarController the following class name in the main.storyboard: 'NavigationTabViewController'. I did not assign a class name to the UITabBar in the main.storyboard (may actually be the cause of the problem). I called the functions above in the following way:
class NavigationTabViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
// Call the setupMiddleTabBarItem function
self.setupMiddleTabBarItem()
// Set the background color and remove the translucent property
self.setupTabBarAppearance()
}
}
As you can see in the picture that I added to this thread, the background is lightgray and the button is enlarged. However the button is exactly at the same place and so is the text "Add Product". I want to move both of these items, but something in these functions does not work.
N.B. If I only use the function setUpMiddleTabBarItem, then the text does move downwards. Furthermore, every method that I used to move the symbol downwards failed up untill now.