0

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.

HangarRash
  • 7,314
  • 5
  • 5
  • 32

0 Answers0