如何在UITabBarItem中添加小红点

如何在UITabBarItem右上angular添加红点。

我已经search了一段时间，有些人说这可以设置UITabBarItem徽章价值，但是当我给它一个尝试和设置徽章价值空白空间“”，红点有点大。我怎样才能得到一个适当的一个？非常感谢。

Answer 1

你可以试试这个方法：

 func addRedDotAtTabBarItemIndex(index: Int) { for subview in tabBarController!.tabBar.subviews { if let subview = subview as? UIView { if subview.tag == 1314 { subview.removeFromSuperview() break } } } let RedDotRadius: CGFloat = 5 let RedDotDiameter = RedDotRadius * 2 let TopMargin:CGFloat = 5 let TabBarItemCount = CGFloat(self.tabBarController!.tabBar.items!.count) let HalfItemWidth = CGRectGetWidth(view.bounds) / (TabBarItemCount * 2) let xOffset = HalfItemWidth * CGFloat(index * 2 + 1) let imageHalfWidth: CGFloat = (self.tabBarController!.tabBar.items![index] as! UITabBarItem).selectedImage.size.width / 2 let redDot = UIView(frame: CGRect(x: xOffset + imageHalfWidth, y: TopMargin, width: RedDotDiameter, height: RedDotDiameter)) redDot.tag = 1314 redDot.backgroundColor = UIColor.redColor() redDot.layer.cornerRadius = RedDotRadius self.tabBarController?.tabBar.addSubview(redDot) } 

Answer 2

为你想要的UITabBarItem设置badgeValue如下：

  // for first tab (tabBarController!.tabBar.items!.first! as! UITabBarItem).badgeValue = "1" //for second tab (tabBarController!.tabBar.items![1] as! UITabBarItem).badgeValue = "2" // for last tab (tabBarController!.tabBar.items!.last! as! UITabBarItem).badgeValue = "final" 

从UITabBarItem remove badge只是分配nil

 (tabBarController!.tabBar.items!.first! as! UITabBarItem).badgeValue = nil 

你可以得到输出Like

有关更多信息，请参阅此链接

select–2

  var lbl : UILabel = UILabel(frame: CGRectMake(225, 5, 20, 20)) lbl.layer.borderColor = UIColor.whiteColor().CGColor lbl.layer.borderWidth = 2 lbl.layer.cornerRadius = lbl.bounds.size.height/2 lbl.textAlignment = NSTextAlignment.Center lbl.layer.masksToBounds = true lbl.font = UIFont(name: hereaddyourFontName, size: 13) lbl.textColor = UIColor.whiteColor() lbl.backgroundColor = UIColor.redColor() lbl.text = "1" //if you no need remove this // add subview to tabBarController?.tabBar self.tabBarController?.tabBar.addSubview(lbl) 

输出是

Answer 3

适用于iPad和iPhone。 能够自动隐藏和计算索引。

如果self不是UITabBarController，请调用self.setTabBarDotVisible（visible：true）。

