iOS TabBarItem设置红点(未读消息)

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()
            }
        }
    }
}

注意:如果是iPad等其他原因造成的位置问题,可以自己更改里面的坐标算法.调整到自己合适的位置.具体就不赘述啦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,284评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,232评论 4 61
  • 你如星辰般耀眼闪烁 一直仰望 那遥不可及的星光 那是我渴望到达的远方 流星飘过 只有几秒璀璨 可我依然留恋那片刻的...
    哈哈嘿Y阅读 240评论 0 2
  • 近段时间备受关注的cool1 dual生态手机在接连创造千万预约,首销60万台15分钟售罄、7小时狂卖108万台,...
    科技看点阅读 285评论 0 1