Question

我想显示一个小圆圈点作为所选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吗？

希望您能帮助我。感谢您的回答

Answer 1

实际上很容易。 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()

Answer 2

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!
    }
}

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

2 个答案: