角標(biāo) (標(biāo)簽欄,導(dǎo)航欄)


標(biāo)簽欄 UITabBarItem 角標(biāo)

[A].UITabBar默認(rèn)角標(biāo)

UITabBar默認(rèn)角標(biāo):(可以顯示 角標(biāo),也可以顯示 數(shù)量

UITabBarItem * item=[self.tabBarController.tabBar.items objectAtIndex:2];
if (_numberOfMsgs != 0) {
   //TabBarItem: 顯示角標(biāo)  
   item.badgeValue = @"";//僅僅顯示角標(biāo)

   //顯示數(shù)量
   //item.badgeValue = [NSString stringWithFormat:@"%d",_numberOfMsgs];
} else { 
   //無 消息  (數(shù)量為:0)
   item.badgeValue = nil;
}


效果:
無需 顯示角標(biāo)數(shù)值
需要 顯示角標(biāo)數(shù)值



[B].自定義角標(biāo):添加類別

UITabBar自定義角標(biāo):根據(jù)自己App要求蛇摸,調(diào)整了角標(biāo)大小急迂、顏色影所,取消數(shù)值的顯示!


添加 “UITabBar+badge類別僚碎!

UITabBar+badge.h文件:

#import <UIKit/UIKit.h>

@interface UITabBar (badge)

- (void)showBadgeOnItemIndex:(int)index; //顯示小紅點(diǎn)

- (void)hideBadgeOnItemIndex:(int)index; //隱藏小紅點(diǎn)

@end


UITabBar+badge.m文件:

#import "UITabBar+badge.h"

//App要求的紅色
#define RedAppColor [UIColor colorWithRed:246.f/255.f green:96.f/255.f blue:96.f/255.f alpha:1.f]

#define TabbarItemNums 5.0 //根據(jù)需求猴娩,設(shè)置 tabbar的角標(biāo)數(shù)量

@implementation UITabBar (badge)

//顯示小紅點(diǎn)
- (void)showBadgeOnItemIndex:(int)index{
   //移除之前的小紅點(diǎn)
   [self removeBadgeOnItemIndex:index];

   //新建小紅點(diǎn)
   UIView *badgeView = [[UIView alloc]init];
   badgeView.tag = 666 + index;
   badgeView.layer.cornerRadius = 5.f;//圓形  (切圓角)
   badgeView.backgroundColor = RedAppColor;//顏色:App要求的紅色
   CGRect tabFrame = self.frame;

   //確定小紅點(diǎn)的位置
   float percentX = (index +0.6) / TabbarItemNums;
   CGFloat x = ceilf(percentX * tabFrame.size.width);
   CGFloat y = ceilf(0.1 * tabFrame.size.height);
   badgeView.frame = CGRectMake(x, y, 10, 10);//圓形大小為10
   [self addSubview:badgeView];
}



//隱藏小紅點(diǎn)
- (void)hideBadgeOnItemIndex:(int)index{
   //移除小紅點(diǎn)
   [self removeBadgeOnItemIndex:index];
}

//移除小紅點(diǎn)
- (void)removeBadgeOnItemIndex:(int)index{
   //按照tag值進(jìn)行移除
   for (UIView *subView in self.subviews) {
       if (subView.tag == 666+index) {
           [subView removeFromSuperview];
       }
   }
}

@end






自定義角標(biāo) 使用:

if (_numberOfMsgs != 0) {
    [self.tabBar showBadgeOnItemIndex:2]; //顯示角標(biāo)(根據(jù)item位置)
} else {
   [self.tabBar hideBadgeOnItemIndex:2]; //隱藏角標(biāo)(根據(jù)item位置)
}


效果:



細(xì)節(jié)



















導(dǎo)航欄UIBarButtonItem 角標(biāo)

添加 “UIBarButtonItem+NavBarBadge”類別!

在“UIBarButtonItem+NavBarBadge.h”文件:

#import <UIKit/UIKit.h>

@interface UIBarButtonItem (NavBarBadge)

// Badge value to be display
@property (nonatomic) NSString *badgeValue;

// Badge background color
@property (nonatomic) UIColor *badgeBGColor;
// Badge text color
@property (nonatomic) UIColor *badgeTextColor;
// Badge font
@property (nonatomic) UIFont *badgeFont;

// Padding value for the badge
@property (nonatomic) CGFloat badgePadding;

// Minimum size badge to small
@property (nonatomic) CGFloat badgeMinSize;
// Values for offseting the badge over the BarButtonItem you picked
@property (nonatomic) CGFloat badgeOriginX;
@property (nonatomic) CGFloat badgeOriginY;

// In case of numbers, remove the badge when reaching zero
@property BOOL shouldHideBadgeAtZero;
// Badge has a bounce animation when value changes
@property BOOL shouldAnimateBadge;


@end



在“UIBarButtonItem+NavBarBadge.m”文件:

#import "UIBarButtonItem+NavBarBadge.h"
#import <objc/runtime.h> 

   
NSString const *UIBarButtonItem_badgeKey = @"UIBarButtonItem_badgeKey";

NSString const *UIBarButtonItem_badgeBGColorKey = @"UIBarButtonItem_badgeBGColorKey";
NSString const *UIBarButtonItem_badgeTextColorKey = @"UIBarButtonItem_badgeTextColorKey";
NSString const *UIBarButtonItem_badgeFontKey = @"UIBarButtonItem_badgeFontKey";
NSString const *UIBarButtonItem_badgePaddingKey = @"UIBarButtonItem_badgePaddingKey";
NSString const *UIBarButtonItem_badgeMinSizeKey = @"UIBarButtonItem_badgeMinSizeKey";
NSString const *UIBarButtonItem_badgeOriginXKey = @"UIBarButtonItem_badgeOriginXKey";
NSString const *UIBarButtonItem_badgeOriginYKey = @"UIBarButtonItem_badgeOriginYKey";
NSString const *UIBarButtonItem_shouldHideBadgeAtZeroKey = @"UIBarButtonItem_shouldHideBadgeAtZeroKey";
NSString const *UIBarButtonItem_shouldAnimateBadgeKey = @"UIBarButtonItem_shouldAnimateBadgeKey";
NSString const *UIBarButtonItem_badgeValueKey = @"UIBarButtonItem_badgeValueKey";


     
@implementation UIBarButtonItem (NavBarBadge)

@dynamic badgeValue, badgeBGColor, badgeTextColor, badgeFont;
@dynamic badgePadding, badgeMinSize, badgeOriginX, badgeOriginY;
@dynamic shouldHideBadgeAtZero, shouldAnimateBadge;

- (void)badgeInit
{
    UIView *superview = nil;
    CGFloat defaultOriginX = 0;
    if (self.customView) {
        superview = self.customView;
        defaultOriginX = superview.frame.size.width - self.badge.frame.size.width/2;
        // Avoids badge to be clipped when animating its scale
        superview.clipsToBounds = NO;
    } else if ([self respondsToSelector:@selector(view)] && [(id)self view]) {
        superview = [(id)self view];
        defaultOriginX = superview.frame.size.width - self.badge.frame.size.width;
    }
    [superview addSubview:self.badge];

    
    // Default design initialization
    self.badgeBGColor   = [UIColor redColor];
    self.badgeTextColor = [UIColor whiteColor];
    self.badgeFont      = [UIFont systemFontOfSize:12.0];
    self.badgePadding   = 6;
    self.badgeMinSize   = 8;
    self.badgeOriginX   = defaultOriginX;
    self.badgeOriginY   = -4;
    self.shouldHideBadgeAtZero = YES;
    self.shouldAnimateBadge = YES;
}





#pragma mark - Utility methods

// Handle badge display when its properties have been changed (color, font, ...)
- (void)refreshBadge
{
    // Change new attributes
    self.badge.textColor        = self.badgeTextColor;
    self.badge.backgroundColor  = self.badgeBGColor;
    self.badge.font             = self.badgeFont;
    
    if (!self.badgeValue || [self.badgeValue isEqualToString:@""] || ([self.badgeValue isEqualToString:@"0"] && self.shouldHideBadgeAtZero)) {
        self.badge.hidden = YES;
    } else {
        self.badge.hidden = NO;
        [self updateBadgeValueAnimated:YES];
    }
    
}

- (CGSize) badgeExpectedSize
{
    // When the value changes the badge could need to get bigger
    // Calculate expected size to fit new value
    // Use an intermediate label to get expected size thanks to sizeToFit
    // We don't call sizeToFit on the true label to avoid bad display
    UILabel *frameLabel = [self duplicateLabel:self.badge];
    [frameLabel sizeToFit];
    
    CGSize expectedLabelSize = frameLabel.frame.size;
    return expectedLabelSize;
}

- (void)updateBadgeFrame
{
    
    CGSize expectedLabelSize = [self badgeExpectedSize];
    
    // Make sure that for small value, the badge will be big enough
    CGFloat minHeight = expectedLabelSize.height;
    
    // Using a const we make sure the badge respect the minimum size
    minHeight = (minHeight < self.badgeMinSize) ? self.badgeMinSize : expectedLabelSize.height;
    CGFloat minWidth = expectedLabelSize.width;
    CGFloat padding = self.badgePadding;
    
    // Using const we make sure the badge doesn't get too smal
    minWidth = (minWidth < minHeight) ? minHeight : expectedLabelSize.width;
    self.badge.layer.masksToBounds = YES;
    
    
//    self.badge.frame = CGRectMake(self.badgeOriginX, self.badgeOriginY, minWidth + padding, minHeight + padding);
    if (self.badge.text.length > 2) {
        self.badge.frame = CGRectMake(-10, -5, minWidth + padding, minHeight + padding);

    } else {
        self.badge.frame = CGRectMake(-5, -5, minWidth + padding, minHeight + padding);
    }

    self.badge.layer.cornerRadius = (minHeight + padding) / 2;
}

// Handle the badge changing value
- (void)updateBadgeValueAnimated:(BOOL)animated
{
    // Bounce animation on badge if value changed and if animation authorized
    if (animated && self.shouldAnimateBadge && ![self.badge.text isEqualToString:self.badgeValue]) {
        CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        [animation setFromValue:[NSNumber numberWithFloat:1.5]];
        [animation setToValue:[NSNumber numberWithFloat:1]];
        [animation setDuration:0.2];
        [animation setTimingFunction:[CAMediaTimingFunction functionWithControlPoints:.4f :1.3f :1.f :1.f]];
        [self.badge.layer addAnimation:animation forKey:@"bounceAnimation"];
    }
    
    
    // Set the new value
    self.badge.text = self.badgeValue;
    
    // Animate the size modification if needed
    if (animated && self.shouldAnimateBadge) {
        [UIView animateWithDuration:0.2 animations:^{
            [self updateBadgeFrame];
        }];
    } else {
        [self updateBadgeFrame];
    }
}

- (UILabel *)duplicateLabel:(UILabel *)labelToCopy
{
    UILabel *duplicateLabel = [[UILabel alloc] initWithFrame:labelToCopy.frame];
    duplicateLabel.text = labelToCopy.text;
    duplicateLabel.font = labelToCopy.font;
    
    return duplicateLabel;
}

- (void)removeBadge
{
    // Animate badge removal
    [UIView animateWithDuration:0.2 animations:^{
        self.badge.transform = CGAffineTransformMakeScale(0, 0);
    } completion:^(BOOL finished) {
        [self.badge removeFromSuperview];
        self.badge = nil;
    }];
}

#pragma mark - getters/setters
-(UILabel*) badge {
    UILabel* lbl = objc_getAssociatedObject(self, &UIBarButtonItem_badgeKey);
    if(lbl==nil) {
        lbl = [[UILabel alloc] initWithFrame:CGRectMake(self.badgeOriginX, self.badgeOriginY, 20, 20)];
        [self setBadge:lbl];
        [self badgeInit];
        [self.customView addSubview:lbl];
        lbl.textAlignment = NSTextAlignmentCenter;
    }
    return lbl;
}
-(void)setBadge:(UILabel *)badgeLabel
{
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeKey, badgeLabel, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

// Badge value to be display
-(NSString *)badgeValue {
    return objc_getAssociatedObject(self, &UIBarButtonItem_badgeValueKey);
}
-(void)setBadgeValue:(NSString *)badgeValue
{
    if (badgeValue.length > 2) {
        badgeValue = @"99+";
    }
    
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeValueKey, badgeValue, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    
    // When changing the badge value check if we need to remove the badge
    [self updateBadgeValueAnimated:YES];
    [self refreshBadge];
}

// Badge background color
-(UIColor *)badgeBGColor {
    return objc_getAssociatedObject(self, &UIBarButtonItem_badgeBGColorKey);
}
-(void)setBadgeBGColor:(UIColor *)badgeBGColor
{
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeBGColorKey, badgeBGColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (self.badge) {
        [self refreshBadge];
    }
}

// Badge text color
-(UIColor *)badgeTextColor {
    return objc_getAssociatedObject(self, &UIBarButtonItem_badgeTextColorKey);
}
-(void)setBadgeTextColor:(UIColor *)badgeTextColor
{
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeTextColorKey, badgeTextColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (self.badge) {
        [self refreshBadge];
    }
}

// Badge font
-(UIFont *)badgeFont {
    return objc_getAssociatedObject(self, &UIBarButtonItem_badgeFontKey);
}
-(void)setBadgeFont:(UIFont *)badgeFont
{
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeFontKey, badgeFont, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (self.badge) {
        [self refreshBadge];
    }
}

// Padding value for the badge
-(CGFloat) badgePadding {
    NSNumber *number = objc_getAssociatedObject(self, &UIBarButtonItem_badgePaddingKey);
    return number.floatValue;
}
-(void) setBadgePadding:(CGFloat)badgePadding
{
    NSNumber *number = [NSNumber numberWithDouble:badgePadding];
    objc_setAssociatedObject(self, &UIBarButtonItem_badgePaddingKey, number, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (self.badge) {
        [self updateBadgeFrame];
    }
}

// Minimum size badge to small
-(CGFloat) badgeMinSize {
    NSNumber *number = objc_getAssociatedObject(self, &UIBarButtonItem_badgeMinSizeKey);
    return number.floatValue;
}
-(void) setBadgeMinSize:(CGFloat)badgeMinSize
{
    NSNumber *number = [NSNumber numberWithDouble:badgeMinSize];
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeMinSizeKey, number, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (self.badge) {
        [self updateBadgeFrame];
    }
}

// Values for offseting the badge over the BarButtonItem you picked
-(CGFloat) badgeOriginX {
    NSNumber *number = objc_getAssociatedObject(self, &UIBarButtonItem_badgeOriginXKey);
    return number.floatValue;
}
-(void) setBadgeOriginX:(CGFloat)badgeOriginX
{
    NSNumber *number = [NSNumber numberWithDouble:badgeOriginX];
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeOriginXKey, number, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (self.badge) {
        [self updateBadgeFrame];
    }
}

-(CGFloat) badgeOriginY {
    NSNumber *number = objc_getAssociatedObject(self, &UIBarButtonItem_badgeOriginYKey);
    return number.floatValue;
}
-(void) setBadgeOriginY:(CGFloat)badgeOriginY
{
    NSNumber *number = [NSNumber numberWithDouble:badgeOriginY];
    objc_setAssociatedObject(self, &UIBarButtonItem_badgeOriginYKey, number, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if (self.badge) {
        [self updateBadgeFrame];
    }
}

// In case of numbers, remove the badge when reaching zero
-(BOOL) shouldHideBadgeAtZero {
    NSNumber *number = objc_getAssociatedObject(self, &UIBarButtonItem_shouldHideBadgeAtZeroKey);
    return number.boolValue;
}
- (void)setShouldHideBadgeAtZero:(BOOL)shouldHideBadgeAtZero
{
    NSNumber *number = [NSNumber numberWithBool:shouldHideBadgeAtZero];
    objc_setAssociatedObject(self, &UIBarButtonItem_shouldHideBadgeAtZeroKey, number, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if(self.badge) {
        [self refreshBadge];
    }
}

// Badge has a bounce animation when value changes
-(BOOL) shouldAnimateBadge {
    NSNumber *number = objc_getAssociatedObject(self, &UIBarButtonItem_shouldAnimateBadgeKey);
    return number.boolValue;
}
- (void)setShouldAnimateBadge:(BOOL)shouldAnimateBadge
{
    NSNumber *number = [NSNumber numberWithBool:shouldAnimateBadge];
    objc_setAssociatedObject(self, &UIBarButtonItem_shouldAnimateBadgeKey, number, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if(self.badge) {
        [self refreshBadge];
    }
}

@end


代碼使用了“運(yùn)行時”:在對象使用時,才確定下來該對象卷中!


記不清代碼哪里copy的了矛双!就不標(biāo)明出處了!s≡ァR楹觥!十减!

copy 配 卡殿

哈哈栈幸!??????????????????????????


自己就做了數(shù)值判斷顏色等修改嫉称!??????????????????????



使用:

相應(yīng)屬性侦镇,進(jìn)行設(shè)置灵疮!(數(shù)值织阅、顏色)

self.navigationItem.rightBarButtonItem.badgeValue = [NSString stringWithFormat:@"%d",_numberOfMsgs];
self.navigationItem.rightBarButtonItem.badgeBGColor = RedAppColor;



效果數(shù)值判斷

_numberOfMsgs = 0;

數(shù)值為 0:


_numberOfMsgs = 15;

數(shù)值在 正常范圍:


_numberOfMsgs = 110;

數(shù)值 超過3位數(shù):


















goyohol's essay

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市震捣,隨后出現(xiàn)的幾起案子荔棉,更是在濱河造成了極大的恐慌,老刑警劉巖蒿赢,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件润樱,死亡現(xiàn)場離奇詭異祈噪,居然都是意外死亡变骡,警方通過查閱死者的電腦和手機(jī)寄锐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門荆针,熙熙樓的掌柜王于貴愁眉苦臉地迎上來舀透,“玉大人歇竟,你說我怎么就攤上這事渐逃⊥垦祝” “怎么了秃流?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵赂蕴,是天一觀的道長。 經(jīng)常有香客問我舶胀,道長概说,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任嚣伐,我火速辦了婚禮糖赔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘轩端。我一直安慰自己挂捻,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著刻撒,像睡著了一般骨田。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上声怔,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天态贤,我揣著相機(jī)與錄音,去河邊找鬼醋火。 笑死悠汽,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的芥驳。 我是一名探鬼主播柿冲,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼兆旬!你這毒婦竟也來了假抄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤丽猬,失蹤者是張志新(化名)和其女友劉穎宿饱,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體脚祟,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谬以,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了由桌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片为黎。...
    茶點(diǎn)故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖行您,靈堂內(nèi)的尸體忽然破棺而出铭乾,到底是詐尸還是另有隱情,我是刑警寧澤邑雅,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布片橡,位于F島的核電站,受9級特大地震影響淮野,放射性物質(zhì)發(fā)生泄漏捧书。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一骤星、第九天 我趴在偏房一處隱蔽的房頂上張望经瓷。 院中可真熱鬧,春花似錦洞难、人聲如沸舆吮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽色冀。三九已至潭袱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锋恬,已是汗流浹背屯换。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留与学,地道東北人彤悔。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像索守,于是被迫代替她去往敵國和親晕窑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容