如何在 Swift 的标签栏项目中设置图像?

Posted

技术标签:

【中文标题】如何在 Swift 的标签栏项目中设置图像?【英文标题】:How to set image in a tab bar item in Swift? 【发布时间】:2017-02-04 13:41:01 【问题描述】:

我采用了一个视图控制器并将其嵌入到导航控制器中,并且它再次嵌入到了标签栏控制器中。当我尝试通过故事板设置图像时,图像不会出现在标签栏图标上。这里的图片名称是 25。

我能做什么?我怎样才能以编程方式做到这一点?为此,我应该采取什么合适的图像尺寸?

【问题讨论】:

NO,不用编。也可以通过上述方法完成。 但是为什么这对我的项目不起作用? 你能显示输出截图吗? 这看起来像最后一张图片 这可能会帮助你***.com/a/38560183/6433023 【参考方案1】:

设置两个图像 - 用于选择/选定状态

【讨论】:

我确实喜欢你,但同样的问题。这是我无法理解的计算机的错误或问题。他们有任何图像、图像大小的命名约定吗? 当我使用来自 iconbeast 或 icons8 的图标时,它们可以很好地显示,但是当我使用我的图像时,它们不受支持。有什么想法吗? See This 并检查代码中的错误【参考方案2】:

添加 AppDelegate 类:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool

    window=UIWindow(frame: UIScreen.main.bounds)
    self.window?.rootViewController = setTabbar()
    self.window?.makeKeyAndVisible()
    window?.backgroundColor=UIColor.white
    return true


func setTabbar() -> UITabBarController

    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    let tabbarcntrl = UITabBarController()

    let Home = storyboard.instantiateViewController(withIdentifier: "HomeView") // 1st tab bar viewcontroller
    let Followed = storyboard.instantiateViewController(withIdentifier: "FollowedView") // 2nd tab bar viewcontroller
    let Message = storyboard.instantiateViewController(withIdentifier: "MessageView") // 3rd tab bar viewcontroller

    // all viewcontroller embedded navigationbar
    let nvHome = UINavigationController(rootViewController: Home)
    let nvFollowed = UINavigationController(rootViewController: Followed)
    let nvMessage = UINavigationController(rootViewController: Message)

    // all viewcontroller navigationbar hidden
    nvHome.setNavigationBarHidden(true, animated: false)
    nvFollowed.setNavigationBarHidden(true, animated: false)
    nvMessage.setNavigationBarHidden(true, animated: false)

    tabbarcntrl.viewControllers = [nvHome,nvFollowed,nvMessage]

    let tabbar = tabbarcntrl.tabBar
    tabbar.barTintColor = UIColor.black
    tabbar.backgroundColor = UIColor.black
    tabbar.tintColor = UIColor(red: 43/255, green: 180/255, blue: 0/255, alpha: 1)

    //UITabBar.appearance().tintColor = UIColor.white
    let attributes = [NSFontAttributeName:UIFont(name: "Montserrat-Light", size: 10)!,NSForegroundColorAttributeName:UIColor.white]
    let attributes1 = [NSFontAttributeName:UIFont(name: "Montserrat-Light", size: 10)!,NSForegroundColorAttributeName:UIColor(red: 43/255, green: 180/255, blue: 0/255, alpha: 1)]

    UITabBarItem.appearance().setTitleTextAttributes(attributes, for: .normal)
    UITabBarItem.appearance().setTitleTextAttributes(attributes1, for: .selected)


    let tabHome = tabbar.items![0]
    tabHome.title = "Home" // tabbar titlee
    tabHome.image=UIImage(named: "icon_home.png")?.withRenderingMode(.alwaysOriginal) // deselect image
    tabHome.selectedImage = UIImage(named: "icon_home.png")?.withRenderingMode(.alwaysOriginal) // select image
    tabHome.titlePositionAdjustment.vertical = tabHome.titlePositionAdjustment.vertical-4 // title position change

    let tabFoll = tabbar.items![1]
    tabFoll.title = "Followed"
    tabFoll.image=UIImage(named: "icon_fold.png")?.withRenderingMode(.alwaysOriginal)
    tabFoll.selectedImage=UIImage(named: "icon_fold.png")?.withRenderingMode(.alwaysOriginal)
    tabFoll.titlePositionAdjustment.vertical = tabFoll.titlePositionAdjustment.vertical-4

    let tabMsg = tabbar.items![3]
    tabMsg.title = "Message"
    tabMsg.image=UIImage(named: "icon_mail.png")?.withRenderingMode(.alwaysOriginal)
    tabMsg.selectedImage=UIImage(named: "icon_mail.png")?.withRenderingMode(.alwaysOriginal)
    tabMsg.titlePositionAdjustment.vertical = tabMsg.titlePositionAdjustment.vertical-4

    return tabbarcntrl

