小紅點(diǎn)(消息推送提醒)在現(xiàn)今的各個(gè)App中幾乎無(wú)處不在蝉仇,特別是內(nèi)容的更新日漸頻繁惠遏,大量的小紅點(diǎn)被投放在各個(gè)業(yè)務(wù)入口机打。一般來(lái)說(shuō)蓬坡,小紅點(diǎn)主要有三個(gè)應(yīng)用場(chǎng)景:
- App有新添加的功能提醒用戶使用
- 某一個(gè)已有的模塊有功能上的更新
- 功能有內(nèi)容的變化或業(yè)務(wù)上的提醒
常見(jiàn)的比如下圖所示的QQ消息提示(紅點(diǎn)為消息數(shù)目的提示), 朋友圈的新回復(fù)猿棉,店鋪上架新品,最新優(yōu)惠活動(dòng)提醒等等屑咳。
思路分析
通常情況下萨赁,小紅點(diǎn)不是孤立使用的,一項(xiàng)功能或業(yè)務(wù)的運(yùn)營(yíng)涉及多個(gè)層級(jí)多個(gè)入口兆龙,所以小紅點(diǎn)需要有清晰的路徑導(dǎo)向杖爽,而且包含路徑樹(shù)的概念,父路徑的小紅點(diǎn)為子路徑小紅點(diǎn)的并集详瑞。其次就是小紅點(diǎn)的具體顯示掂林,以及顯示的具體樣式。因此坝橡,總結(jié)一下后可以把小紅點(diǎn)的功能模塊歸納為兩大塊: 小紅點(diǎn)路徑監(jiān)測(cè)+事件分發(fā)和小紅點(diǎn)的UI顯示泻帮。
小紅點(diǎn)路徑監(jiān)測(cè)+事件分發(fā)
小紅點(diǎn)所支持的路徑格式設(shè)計(jì)為root.xx.xx
, 小紅點(diǎn)原則是父節(jié)點(diǎn)的小紅點(diǎn)為子節(jié)點(diǎn)的小紅點(diǎn)并集。root
為默認(rèn)的根路徑计寇。如下圖所示, root.first
為子路徑, root.second
為同級(jí)子路徑锣杂。在純紅點(diǎn)模式下, root
的小紅點(diǎn)顯示為root.first, root.second
和root.third
的并集,同理在數(shù)字顯示模式下, root
的badge數(shù)量為root.first
, root.second
和root.third
的badge數(shù)量之和番宁。而root.first
的badge數(shù)量則又為root.first.firstA
和root.first.firstB
的和元莫。
小紅點(diǎn)的路徑監(jiān)測(cè)則是需要提供類(lèi)似系統(tǒng)KVO的一個(gè)Observer, 用來(lái)觀察路徑所對(duì)應(yīng)的小紅點(diǎn)的變化,并且當(dāng)子路徑的紅點(diǎn)發(fā)生變化是需要逐層分發(fā)到每一個(gè)父路徑蝶押。當(dāng)任意子路徑有紅點(diǎn)觸發(fā)事件時(shí)踱蠢,父路徑也需顯示紅點(diǎn)。而當(dāng)所有子路徑的紅點(diǎn)事情都清除后棋电,父路徑的紅點(diǎn)才能清除茎截。
總結(jié)一下,小紅點(diǎn)路徑監(jiān)測(cè)需要實(shí)現(xiàn)下面的接口:
- (void)observePath:(NSString *)keyPath block:(RJBadgeNotificationBlock)block;
- (void)observePath:(NSString *)keyPath badgeView:(nullable id<P365BadgeView>)badgeView block:(nullable RJBadgeNotificationBlock)block;
第一個(gè)接口為某個(gè)被監(jiān)測(cè)路徑發(fā)生紅點(diǎn)事件觸發(fā)后提供block業(yè)務(wù)處理回調(diào)赶盔,第二個(gè)接口則為當(dāng)發(fā)生事件后企锌,在相應(yīng)的badgeView上顯示小紅點(diǎn)UI, 這里傳入的badgeView可以是一個(gè)button, 也可以是一個(gè)tab, 因而應(yīng)該包括所有廣義上的UI控件。
小紅點(diǎn)的事件觸發(fā)和分發(fā)則需要實(shí)現(xiàn)如下接口:
+ (void)setBadgeForKeyPath:(NSString *)keyPath;
+ (void)setBadgeForKeyPath:(NSString *)keyPath count:(NSUInteger)count;
+ (void)clearBadgeForKeyPath:(NSString *)keyPath;
+ (void)clearBadgeForKeyPath:(NSString *)keyPath forced:(BOOL)forced;
當(dāng)App收到服務(wù)器推送有新內(nèi)容更新時(shí)于未,需要對(duì)某個(gè)路徑setBadge, 這邊的setBadge會(huì)觸發(fā)上面的observe block的回調(diào)撕攒。且如果消息為數(shù)量類(lèi)型陡鹃,比如未讀消息時(shí),還需要在setBadge的時(shí)候添加count屬性抖坪。若用戶點(diǎn)擊了消息或進(jìn)入了某個(gè)小紅點(diǎn)提示的入口后萍鲸,需要清除小紅點(diǎn)消息,并且如果Observe的時(shí)候綁定了顯示小紅點(diǎn)的UI控件擦俐,也需要清除該控件上的小紅點(diǎn)圖標(biāo)猿推。
正常情況下,如果某個(gè)路徑下面還有子路徑有小紅點(diǎn)捌肴,這個(gè)時(shí)候?qū)υ撀窂絚learBadge是應(yīng)該不起效果的,合理邏輯應(yīng)該是當(dāng)子路徑的所有小紅點(diǎn)都clear掉了后父路徑自動(dòng)清除藕咏。但如果這個(gè)情況下需要強(qiáng)制清除父路徑紅點(diǎn)状知,則需要在clear方法上加一個(gè)是否forced清除的參數(shù)。
小紅點(diǎn)的UI顯示
小紅點(diǎn)的UI樣式應(yīng)該包括三種: 小紅點(diǎn), 數(shù)字和自定義的icon或view. 最基本的小紅點(diǎn)主要用在業(yè)務(wù)入口處孽查,用于內(nèi)容饥悴、功能或動(dòng)態(tài)更新的提醒。數(shù)字小紅點(diǎn)則一般用來(lái)展示未讀消息的數(shù)量盲再。自定義的icon可以顯示比如new
, 免費(fèi)
, 熱門(mén)
等活動(dòng)運(yùn)營(yíng)的提示西设,當(dāng)然如果需要展示更復(fù)雜的UI設(shè)計(jì)也應(yīng)該支持自定義view作為badge的功能。
既然可以展示三種樣式的小紅點(diǎn)UI, 那么就需要有一個(gè)優(yōu)先級(jí)排序答朋,結(jié)合上面的setBadge接口, 我們可以想到的規(guī)則是如果setBadge時(shí)沒(méi)有設(shè)置count, 那么默認(rèn)就是展示小紅點(diǎn), 如果設(shè)置了count, 那么就展示數(shù)字贷揽。另外在展示小紅點(diǎn)的情況下,如果用戶設(shè)置了自定義icon那么就優(yōu)先展示icon, 按照這個(gè)思路梦碗,小紅點(diǎn)樣式的優(yōu)先級(jí)就出來(lái)了: 數(shù)字的優(yōu)先級(jí)最高禽绪,其次是自定義icon, 最后則是默認(rèn)的圓形小紅點(diǎn)。
對(duì)于UI, 我們都希望可以定制的洪规,所以對(duì)于默認(rèn)的圓形小紅點(diǎn)應(yīng)該可以調(diào)整它的半徑印屁,以及展示在控件上相對(duì)于右上角的offset, 而對(duì)于數(shù)字小紅點(diǎn)應(yīng)該可以調(diào)整它的字體和文字顏色。另外斩例,如果數(shù)字的數(shù)值特別大雄人,應(yīng)該有個(gè)最高上限,比如超過(guò)99后就顯示省略號(hào)念赶。按照上面這些思路分析础钠,我們可以得到下面所示的BadgeView接口:
@protocol RJBadgeView <NSObject>
@required
@property (nonatomic, strong) UILabel *badge;
@property (nonatomic, strong) UIFont *badgeFont; // default bold size 9
@property (nonatomic, strong) UIColor *badgeTextColor; // default white color
@property (nonatomic, assign) CGFloat badgeRadius;
@property (nonatomic, assign) CGPoint badgeOffset; // offset from right-top
- (void)showBadge; // badge with red dot
- (void)hideBadge;
// badge with number, pass zero to hide badge
- (void)showBadgeWithValue:(NSUInteger)value;
@optional
@property (nonatomic, strong) UIView *customView;
/**
convenient interface:
create 'cusomView' (UIImageView) using badgeImage
view's size would simply be set as half of image.
*/
@property (nonatomic, strong) UIImage *badgeImage;
小紅點(diǎn)顯示接口的調(diào)用理論上應(yīng)該由內(nèi)部來(lái)觸發(fā),也就是使用方調(diào)用:
+ (void)setBadgeForKeyPath:(NSString *)keyPath;
之后晶乔,
- (void)observePath:(NSString *)keyPath badgeView:(nullable id<P365BadgeView>)badgeView block:(nullable RJBadgeNotificationBlock)block;
這邊所指定需要顯示小紅點(diǎn)的badgeView
上會(huì)在小紅點(diǎn)模塊內(nèi)部來(lái)調(diào)用showBadge
. 當(dāng)用戶點(diǎn)擊了顯示小紅點(diǎn)的控件后珍坊,應(yīng)該在控件的點(diǎn)擊事件里面調(diào)用clearBadgeForKeyPath
來(lái)觸發(fā)內(nèi)部調(diào)用hideBadge
. 簡(jiǎn)而言之,就是使用方不需要顯式的來(lái)調(diào)用badgeView
的showBadge
或者hideBadge
. 同理正罢,當(dāng)使用方調(diào)用:
+ (void)setBadgeForKeyPath:(NSString *)keyPath count:(NSUInteger)count;
會(huì)在內(nèi)部調(diào)用badgeView的showBadgeWithValue
. 當(dāng)然如果使用方需要在某個(gè)控件上(e.g. badgeView -> UIButton)顯示小紅點(diǎn)阵漏,但是并不需要與某個(gè)路徑關(guān)聯(lián)驻民,只是單純的顯示小紅點(diǎn),那應(yīng)該也需要支持[self.button showBadge]
的調(diào)用履怯。
支持顯示小紅點(diǎn)的badgeView應(yīng)該包括廣義上的所有UI控件, iOS這邊控件主要有3大種類(lèi): a). UIView b). UIBarButtonItem c). UITabBarItem, 所以我們可以對(duì)這三種類(lèi)分別寫(xiě)一個(gè)category來(lái)創(chuàng)建小紅點(diǎn)UI并顯示在控件上回还,當(dāng)然這三個(gè)category必須要conform上面的RJBadgeView Protocol:
@interface UIView (RJBadge) <RJBadgeView>
@interface UITabBarItem (RJBadge) <RJBadgeView>
@interface UIBarButtonItem (RJBadge) <RJBadgeView>
接口優(yōu)化
參照上面的討論,我們需要對(duì)小紅點(diǎn)路徑進(jìn)行監(jiān)控叹洲,也就是要observePath
, 類(lèi)似于系統(tǒng)的KVO監(jiān)測(cè)API, 這邊會(huì)有下面幾個(gè)需要考慮的問(wèn)題:
- 重復(fù)添加已有keyPath的observe
- observe之后在observer退出或釋放后忘記unobserve
- 初始化小紅點(diǎn)模塊的復(fù)雜度和便利度
- block回調(diào)里面可能的循環(huán)引用問(wèn)題
對(duì)于第一個(gè)問(wèn)題柠硕,我們創(chuàng)建一個(gè)數(shù)據(jù)結(jié)構(gòu)RJBadgeInfo, 用來(lái)存放小紅點(diǎn)的相關(guān)信息,每次添加observe對(duì)info進(jìn)行比較运提,如果已有監(jiān)測(cè)則不去做重復(fù)添加蝗柔。
@interface RJBadgeInfo : NSObject
@property (nonatomic, copy, readonly) NSString *keyPath;
@property (nonatomic, weak, readonly) RJBadgeController *controller;
@property (nonatomic, copy, readonly) RJBadgeNotificationBlock block;
@property (nonatomic, strong, readonly) id<RJBadgeView> badgeView;
@end
第二個(gè)問(wèn)題可以使用自釋放的機(jī)制來(lái)實(shí)現(xiàn)observe的自動(dòng)移除,這樣就需要將badgeController作為觀察者的成員變量民泵,當(dāng)observer釋放之后badgeController也會(huì)釋放癣丧,那么我們就在badgeController的 dealloc
函數(shù)中去做observe的移除操作。使用方則無(wú)需關(guān)心何時(shí)去移除觀察者栈妆,當(dāng)然如果確實(shí)需要提前移除觀察者胁编,也可以調(diào)用unobservePath接口。
初始化函數(shù)生成badgeController并且以observer的成員變量存在鳞尔,最簡(jiǎn)單和便捷的方式就是給所有NSObject對(duì)象通過(guò)category添加badgeController變量嬉橙,這樣用戶無(wú)需顯式去調(diào)用alloc
方法,只需要self.badgeController
即可動(dòng)態(tài)生成badgeController對(duì)象寥假。
@interface NSObject (RJBadgeController)
@property (nonatomic, strong) RJBadgeController *badgeController;
@end
在badgeController的get
方法里面則是調(diào)用RJBadgeController的初始化方法生成對(duì)象并賦值給self.badgeController
變量:
- (RJBadgeController *)badgeController
{
id controller = objc_getAssociatedObject(self, NSObjectBadgeControllerKey);
// lazily create the badgeController
if (nil == controller) {
controller = [RJBadgeController controllerWithObserver:self];
self.badgeController = controller;
}
return controller;
}
- (void)setBadgeController:(RJBadgeController *)badgeController
{
objc_setAssociatedObject(self,
NSObjectBadgeControllerKey,
badgeController,
OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
最后一個(gè)循環(huán)引用的問(wèn)題市框,在badge的block里面用參數(shù)observer來(lái)代替self, 我們對(duì)observer(即self.badgeController的self)進(jìn)行weak化處理并通過(guò)block回調(diào)參數(shù)傳出:
[self.badgeController observePath:@"root.xx"
badgeView:button
block:^(RJViewController *observer, NSDictionary *info) {
// Use [observer doSomething] instead of [self doSomething] to avoid retain cycle in block
// key path -> info[RJBadgePathKey] : badgeContoller所observe的路徑
// badge status -> info[RJBadgeShowKey] : 當(dāng)前路徑所對(duì)應(yīng)的badge是否處于set狀態(tài)(是否應(yīng)該顯示小紅點(diǎn))
// badge count -> info[RJBadgeCountKey]: 當(dāng)前路徑所對(duì)應(yīng)的badge數(shù)值(僅在badge為數(shù)值模式下有效)
}];
方案實(shí)現(xiàn)
理論talk完了,可以show源碼了昧旨,完整的小紅點(diǎn)解決方案實(shí)現(xiàn)源碼RJBadgeKit已經(jīng)發(fā)布到GitHub, 可以直接通過(guò)cocoapods, pod 'RJBadgeKit'集成使用拾给。我們來(lái)看下具體應(yīng)用示例:
假設(shè)我們有個(gè)促銷(xiāo)頁(yè)面,該促銷(xiāo)有兩個(gè)商品參與活動(dòng)兔沃,則促銷(xiāo)頁(yè)面的路徑可設(shè)置為root.promotion蒋得,促銷(xiāo)頁(yè)面內(nèi)兩個(gè)商品的路徑分別設(shè)為root.promotion.item1, root.promotion.item2. 現(xiàn)在需要推送小紅點(diǎn)消息給用戶,在promotion的入口處的button需要顯示小紅點(diǎn)提示乒疏,當(dāng)用戶進(jìn)入到promotion頁(yè)面且分別點(diǎn)擊了item1和item2后额衙,promotion的小紅點(diǎn)提示才消失。
首先我們?cè)赗JPromotionViewController里面對(duì)promotionButton添加路徑的觀察者怕吴,當(dāng)該路徑被setBadge時(shí)候則顯示小紅點(diǎn)窍侧,clearBadge時(shí)則隱藏小紅點(diǎn):
[self.badgeController observePath:@"root.promotion"
badgeView:promotionButton
block:^(RJPromotionViewController *observer,
NSDictionary *info) {
BOOL hasPromotionItem = [info[RJBadgeShowKey] boolValue];
[observer setPromotionStatus:hasPromotionItem];
}];
當(dāng)網(wǎng)絡(luò)請(qǐng)求返回時(shí)發(fā)現(xiàn)有兩個(gè)促銷(xiāo)數(shù)據(jù)(注意路徑的格式),則調(diào)用:
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1"];
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item2"];
子路徑的小紅點(diǎn)狀態(tài)變化會(huì)觸發(fā)父路徑observe的block回調(diào)转绷,所以上述兩行代碼執(zhí)行后promotionButton會(huì)觸發(fā)顯示小紅點(diǎn)伟件。當(dāng)然如果希望promotionButton不顯示小紅點(diǎn),而是顯示具體的促銷(xiāo)數(shù)量议经,則可以直接如下調(diào)用:
[RJBadgeController setBadgeForKeyPath:@"root.promotion" count:2];
如果promotion item下面還有子路徑, 則調(diào)用:
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1" count:5];
在這個(gè)情況下斧账,promotionButton上顯示的數(shù)值(亦即root.promotion路徑對(duì)應(yīng)的badge值)為root.promotion.item1和root.promotion.item2及其所有子節(jié)點(diǎn)的數(shù)值之和谴返。當(dāng)用戶點(diǎn)擊查看了item1和item2后,分別調(diào)用clearBadeg方法來(lái)消除小紅點(diǎn):
[RJBadgeController clearBadgeForKeyPath:@"root.promotion.item1"];
[RJBadgeController clearBadgeForKeyPath:@"root.promotion.item2"];
這時(shí)父節(jié)點(diǎn)root.promotion的badge自動(dòng)clear, promotionButton的小紅點(diǎn)會(huì)自動(dòng)隱藏咧织。如果希望在item1被clear后就強(qiáng)制清除root.promotion的badge, 則可以在清除item1后調(diào)用:
[RJBadgeController clearBadgeForKeyPath:@"root.promotion" force:YES];
這樣即使子節(jié)點(diǎn)的badge尚未全部清除嗓袱,父節(jié)點(diǎn)也會(huì)被強(qiáng)制clear.
正常情況下不應(yīng)該去調(diào)用force:YES, 如果非要調(diào)用,可能是路徑結(jié)構(gòu)設(shè)計(jì)不合理了
對(duì)于小紅點(diǎn)的樣式, RJBadgeKit可以通過(guò)offset來(lái)設(shè)置顯示位置习绢,也可以傳入需要展示的自定義紅點(diǎn)icon. 如果需要展示的樣式非常復(fù)雜渠抹,那也可以直接傳入定制的view用來(lái)作為badge展示:
promotionButton.badgeOffset = CGPointMake(-50, 0); // 調(diào)整小紅點(diǎn)的顯示位置offset, 相對(duì)于右上角
[self.promotionButton setBadgeImage:[UIImage imageNamed:@"badgeNew"]]; // 顯示自定義的badge icon
[self.promotionButton setCustomView:self.customBadgeView]; // 顯示自定義的badge view
下圖為RJBadgeKit所對(duì)應(yīng)的Example運(yùn)行效果, 更詳細(xì)的使用示例及所有支持的接口方法和屬性設(shè)置可以參考Example工程。
最后再貼一下源碼地址: https://github.com/rjinxx/RJBadgeKit, 在使用中有遇到什么問(wèn)題或者優(yōu)化建議歡迎留言PR, 如果RJBadgeKit的實(shí)現(xiàn)方案對(duì)你有所幫助和啟發(fā)闪萄,也不妨給個(gè)Star鼓勵(lì)下梧却。