点击时如何停止标签栏项目图像的背景宽度变化？

Posted 2023-03-22

【中文标题】点击时如何停止标签栏项目图像的背景宽度变化？

【英文标题】：How to stop Tab Bar Item images' background width changing when tapped?

【发布时间】：2018-12-01 22:42:16

【问题描述】：

当我单击标签栏项目图像时，它们的背景（或其他任何内容）宽度会增加。正如您在下面的屏幕截图中看到的那样，图像大小是固定的，但在我点击其中任何一个后，背景宽度会增加。

有谁知道如何阻止它发生？

以下是我的 UITabBarController 视图中的代码

    for tabBarItem in (self.tabBar.items)!
        tabBarItem.title = ""
        tabBarItem.imageInsets = UIEdgeInsetsMake(6.0, 0.0, -6.0, 0.0)

        let viewTabBar = tabBarItem.value(forKey: "view") as? UIView
        let imgView = viewTabBar?.subviews[0] as? UIImageView

        imgView?.frame.size.height = 32
        imgView?.frame.size.width = 32

        imgView?.clipsToBounds = true
        imgView?.backgroundColor = .red
    

【参考方案1】：

尝试在viewDidLayoutSubviews() 中添加该代码，然后不要设置imageView 的大小和宽度，只需将图像作为图像添加到tabBarItem。

我不知道您使用的选项卡图像的名称，但例如，让我们调用 xcassests 中的第一张图像homeIcon，第二张图像middleIcon 和最后一张图像settingsIcon

这就是我使用这些图像和其他代码对我的 TabBarController 进行子类化的方法，以便在 viewDidLayoutSubviews() 内没有图像标题的情况下使图像居中。

class MyTabBarController: UITabBarController 

    override func viewDidLoad() 
        super.viewDidLoad()

        let homeVC = HomeController()
        let navVCHome = UINavigationController(rootViewController: homeVC)
        navVCHome.tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "homeIcon"), tag: 0)

        let middleVC = MiddleController()
        let navVCMiddle = UINavigationController(rootViewController: middleVC)
        navVCMiddle.tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "middleIcon"), tag: 1)

        let settingsVC = SettingsController()
        let navVCSettings = UINavigationController(rootViewController: settingsVC)
        navVCSettings.tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "settingsIcon"), tag: 2)

        viewControllers = [navVCHome, navVCMiddle, navVCSettings]
    

    override func viewDidLayoutSubviews() 
        super.viewDidLayoutSubviews()

        for tabBarItem in tabBar.items ?? [] 

             tabBarItem.title = ""
             tabBarItem.imageInsets = UIEdgeInsets(top: 6.0, left: 0.0, bottom: -6.0, right: 0.0 )
        
    

【讨论】：

抱歉没用。我的实际问题是徽章不在这些图标的右上角，因为这些图标存在一些宽度问题，我不知道为什么会这样。到目前为止，我尝试过的方法都不起作用。

如果是徽章问题，您需要更改标题或将其包含在问题中。我在这两个地方都没有看到任何关于徽章的信息

徽章应该放在应该放置的位置，如果图标放置正确，它将正确放置，否则我们将一直重新定位徽章。

【参考方案2】：

应该很容易通过逻辑分析来发现，唉！我或其他任何人都想不通。

有一个代码正在更改所选标签栏项目图像的大小。我删除了这段代码，它工作正常。正如我在上面写的那样，如果图像尺寸设置正确，那么徽章总是会正确定位自己，并且不需要重新定位徽章。