小紅點(訊息推送提醒)在現今的各個App中幾乎無處不在，特別是內容的更新日漸頻繁，大量的小紅點被投放在各個業務入口。一般來說，小紅點主要有三個應用場景:
- App有新新增的功能提醒使用者使用
- 某一個已有的模組有功能上的更新
- 功能有內容的變化或業務上的提醒
常見的比如下圖所示的QQ訊息提示(紅點為訊息數目的提示), 朋友圈的新回覆，店鋪上架新品，最新優惠活動提醒等等。
思路分析
通常情況下，小紅點不是孤立使用的，一項功能或業務的運營涉及多個層級多個入口，所以小紅點需要有清晰的路徑導向，而且包含路徑樹的概念，父路徑的小紅點為子路徑小紅點的並集。其次就是小紅點的具體顯示，以及顯示的具體樣式。因此，總結一下後可以把小紅點的功能模組歸納為兩大塊: 小紅點路徑監測+事件分發和小紅點的UI顯示。
小紅點路徑監測+事件分發
小紅點所支援的路徑格式設計為root.xx.xx, 小紅點原則是父節點的小紅點為子節點的小紅點並集。root為預設的根路徑。如下圖所示, root.first為子路徑, root.second為同級子路徑。在純紅點模式下, root的小紅點顯示為root.first, root.second和root.third的並集，同理在數字顯示模式下, root的badge數量為root.first, root.second和root.third的badge數量之和。而root.first的badge數量則又為root.first.firstA和root.first.firstB的和。
小紅點的路徑監測則是需要提供類似系統KVO的一個Observer, 用來觀察路徑所對應的小紅點的變化，並且當子路徑的紅點發生變化是需要逐層分發到每一個父路徑。當任意子路徑有紅點觸發事件時，父路徑也需顯示紅點。而當所有子路徑的紅點事情都清除後，父路徑的紅點才能清除。
總結一下，小紅點路徑監測需要實現下面的介面:
|
1 2 |
- (void)observePath:(NSString *)keyPath block:(RJBadgeNotificationBlock)block; - (void)observePath:(NSString *)keyPath badgeView:(nullable id<P365BadgeView>)badgeView block:(nullable RJBadgeNotificationBlock)block; |
第一個介面為某個被監測路徑發生紅點事件觸發後提供block業務處理回撥，第二個介面則為當發生事件後，在相應的badgeView上顯示小紅點UI, 這裡傳入的badgeView可以是一個button, 也可以是一個tab, 因而應該包括所有廣義上的UI控制元件。
小紅點的事件觸發和分發則需要實現如下介面:
|
1 2 3 4 5 |
+ (void)setBadgeForKeyPath:(NSString *)keyPath; + (void)setBadgeForKeyPath:(NSString *)keyPath count:(NSUInteger)count; + (void)clearBadgeForKeyPath:(NSString *)keyPath; + (void)clearBadgeForKeyPath:(NSString *)keyPath forced:(BOOL)forced; |
當App收到伺服器推送有新內容更新時，需要對某個路徑setBadge, 這邊的setBadge會觸發上面的observe block的回撥。且如果訊息為數量型別，比如未讀訊息時，還需要在setBadge的時候新增count屬性。若使用者點選了訊息或進入了某個小紅點提示的入口後，需要清除小紅點訊息，並且如果Observe的時候繫結了顯示小紅點的UI控制元件，也需要清除該控制元件上的小紅點圖示。
正常情況下，如果某個路徑下面還有子路徑有小紅點，這個時候對該路徑clearBadge是應該不起效果的，合理邏輯應該是當子路徑的所有小紅點都clear掉了後父路徑自動清除。但如果這個情況下需要強制清除父路徑紅點，則需要在clear方法上加一個是否forced清除的引數。
小紅點的UI顯示
小紅點的UI樣式應該包括三種: 小紅點, 數字和自定義的icon或view. 最基本的小紅點主要用在業務入口處，用於內容、功能或動態更新的提醒。數字小紅點則一般用來展示未讀訊息的數量。自定義的icon可以顯示比如new, 免費, 熱門等活動運營的提示，當然如果需要展示更復雜的UI設計也應該支援自定義view作為badge的功能。
既然可以展示三種樣式的小紅點UI, 那麼就需要有一個優先順序排序，結合上面的setBadge介面, 我們可以想到的規則是如果setBadge時沒有設定count, 那麼預設就是展示小紅點, 如果設定了count, 那麼就展示數字。另外在展示小紅點的情況下，如果使用者設定了自定義icon那麼就優先展示icon, 按照這個思路，小紅點樣式的優先順序就出來了: 數字的優先順序最高，其次是自定義icon, 最後則是預設的圓形小紅點。
對於UI, 我們都希望可以定製的，所以對於預設的圓形小紅點應該可以調整它的半徑，以及展示在控制元件上相對於右上角的offset, 而對於數字小紅點應該可以調整它的字型和文字顏色。另外，如果數字的數值特別大，應該有個最高上限，比如超過99後就顯示省略號。按照上面這些思路分析，我們可以得到下面所示的BadgeView介面:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@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; |
小紅點顯示介面的呼叫理論上應該由內部來觸發，也就是使用方呼叫:
|
1 |
+ (void)setBadgeForKeyPath:(NSString *)keyPath; |
之後，
|
1 |
- (void)observePath:(NSString *)keyPath badgeView:(nullable id<P365BadgeView>)badgeView block:(nullable RJBadgeNotificationBlock)block; |
這邊所指定需要顯示小紅點的badgeView上會在小紅點模組內部來呼叫showBadge. 當使用者點選了顯示小紅點的控制元件後，應該在控制元件的點選事件裡面呼叫clearBadgeForKeyPath來觸發內部呼叫hideBadge. 簡而言之，就是使用方不需要顯式的來呼叫badgeView的showBadge或者hideBadge. 同理，當使用方呼叫:
|
1 |
+ (void)setBadgeForKeyPath:(NSString *)keyPath count:(NSUInteger)count; |
會在內部呼叫badgeView的showBadgeWithValue. 當然如果使用方需要在某個控制元件上(e.g. badgeView -> UIButton)顯示小紅點，但是並不需要與某個路徑關聯，只是單純的顯示小紅點，那應該也需要支援[self.button showBadge]的呼叫。
支援顯示小紅點的badgeView應該包括廣義上的所有UI控制元件, iOS這邊控制元件主要有3大種類: a). UIView b). UIBarButtonItem c). UITabBarItem, 所以我們可以對這三種類分別寫一個category來建立小紅點UI並顯示在控制元件上，當然這三個category必須要conform上面的RJBadgeView Protocol:
|
1 2 3 |
@interface UIView (RJBadge) <RJBadgeView> @interface UITabBarItem (RJBadge) <RJBadgeView> @interface UIBarButtonItem (RJBadge) <RJBadgeView> |
介面優化
參照上面的討論，我們需要對小紅點路徑進行監控，也就是要observePath, 類似於系統的KVO監測API, 這邊會有下面幾個需要考慮的問題:
- 重複新增已有keyPath的observe
- observe之後在observer退出或釋放後忘記unobserve
- 初始化小紅點模組的複雜度和便利度
- block回撥裡面可能的迴圈引用問題
對於第一個問題，我們建立一個資料結構RJBadgeInfo, 用來存放小紅點的相關資訊，每次新增observe對info進行比較，如果已有監測則不去做重複新增。
|
1 2 3 4 5 6 7 8 |
@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; <a href='http://www.jobbole.com/members/q762876724'>@end</a> |
第二個問題可以使用自釋放的機制來實現observe的自動移除，這樣就需要將badgeController作為觀察者的成員變數，當observer釋放之後badgeController也會釋放，那麼我們就在badgeController的 dealloc函式中去做observe的移除操作。使用方則無需關心何時去移除觀察者，當然如果確實需要提前移除觀察者，也可以呼叫unobservePath介面。
初始化函式生成badgeController並且以observer的成員變數存在，最簡單和便捷的方式就是給所有NSObject物件通過category新增badgeController變數，這樣使用者無需顯式去呼叫alloc方法，只需要self.badgeController即可動態生成badgeController物件。
|
1 2 3 4 5 6 |
@interface NSObject (RJBadgeController) @property (nonatomic, strong) RJBadgeController *badgeController; <a href='http://www.jobbole.com/members/q762876724'>@end</a> |
在badgeController的get方法裡面則是呼叫RJBadgeController的初始化方法生成物件並賦值給self.badgeController變數:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
- (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); } |
最後一個迴圈引用的問題，在badge的block裡面用引數observer來代替self, 我們對observer(即self.badgeController的self)進行weak化處理並通過block回撥引數傳出:
|
1 2 3 4 5 6 7 8 |
[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狀態(是否應該顯示小紅點) // badge count -> info[RJBadgeCountKey]: 當前路徑所對應的badge數值(僅在badge為數值模式下有效) }]; |
方案實現
理論talk完了，可以show原始碼了，完整的小紅點解決方案實現原始碼RJBadgeKit已經發布到GitHub, 可以直接通過cocoapods, pod ‘RJBadgeKit’整合使用。我們來看下具體應用示例:
假設我們有個促銷頁面，該促銷有兩個商品參與活動，則促銷頁面的路徑可設定為root.promotion，促銷頁面內兩個商品的路徑分別設為root.promotion.item1, root.promotion.item2. 現在需要推送小紅點訊息給使用者，在promotion的入口處的button需要顯示小紅點提示，當使用者進入到promotion頁面且分別點選了item1和item2後，promotion的小紅點提示才消失。
首先我們在RJPromotionViewController裡面對promotionButton新增路徑的觀察者，當該路徑被setBadge時候則顯示小紅點，clearBadge時則隱藏小紅點:
|
1 2 3 4 5 6 7 |
[self.badgeController observePath:@"root.promotion" badgeView:promotionButton block:^(RJPromotionViewController *observer, NSDictionary *info) { BOOL hasPromotionItem = [info[RJBadgeShowKey] boolValue]; [observer setPromotionStatus:hasPromotionItem]; }]; |
當網路請求返回時發現有兩個促銷資料(注意路徑的格式)，則呼叫:
|
1 2 |
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1"]; [RJBadgeController setBadgeForKeyPath:@"root.promotion.item2"]; |
子路徑的小紅點狀態變化會觸發父路徑observe的block回撥，所以上述兩行程式碼執行後promotionButton會觸發顯示小紅點。當然如果希望promotionButton不顯示小紅點，而是顯示具體的促銷數量，則可以直接如下呼叫:
|
1 |
[RJBadgeController setBadgeForKeyPath:@"root.promotion" count:2]; |
如果promotion item下面還有子路徑, 則呼叫:
|
1 |
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1" count:5]; |
在這個情況下，promotionButton上顯示的數值(亦即root.promotion路徑對應的badge值)為root.promotion.item1和root.promotion.item2及其所有子節點的數值之和。當使用者點選檢視了item1和item2後，分別呼叫clearBadeg方法來消除小紅點:
|
1 2 |
[RJBadgeController clearBadgeForKeyPath:@"root.promotion.item1"]; [RJBadgeController clearBadgeForKeyPath:@"root.promotion.item2"]; |
這時父節點root.promotion的badge自動clear, promotionButton的小紅點會自動隱藏。如果希望在item1被clear後就強制清除root.promotion的badge, 則可以在清除item1後呼叫:
|
1 |
[RJBadgeController clearBadgeForKeyPath:@"root.promotion" force:YES]; |
這樣即使子節點的badge尚未全部清除，父節點也會被強制clear.
正常情況下不應該去呼叫force:YES, 如果非要呼叫，可能是路徑結構設計不合理了
對於小紅點的樣式, RJBadgeKit可以通過offset來設定顯示位置，也可以傳入需要展示的自定義紅點icon. 如果需要展示的樣式非常複雜，那也可以直接傳入定製的view用來作為badge展示:
|
1 2 3 4 5 |
promotionButton.badgeOffset = CGPointMake(-50, 0); // 調整小紅點的顯示位置offset, 相對於右上角 [self.promotionButton setBadgeImage:[UIImage imageNamed:@"badgeNew"]]; // 顯示自定義的badge icon [self.promotionButton setCustomView:self.customBadgeView]; // 顯示自定義的badge view |
下圖為RJBadgeKit所對應的Example執行效果, 更詳細的使用示例及所有支援的介面方法和屬性設定可以參考Example工程。
最後再貼一下原始碼地址: https://github.com/RylanJIN/RJBadgeKit, 在使用中有遇到什麼問題或者優化建議歡迎留言PR, 如果RJBadgeKit的實現方案對你有所幫助和啟發，也不妨給個Star鼓勵下。