ios - swift 4 : How to add a circle point as a selection indicator to a UITabbarItem

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

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