iOS TabBarItem设置红点(未读消息)
2016-11-17 本文已影响5071人
rockyMJ
WechatIMG1.jpeg
实现原理:
其实是自定义一个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, width: 18, height: 18)
let cLabel = UILabel.init()
cLabel.text = "\(count)"
cLabel.frame = CGRect(x: 0, y: 0, width: 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()
}
}
}
}