小紅點(diǎn)解決方案思路分析

小紅點(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)提醒等等。

red-dot.png

思路分析

通常情況下,小紅點(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.secondroot.third的并集,同理在數(shù)字顯示模式下, root的badge數(shù)量為root.first, root.secondroot.third的badge數(shù)量之和。而root.first的badge數(shù)量則又為root.first.firstAroot.first.firstB的和。

path.png

小紅點(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)用badgeViewshowBadge或者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)題:

  1. 重復(fù)添加已有keyPath的observe
  2. observe之后在observer退出或釋放后忘記unobserve
  3. 初始化小紅點(diǎn)模塊的復(fù)雜度和便利度
  4. 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工程。

demo.gif

最后再貼一下源碼地址: https://github.com/rjinxx/RJBadgeKit, 在使用中有遇到什么問(wèn)題或者優(yōu)化建議歡迎留言PR, 如果RJBadgeKit的實(shí)現(xiàn)方案對(duì)你有所幫助和啟發(fā),也不妨給個(gè)Star鼓勵(lì)下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容