实现原理:
其实是自定义一个view,将view添加到UITabBar上面,也可以是一个按钮,设置背景图片,和label。
废话少说直接上代码
搞一个UITabBar的分类
#import <UIKit/UIKit.h> @interface UITabBar (badge) - (void)showBadgeOnItemIndex:(int)index; - (void)hideBadgeOnItemIndex:(int)index; @end
#import "UITabBar+badge.h" #define TabbarItemNums 5.0 @implementation UITabBar (badge) // 显示红点 - (void)showBadgeOnItemIndex:(int)index { [self removeBadgeOnItemIndex:index]; // 新建小红点 UIView *bview = [[UIView alloc]init]; bview.tag = 888 + index; bview.layer.cornerRadius = 5; bview.clipsToBounds = YES; bview.backgroundColor = [UIColor redColor]; CGRect tabFram = self.frame; float percentX = (index+0.6) / TabbarItemNums; CGFloat x = ceilf(percentX * tabFram.size.width); CGFloat y = ceilf(0.1 * tabFram.size.height); bview.frame = CGRectMake(x, y, 10, 10); [self addSubview:bview]; [self bringSubviewToFront:bview]; } // 隐藏红点 - (void)hideBadgeOnItemIndex:(int)index { [self removeBadgeOnItemIndex:index]; } // 移除控件 - (void)removeBadgeOnItemIndex:(int)index { for (UIView *subView in self.subviews) { if (subView.tag == 888 + index) { [subView removeFromSuperview]; } } } @end
最后在子控制器调用就可以啦
#import "UITabBar+badge.h" [self.tabBarController.tabBar showBadgeOnItemIndex:4];
swift版带消息个数
import UIKit extension UITabBar { func showBadgeOnItem(index:Int, count:Int) { removeBadgeOnItem(index: index) let bview = UIView.init() bview.tag = 888+index bview.layer.cornerRadius = 9 bview.clipsToBounds = true bview.backgroundColor = UIColor.red let tabFrame = self.frame let percentX = (Float(index)+0.6) / 5.0(tabBar的总个数) let x = CGFloat(ceilf(percentX*Float(tabFrame.width))) let y = CGFloat(ceilf(0.1*Float(tabFrame.height))) bview.frame = CGRect(x: x, y: y, 18, height: 18) let cLabel = UILabel.init() cLabel.text = "(count)" cLabel.frame = CGRect(x: 0, y: 0, 18, height: 18) cLabel.font = UIFont.systemFont(ofSize: 10) cLabel.textColor = UIColor.white cLabel.textAlignment = .center bview.addSubview(cLabel) addSubview(bview) bringSubview(toFront: bview) } // 隐藏红点 func hideBadgeOnItem(index:Int) { removeBadgeOnItem(index: index) } // 移除控件 func removeBadgeOnItem(index:Int) { for subView:UIView in subviews { if subView.tag == 888+index { subView.removeFromSuperview() } } } }