Swift 4：如何将圆点作为选择指示器添加到 UITabbarItem

Posted 2023-03-22

【中文标题】Swift 4：如何将圆点作为选择指示器添加到 UITabbarItem

【英文标题】：Swift 4: How to add a circle point as a selection indicator to a UITabbarItem

【发布时间】：2018-08-31 09:37:38

【问题描述】：

我想显示一个小圆点作为选定 UITabBarItem 的指示器。我该怎么做？

我使用自定义的 UITabBarController。它看起来像这样：

import UIKit

class EventTabBar: UITabBarController 

override func awakeFromNib() 
    tabBar.barTintColor = UIColor.white
    tabBar.tintColor = UIColor(red: 79/255, green: 122/255, blue: 198/255, alpha: 1)
    tabBar.unselectedItemTintColor = UIColor(red: 198/255, green: 203/255, blue: 209/255, alpha: 1)
    tabBar.isTranslucent = false
    tabBar.shadowImage = UIImage()
    tabBar.backgroundImage = UIImage()

    //Add Shadow to TabBar
    tabBar.layer.shadowOpacity = 0.12
    tabBar.layer.shadowOffset = CGSize(width: 0, height: 2)
    tabBar.layer.shadowRadius = 8
    tabBar.layer.shadowColor = UIColor.black.cgColor
    tabBar.layer.masksToBounds = false
   

我可以使用selectionIndicatorImage 来执行此操作吗？

希望你能帮助我。谢谢你的回答

【问题讨论】：

您可以在标签栏的 didSelect 方法中执行此操作...在所有标签上运行循环并从上一个标签中删除点并将其添加到 selectedTab。

【参考方案1】：

let size = CGSize(width: tabController.tabBar.frame.width / (amount of items),
                  height: tabController.tabBar.frame.height)

let dotImage = UIImage().createSelectionIndicator(color: .blue, size: size, lineHeight: 7)

tabController.tabBar.selectionIndicatorImage = dotImage

-

extension UIImage 
    func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage 
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()

        let innerRect = CGRect(x: (size.width/2) - lineHeight/2,
                               y: size.height - lineHeight - 2,
                               width: lineHeight,
                               height: lineHeight)

        let path = UIBezierPath(roundedRect: innerRect, cornerRadius: lineHeight/2)
        path.fill()

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    

【参考方案2】：

其实很简单。 TabBarButton 有两个属性来设置图像，一个是TabBarItem.image，另一个是TabBarItem.selectedImage 为TabBarItem.image 属性设置一个没有圆点的图像，为TabBarItem.selectedImage 属性设置一个有圆点的图像。 如果您只想为选定状态设置圆点，请将普通图像属性设置为 UIImage()。希望这能解决问题。

scanTabBarItem.image = UIImage.fontAwesomeIcon(name: .qrcode, textColor: .white, size: CGSize(width: 30, height: 30))
scanTabBarItem.selectedImage = UIImage.fontAwesomeIcon(name: .addressBook, textColor: .white, size: CGSize(width: 30, height: 30))

如果不能正常显示任何图像，

scanTabBarItem.image = UIImage()

【讨论】：

谢谢你的回答...你能给我举个例子吗，我可以用它，这对我很有帮助，谢谢

编辑了答案。

感谢您的更新...但是，我不想以图像的形式显示所选选项卡的圆形指示符。我想让它以编程方式创建。我看过这个指南：***.com/a/33670450/10183816 如何将线条更改为圆形指示器（如 macOS 中的 Dock，当 App 运行时）希望您能再次帮助我