调用self.setTabBarDotVisible（visible：true，index：2）如果self是UITabBarController。

 import UIKit public extension UIViewController { func setTabBarDotVisible(visible:Bool,index: Int? = nil) { let tabBarController:UITabBarController! if self is UITabBarController { tabBarController = self as! UITabBarController } else { if self.tabBarController == nil { return } tabBarController = self.tabBarController! } let indexFinal:Int if (index != nil) { indexFinal = index! } else { let index3 = tabBarController.viewControllers?.index(of: self) if index3 == nil { return; } else { indexFinal = index3! } } guard let barItems = tabBarController.tabBar.items else { return } // let tag = 8888 var tabBarItemView:UIView? for subview in tabBarController.tabBar.subviews { let className = String(describing: type(of: subview)) guard className == "UITabBarButton" else { continue } var label:UILabel? var dotView:UIView? for subview2 in subview.subviews { if subview2.tag == tag { dotView = subview2; } else if (subview2 is UILabel) { label = subview2 as? UILabel } } if label?.text == barItems[indexFinal].title { dotView?.removeFromSuperview() tabBarItemView = subview; break; } } if (tabBarItemView == nil || !visible) { return } let barItemWidth = tabBarItemView!.bounds.width let x = barItemWidth * 0.5 + (barItems[indexFinal].selectedImage?.size.width ?? barItemWidth) / 2 let y:CGFloat = 5 let size:CGFloat = 10; let redDot = UIView(frame: CGRect(x: x, y: y, width: size, height: size)) redDot.tag = tag redDot.backgroundColor = UIColor.red redDot.layer.cornerRadius = size/2 tabBarItemView!.addSubview(redDot) } } 

Answer 4

我已经想出了一个黑客解决scheme。

 func addRedDotAtTabBarItemIndex(index: Int,dotRadius: CGFloat) { var tabBarButtons = [UIView]() // find the UITabBarButton instance. for subview in tabBarController!.tabBar.subviews.reverse() { if subview.isKindOfClass(NSClassFromString("UITabBarButton")) { tabBarButtons.append(subview as! UIView) } } if index >= tabBarButtons.count { println("out of bounds") return } let tabBar = tabBarButtons[index] var selectedImageWidth: CGFloat! var topMargin: CGFloat! for subview in tabBar.subviews { if subview.isKindOfClass(NSClassFromString("UITabBarSwappableImageView")) { selectedImageWidth = (subview as! UIView).frame.size.width topMargin = (subview as! UIView).frame.origin.y } } // remove existing red dot. for subview in tabBar.subviews { if subview.tag == 999 { subview.removeFromSuperview() } } let redDot = UIView(frame: CGRect(x: CGRectGetMidX(tabBar.bounds) + selectedImageWidth / 2 + dotRadius, y: topMargin, width: dotRadius * 2, height: dotRadius * 2)) redDot.backgroundColor = UIColor.redColor() redDot.layer.cornerRadius = dotRadius // half of the view's height. redDot.tag = 999 tabBar.addSubview(redDot) } 

Answer 5

我testing这个问题的答案。 但不适用于iPad。 现在我发现，当你在iPhone上添加这个，tabBarItem的左右边距是2，每个项目的边距是4.代码如下：

  NSInteger barItemCount = self.tabBar.items.count; UITabBarItem *barItem = (UITabBarItem *)self.tabBar.items[index]; CGFloat imageHalfWidth = barItem.image.size.width / 2.0; CGFloat barItemWidth = (BXS_WINDOW_WIDTH - barItemCount * 4) / barItemCount; CGFloat barItemMargin = 4; CGFloat redDotXOffset = barItemMargin / 2 + barItemMargin * index + barItemWidth * (index + 0.5); 

和iPad如下：

  barItemWidth = 76; barItemMargin = 34; redDotXOffset = (BXS_WINDOW_WIDTH - 76 * barItemCount - 34 * (barItemCount - 1)) / 2.0 + 76 * (index + 0.5) + 34 * index; 

希望这是有用的。

Answer 6

这个Swift 4解决scheme：

1）将BaseTabBar自定义类添加到您的项目中：

 import UIKit class BaseTabBar: UITabBar { static var dotColor: UIColor = UIColor.red static var dotSize: CGFloat = 4 static var dotPositionX: CGFloat = 0.8 static var dotPositionY: CGFloat = 0.2 var dotMap = [Int: Bool]() func resetDots() { dotMap.removeAll() } func addDot(tabIndex: Int) { dotMap[tabIndex] = true } func removeDot(tabIndex: Int) { dotMap[tabIndex] = false } override func draw(_ rect: CGRect) { super.draw(rect) if let items = items { for i in 0..<items.count { let item = items[i] if let view = item.value(forKey: "view") as? UIView, let dotBoolean = dotMap[i], dotBoolean == true { let x = view.frame.origin.x + view.frame.width * BaseTabBar.dotPositionX let y = view.frame.origin.y + view.frame.height * BaseTabBar.dotPositionY let dotPath = UIBezierPath(ovalIn: CGRect(x: x, y: y, width: BaseTabBar.dotSize, height: BaseTabBar.dotSize)) BaseTabBar.dotColor.setFill() dotPath.fill() } } } } } 

2）将UITabBarController中的UITabBar的自定义类更改为BaseTabBar。

3）在可以访问tabBarController的地方pipe理点

 func updateNotificationCount(count: Int) { if let tabBar = navigationController?.tabBarController?.tabBar as? BaseTabBar { if count > 0 { tabBar.addDot(tabIndex: 0) } else { tabBar.removeDot(tabIndex: 0) } tabBar.setNeedsDisplay() } }