小紅點解決方案思路分析

時間  2019-11-16
標籤 解決 方案 思路 分析 简体版
原文   原文鏈接

小紅點(消息推送提醒)在現今的各個App中幾乎無處不在，特別是內容的更新日漸頻繁，大量的小紅點被投放在各個業務入口。通常來講，小紅點主要有三個應用場景:git

  • App有新添加的功能提醒用戶使用
  • 某一個已有的模塊有功能上的更新
  • 功能有內容的變化或業務上的提醒

常見的好比下圖所示的QQ消息提示(紅點爲消息數目的提示), 朋友圈的新回覆，店鋪上架新品，最新優惠活動提醒等等。github

思路分析

一般狀況下，小紅點不是孤立使用的，一項功能或業務的運營涉及多個層級多個入口，因此小紅點須要有清晰的路徑導向，並且包含路徑樹的概念，父路徑的小紅點爲子路徑小紅點的並集。其次就是小紅點的具體顯示，以及顯示的具體樣式。所以，總結一下後能夠把小紅點的功能模塊概括爲兩大塊: 小紅點路徑監測+事件分發和小紅點的UI顯示。bash

小紅點路徑監測+事件分發

小紅點所支持的路徑格式設計爲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的和。服務器

path.png

小紅點的路徑監測則是須要提供相似系統KVO的一個Observer, 用來觀察路徑所對應的小紅點的變化，而且當子路徑的紅點發生變化是須要逐層分發到每個父路徑。當任意子路徑有紅點觸發事件時，父路徑也需顯示紅點。而當全部子路徑的紅點事情都清除後，父路徑的紅點才能清除。網絡

總結一下，小紅點路徑監測須要實現下面的接口:數據結構

- (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控件。ide

小紅點的事件觸發和分發則須要實現以下接口:函數

+ (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接口:

@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; 複製代碼

小紅點顯示接口的調用理論上應該由內部來觸發，也就是使用方調用:

+ (void)setBadgeForKeyPath:(NSString *)keyPath;
複製代碼

以後，

- (void)observePath:(NSString *)keyPath badgeView:(nullable id<P365BadgeView>)badgeView block:(nullable RJBadgeNotificationBlock)block;
複製代碼

這邊所指定須要顯示小紅點的badgeView上會在小紅點模塊內部來調用showBadge. 當用戶點擊了顯示小紅點的控件後，應該在控件的點擊事件裏面調用clearBadgeForKeyPath來觸發內部調用hideBadge. 簡而言之，就是使用方不須要顯式的來調用badgeView的showBadge或者hideBadge. 同理，當使用方調用:

+ (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:

@interface UIView (RJBadge) <RJBadgeView>
@interface UITabBarItem (RJBadge) <RJBadgeView>
@interface UIBarButtonItem (RJBadge) <RJBadgeView>
複製代碼

接口優化

參照上面的討論，咱們須要對小紅點路徑進行監控，也就是要observePath, 相似於系統的KVO監測API, 這邊會有下面幾個須要考慮的問題:

  1. 重複添加已有keyPath的observe
  2. observe以後在observer退出或釋放後忘記unobserve
  3. 初始化小紅點模塊的複雜度和便利度
  4. block回調裏面可能的循環引用問題

對於第一個問題，咱們建立一個數據結構RJBadgeInfo, 用來存放小紅點的相關信息，每次添加observe對info進行比較，若是已有監測則不去作重複添加。

@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
複製代碼

第二個問題可使用自釋放的機制來實現observe的自動移除，這樣就須要將badgeController做爲觀察者的成員變量，當observer釋放以後badgeController也會釋放，那麼咱們就在badgeController的 dealloc函數中去作observe的移除操做。使用方則無需關心什麼時候去移除觀察者，固然若是確實須要提早移除觀察者，也能夠調用unobservePath接口。

初始化函數生成badgeController而且以observer的成員變量存在，最簡單和便捷的方式就是給全部NSObject對象經過category添加badgeController變量，這樣用戶無需顯式去調用alloc方法，只須要self.badgeController便可動態生成badgeController對象。

@interface NSObject (RJBadgeController)

@property (nonatomic, strong) RJBadgeController *badgeController;

@end
複製代碼

在badgeController的get方法裏面則是調用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);
}
複製代碼

最後一個循環引用的問題，在badge的block裏面用參數observer來代替self, 咱們對observer(即self.badgeController的self)進行weak化處理並經過block回調參數傳出:

[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時則隱藏小紅點:

[self.badgeController observePath:@"root.promotion" 
                        badgeView:promotionButton 
                            block:^(RJPromotionViewController *observer, 
                                    NSDictionary *info) {
    BOOL hasPromotionItem = [info[RJBadgeShowKey] boolValue];
    [observer setPromotionStatus:hasPromotionItem];
}];
複製代碼

當網絡請求返回時發現有兩個促銷數據(注意路徑的格式)，則調用:

[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1"];
[RJBadgeController setBadgeForKeyPath:@"root.promotion.item2"];
複製代碼

子路徑的小紅點狀態變化會觸發父路徑observe的block回調，因此上述兩行代碼執行後promotionButton會觸發顯示小紅點。固然若是但願promotionButton不顯示小紅點，而是顯示具體的促銷數量，則能夠直接以下調用:

[RJBadgeController setBadgeForKeyPath:@"root.promotion" count:2];
複製代碼

若是promotion item下面還有子路徑, 則調用:

[RJBadgeController setBadgeForKeyPath:@"root.promotion.item1" count:5];
複製代碼

在這個狀況下，promotionButton上顯示的數值(亦即root.promotion路徑對應的badge值)爲root.promotion.item1和root.promotion.item2及其全部子節點的數值之和。當用戶點擊查看了item1和item2後，分別調用clearBadeg方法來消除小紅點:

[RJBadgeController clearBadgeForKeyPath:@"root.promotion.item1"];
[RJBadgeController clearBadgeForKeyPath:@"root.promotion.item2"];
複製代碼

這時父節點root.promotion的badge自動clear, promotionButton的小紅點會自動隱藏。若是但願在item1被clear後就強制清除root.promotion的badge, 則能夠在清除item1後調用:

[RJBadgeController clearBadgeForKeyPath:@"root.promotion" force:YES];
複製代碼

這樣即便子節點的badge還沒有所有清除，父節點也會被強制clear.

正常狀況下不該該去調用force:YES, 若是非要調用，多是路徑結構設計不合理了

對於小紅點的樣式, RJBadgeKit能夠經過offset來設置顯示位置，也能夠傳入須要展現的自定義紅點icon. 若是須要展現的樣式很是複雜，那也能夠直接傳入定製的view用來做爲badge展現:

promotionButton.badgeOffset = CGPointMake(-50, 0); // 調整小紅點的顯示位置offset, 相對於右上角

[self.promotionButton setBadgeImage:[UIImage imageNamed:@"badgeNew"]]; // 顯示自定義的badge icon

[self.promotionButton setCustomView:self.customBadgeView]; // 顯示自定義的badge view
複製代碼

下圖爲RJBadgeKit所對應的Example運行效果, 更詳細的使用示例及全部支持的接口方法和屬性設置能夠參考Example工程。

demo.gif

最後再貼一下源碼地址: github.com/RylanJIN/RJ…, 在使用中有遇到什麼問題或者優化建議歡迎留言PR, 若是RJBadgeKit的實現方案對你有所幫助和啓發，也不妨給個Star鼓勵下。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程