如何在Storyboard中调整UITabBarItem图标与标题的位置

问题根源 #

你当前的核心问题有两个：

1. 函数调用顺序错误：先设置中间TabBarItem的属性，再调用setupTabBarAppearance配置外观，导致后续的Appearance设置覆盖了之前对TabBarItem的位置调整。
2. 图标位置调整方式不对：仅设置标题偏移，未通过imageInsets调整图标的位置。

解决方案 #

1. 调整函数调用顺序

在viewDidLoad中先执行外观配置，再调整中间TabBarItem的属性，确保Item的自定义设置不会被Appearance覆盖：

class NavigationTabViewController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 先配置TabBar外观，再调整中间Item
        self.setupTabBarAppearance()
        self.setupMiddleTabBarItem()
    }
}

2. 修改中间TabBarItem的配置函数

通过imageInsets让图标下移，同时保留标题偏移设置，确保两者同步移动：

extension UITabBarController {
    func setupMiddleTabBarItem() {
        guard let middleTabBarItem = self.tabBar.items?[2] else { return }

        // 直接设置图标大小（比依赖初始image更可靠）
        let customImage = UIImage(systemName: "plus.circle.fill", 
                                 withConfiguration: UIImage.SymbolConfiguration(pointSize: 36))?
                            .withTintColor(.customGreen, renderingMode: .alwaysOriginal)
        
        middleTabBarItem.title = "Add Product"
        middleTabBarItem.image = customImage
        
        // 下移标题10pt
        middleTabBarItem.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 10)
        // 下移图标10pt：top设为正数会让图标向下偏移，bottom设为负数抵消布局影响
        middleTabBarItem.imageInsets = UIEdgeInsets(top: 10, left: 0, bottom: -10, right: 0)
    }
}

补充说明

• imageInsets的top值设为正数时，图标会向下移动；bottom设为对应的负数是为了保持TabBarItem的整体布局高度不变，避免挤压其他元素。
• 直接指定图标pointSize比依赖初始image?.size更可靠，因为初始Item的image可能为nil，导致尺寸计算错误。

内容的提问来源于stack exchange，提问作者Feron2000