【讨论】:

在 AppDelegate 类中【参考方案3】:

您正在以正确的方式做所有事情但唯一的问题是您的 tabbaritem 图像大小不正确。请查看此表以了解 tabbaritem 图像的实际大小。

【讨论】:

当我从图像图标下载图像时,它的属性显示为 30x30 您需要创建 1x 、 2x 、 3x 的 Tabbar 图标。因此,适合您的图像的资源是:30x30 - 1x、60x60 - 2x、90x90 - 3x (大约 75 x 75)是什么意思? 这是一个示例尺寸,仅当您有 1x 大小为 25x25 的图像然后您有 75x75 in 3x 时。【参考方案4】:

在您的 MainTabbarViewController 中

绑定标签栏的出口:

@IBOutlet weak var myTabBar: UITabBar?
 
 override func viewDidLoad() 
      super.viewDidLoad()
      
      myTabBar?.tintColor = UIColor.white
      tabBarItem.title = ""
      
      setTabBarItems()
      
 

设置tabbar项在这里定义的方法如下:

func setTabBarItems()
      
      let myTabBarItem1 = (self.tabBar.items?[0])! as UITabBarItem
      myTabBarItem1.image = UIImage(named: "Unselected")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem1.selectedImage = UIImage(named: "Selected ")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem1.title = ""
      myTabBarItem1.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
      let myTabBarItem2 = (self.tabBar.items?[1])! as UITabBarItem
      myTabBarItem2.image = UIImage(named: "Unselected")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem2.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem2.title = ""
      myTabBarItem2.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
      
      let myTabBarItem3 = (self.tabBar.items?[2])! as UITabBarItem
      myTabBarItem3.image = UIImage(named: "Unselected")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem3.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem3.title = ""
      myTabBarItem3.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
      let myTabBarItem4 = (self.tabBar.items?[3])! as UITabBarItem
      myTabBarItem4.image = UIImage(named: "Unselected")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem4.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
      myTabBarItem4.title = ""
      myTabBarItem4.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
 

【讨论】:

如果你不在任何地方使用标签栏插座有什么用?【参考方案5】:

在 swift 4 和 5 中,您可以使用以下扩展。记住一件事总是传递相同数量的图像、选定的图像和标题,但如果您不想设置标题,则在标题中传递 nil。

extension UITabBarController        
        func setUpImagaOntabbar(_ selectedImage : [UIImage], _ image : [UIImage], _ title : [String]?)
            
            for (index,vals) in image.enumerated()
                
                if let tab = self.tabBar.items?[index]
                    
                    tab.image = image[index]
                    tab.image = selectedImage[index]
                    if let tile = title[index]
                       tab.title = title[index]
                      
                    
                
            
        
    

【讨论】:

以上是关于如何在 Swift 的标签栏项目中设置图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何让自定义标签栏显示标签栏项目在 Xcode 中设置的选定图像?

iOS 8:在界面构建器中设置的自定义标签栏项目的选定图像不起作用

如何在更多视图控制器的导航栏中设置图像并将更多标签的颜色从白色更改为绿色..?

如何在目标c中设置标签栏项badgeValue?

在通知回调中设置时,标签不会出现在标签栏项目上

如何在iphone中设置默认选中Tab bar item 1?