小紅點(消息推送提醒)在現(xiàn)今的各個App中幾乎無處不在，特別是內(nèi)容的更新日漸頻繁，大量的小紅點被投放在各個業(yè)務入口。一般來說，小紅點主要有三個應用場景:
App有新添加的功能提醒用戶使用
某一個已有的模塊有功能上的更新
功能有內(nèi)容的變化或業(yè)務上的提醒
常見的比如下圖所示的QQ消息提示(紅點為消息數(shù)目的提示), 朋友圈的新回復，店鋪上架新品，最新優(yōu)惠活動提醒等等。
red-dot.png
思路分析
通常情況下，小紅點不是孤立使用的，一項功能或業(yè)務的運營涉及多個層級多個入口，所以小紅點需要有清晰的路徑導向，而且包含路徑樹的概念，父路徑的小紅點為子路徑小紅點的并集。其次就是小紅點的具體顯示，以及顯示的具體樣式。因此，總結(jié)一下后可以把小紅點的功能模塊歸納為兩大塊: 小紅點路徑監(jiān)測+事件分發(fā)和小紅點的UI顯示。
小紅點路徑監(jiān)測+事件分發(fā)
小紅點所支持的路徑格式設計為root.xx.xx, 小紅點原則是父節(jié)點的小紅點為子節(jié)點的小紅點并集。root為默認的根路徑。如下圖所示, root.first為子路徑, root.second為同級子路徑。在純紅點模式下, root的小紅點顯示為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的和。
path.png
小紅點的路徑監(jiān)測則是需要提供類似系統(tǒng)KVO的一個Observer, 用來觀察路徑所對應的小紅點的變化，并且當子路徑的紅點發(fā)生變化是需要逐層分發(fā)到每一個父路徑。當任意子路徑有紅點觸發(fā)事件時，父路徑也需顯示紅點。而當所有子路徑的紅點事情都清除后，父路徑的紅點才能清除。
總結(jié)一下，小紅點路徑監(jiān)測需要實現(xiàn)下面的接口:
- (void)observePath:(NSString *)keyPath block:(RJBadgeNotificationBlock)block;
- (void)observePath:(NSString *)keyPath badgeView:(nullable id)badgeView block:(nullable RJBadgeNotificationBlock)block;
第一個接口為某個被監(jiān)測路徑發(fā)生紅點事件觸發(fā)后提供block業(yè)務處理回調(diào)，第二個接口則為當發(fā)生事件后，在相應的badgeView上顯示小紅點UI, 這里傳入的badgeView可以是一個button, 也可以是一個tab, 因而應該包括所有廣義上的UI控件。
小紅點的事件觸發(fā)和分發(fā)則需要實現(xiàn)如下接口:
+ (void)setBadgeForKeyPath:(NSString *)keyPath;
+ (void)setBadgeForKeyPath:(NSString *)keyPath count:(NSUInteger)count;
+ (void)clearBadgeForKeyPath:(NSString *)keyPath;
+ (void)clearBadgeForKeyPath:(NSString *)keyPath forced:(BOOL)forced;
當App收到服務器推送有新內(nèi)容更新時，需要對某個路徑setBadge, 這邊的setBadge會觸發(fā)上面的observe block的回調(diào)。且如果消息為數(shù)量類型，比如未讀消息時，還需要在setBadge的時候添加count屬性。若用戶點擊了消息或進入了某個小紅點提示的入口后，需要清除小紅點消息，并且如果Observe的時候綁定了顯示小紅點的UI控件，也需要清除該控件上的小紅點圖標。
正常情況下，如果某個路徑下面還有子路徑有小紅點，這個時候?qū)υ撀窂絚learBadge是應該不起效果的，合理邏輯應該是當子路徑的所有小紅點都clear掉了后父路徑自動清除。但如果這個情況下需要強制清除父路徑紅點，則需要在clear方法上加一個是否forced清除的參數(shù)。
小紅點的UI顯示
小紅點的UI樣式應該包括三種: 小紅點, 數(shù)字和自定義的icon或view. 最基本的小紅點主要用在業(yè)務入口處，用于內(nèi)容、功能或動態(tài)更新的提醒。數(shù)字小紅點則一般用來展示未讀消息的數(shù)量。自定義的icon可以顯示比如new, 免費, 熱門等活動運營的提示，當然如果需要展示更復雜的UI設計也應該支持自定義view作為badge的功能。
既然可以展示三種樣式的小紅點UI, 那么就需要有一個優(yōu)先級排序，結(jié)合上面的setBadge接口, 我們可以想到的規(guī)則是如果setBadge時沒有設置count, 那么默認就是展示小紅點, 如果設置了count, 那么就展示數(shù)字。另外在展示小紅點的情況下，如果用戶設置了自定義icon那么就優(yōu)先展示icon, 按照這個思路，小紅點樣式的優(yōu)先級就出來了: 數(shù)字的優(yōu)先級最高，其次是自定義icon, 最后則是默認的圓形小紅點。
對于UI, 我們都希望可以定制的，所以對于默認的圓形小紅點應該可以調(diào)整它的半徑，以及展示在控件上相對于右上角的offset, 而對于數(shù)字小紅點應該可以調(diào)整它的字體和文字顏色。另外，如果數(shù)字的數(shù)值特別大，應該有個最高上限，比如超過99后就顯示省略號。按照上面這些思路分析，我們可以得到下面所示的BadgeView接口:
@protocol RJBadgeView @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ào)用理論上應該由內(nèi)部來觸發(fā)，也就是使用方調(diào)用:
+ (void)setBadgeForKeyPath:(NSString *)keyPath;
之后，
- (void)observePath:(NSString *)keyPath badgeView:(nullable id)badgeView block:(nullable RJBadgeNotificationBlock)block;
這邊所指定需要顯示小紅點的badgeView上會在小紅點模塊內(nèi)部來調(diào)用showBadge. 當用戶點擊了顯示小紅點的控件后，應該在控件的點擊事件里面調(diào)用clearBadgeForKeyPath來觸發(fā)內(nèi)部調(diào)用hideBadge. 簡而言之，就是使用方不需要顯式的來調(diào)用badgeView的showBadge或者hideBadge. 同理，當使用方調(diào)用:
+ (void)setBadgeForKeyPath:(NSString *)keyPath count:(NSUInteger)count;
會在內(nèi)部調(diào)用badgeView的showBadgeWithValue. 當然如果使用方需要在某個控件上(e.g. badgeView -> UIButton)顯示小紅點，但是并不需要與某個路徑關聯(lián)，只是單純的顯示小紅點，那應該也需要支持[self.button showBadge]的調(diào)用。
支持顯示小紅點的badgeView應該包括廣義上的所有UI控件, iOS這邊控件主要有3大種類: a). UIView b). UIBarButtonItem c). UITabBarItem, 所以我們可以對這三種類分別寫一個category來創(chuàng)建小紅點UI并顯示在控件上，當然這三個category必須要conform上面的RJBadgeView Protocol:
@interface UIView (RJBadge) @interface UITabBarItem (RJBadge) @interface UIBarButtonItem (RJBadge)
接口優(yōu)化
參照上面的討論，我們需要對小紅點路徑進行監(jiān)控，也就是要observePath, 類似于系統(tǒng)的KVO監(jiān)測API, 這邊會有下面幾個需要考慮的問題:
重復添加已有keyPath的observe
observe之后在observer退出或釋放后忘記unobserve
初始化小紅點模塊的復雜度和便利度
block回調(diào)里面可能的循環(huán)引用問題
對于第一個問題，我們創(chuàng)建一個數(shù)據(jù)結(jié)構(gòu)RJBadgeInfo, 用來存放小紅點的相關信息，每次添加observe對info進行比較，如果已有監(jiān)測則不去做重復添加。
@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? ? ? ? ? badgeView;
@end
第二個問題可以使用自釋放的機制來實現(xiàn)observe的自動移除，這樣就需要將badgeController作為觀察者的成員變量，當observer釋放之后badgeController也會釋放，那么我們就在badgeController的? dealloc函數(shù)中去做observe的移除操作。使用方則無需關心何時去移除觀察者，當然如果確實需要提前移除觀察者，也可以調(diào)用unobservePath接口。
初始化函數(shù)生成badgeController并且以observer的成員變量存在，最簡單和便捷的方式就是給所有NSObject對象通過category添加badgeController變量，這樣用戶無需顯式去調(diào)用alloc方法，只需要self.badgeController即可動態(tài)生成badgeController對象。
@interface NSObject (RJBadgeController)
@property (nonatomic, strong) RJBadgeController *badgeController;
@end
在badgeController的get方法里面則是調(diào)用RJBadgeController的初始化方法生成對象并賦值給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);
}
最后一個循環(huán)引用的問題，在badge的block里面用參數(shù)observer來代替self, 我們對observer(即self.badgeController的self)進行weak化處理并通過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] : 當前路徑所對應的badge是否處于set狀態(tài)(是否應該顯示小紅點)
// badge count? -> info[RJBadgeCountKey]: 當前路徑所對應的badge數(shù)值(僅在badge為數(shù)值模式下有效)
}];
方案實現(xiàn)
理論talk完了，可以show源碼了，完整的小紅點解決方案實現(xiàn)源碼RJBadgeKit已經(jīng)發(fā)布到GitHub, 可以直接通過cocoapods, pod 'RJBadgeKit'集成使用。我們來看下具體應用示例:
假設我們有個促銷頁面，該促銷有兩個商品參與活動，則促銷頁面的路徑可設置為root.promotion，促銷頁面內(nèi)兩個商品的路徑分別設為root.promotion.item1, root.promotion.item2. 現(xiàn)在需要推送小紅點消息給用戶，在promotion的入口處的button需要顯示小紅點提示，當用戶進入到promotion頁面且分別點擊了item1和item2后，promotion的小紅點提示才消失。
首先我們在RJPromotionViewController里面對promotionButton添加路徑的觀察者，當該路徑被setBadge時候則顯示小紅點，clearBadge時則隱藏小紅點:
[self.badgeController observePath:@"root.promotion"
badgeView:promotionButton
block:^(RJPromotionViewController *observer,
NSDictionary *info) {
BOOL hasPromotionItem = [info[RJBadgeShowKey] boolValue];
[observer setPromotionStatus:hasPromotionItem];
}];
當網(wǎng)絡請求返回時發(fā)現(xiàn)有兩個促銷數(shù)據(jù)(注意路徑的格式)，則調(diào)用:
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1"];
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item2"];
子路徑的小紅點狀態(tài)變化會觸發(fā)父路徑observe的block回調(diào)，所以上述兩行代碼執(zhí)行后promotionButton會觸發(fā)顯示小紅點。當然如果希望promotionButton不顯示小紅點，而是顯示具體的促銷數(shù)量，則可以直接如下調(diào)用:
[RJBadgeController setBadgeForKeyPath:@"root.promotion" count:2];
如果promotion item下面還有子路徑, 則調(diào)用:
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1" count:5];
在這個情況下，promotionButton上顯示的數(shù)值(亦即root.promotion路徑對應的badge值)為root.promotion.item1和root.promotion.item2及其所有子節(jié)點的數(shù)值之和。當用戶點擊查看了item1和item2后，分別調(diào)用clearBadeg方法來消除小紅點:
[RJBadgeController clearBadgeForKeyPath:@"root.promotion.item1"];
[RJBadgeController clearBadgeForKeyPath:@"root.promotion.item2"];
這時父節(jié)點root.promotion的badge自動clear, promotionButton的小紅點會自動隱藏。如果希望在item1被clear后就強制清除root.promotion的badge, 則可以在清除item1后調(diào)用:
[RJBadgeController clearBadgeForKeyPath:@"root.promotion" force:YES];
這樣即使子節(jié)點的badge尚未全部清除，父節(jié)點也會被強制clear.
正常情況下不應該去調(diào)用force:YES, 如果非要調(diào)用，可能是路徑結(jié)構(gòu)設計不合理了
對于小紅點的樣式, RJBadgeKit可以通過offset來設置顯示位置，也可以傳入需要展示的自定義紅點icon. 如果需要展示的樣式非常復雜，那也可以直接傳入定制的view用來作為badge展示:
promotionButton.badgeOffset = CGPointMake(-50, 0); // 調(diào)整小紅點的顯示位置offset, 相對于右上角
[self.promotionButton setBadgeImage:[UIImage imageNamed:@"badgeNew"]]; // 顯示自定義的badge icon
[self.promotionButton setCustomView:self.customBadgeView]; // 顯示自定義的badge view
下圖為RJBadgeKit所對應的Example運行效果, 更詳細的使用示例及所有支持的接口方法和屬性設置可以參考Example工程。
demo.gif
