【原】Github系列之二：開源 一行代碼實現多形式多動畫的推送小紅點WZLBadge(iOS)

更新日誌

• V1.2 2015.09.25 1.UITabBarItem badge is supproted; 2.Enable change badge properties when badge is showing; 3.Other code optimization.
• V1.1 2015.08.12

1. UIBarButtonItem badge is supported. UIBarButtonItem is kind of NSObject and its displayed view is invisiable. This version makes usage of UIBarButtonItem badge as to UIView.
2. Slight adjustment for code structure to fit future extension.
3. Other code optimization.

• V1.0 at 2015.06.16

　　Base functions are completed, which is able to meet most of requirements.

---

 

 

概述

今天咱們來實現一個在iOS中讓人又愛又恨的推送「小紅點」WZLBadge。那什麼是badge呢？當後臺有數據更新須要讓用戶知道時，在按鈕或者其餘控件上顯示一個「小紅點」提醒用戶。注意，這裏的「小紅點」僅僅是泛指，實際的視圖能夠天馬行空，在這個版本中咱們先實現如下幾種：

• 小紅點
• 紅底白字「new」
• 紅底白字數字

爲了讓小紅點顯示後更加醒目，在這個版本中我又實現了三種不一樣的狀態動畫(status animation)：

• 心臟跳動效果(WBadgeAnimTypeScale)
• 呼吸燈效果(WBadgeAnimTypeBreathe)
• 橫向抖動(WBadgeAnimTypeShake)
• 靜止狀態(WBadgeAnimTypeNone, 默認)

WZLBadge還有如下優勢：

• 支持橫豎屏
• 支持iOS5~iOS8
• 容許高度定製化，包括「紅點」的背景顏色，文字(字體大小、顏色)，位置等

 

咱們仍是先看兩張示例圖片吧：

 

 

 

 

---

 

分析

 

想要使得實現出來的badge接口調用方便，我採用的是對UIView作category的方式，接口統一爲實例方法。經過這種方式，能夠給任意的UIView及其子類添加badge，並且接口簡單。接口應該相似於這樣：

 

[someView showBadgeWithStyle:WBadgeStyleRedDot value:0 animationType:WBadgeAnimTypeShake];

 

現實每每是這樣的，使用者使用起來越簡單，接口提供方就須要作的越多。咱們知道，小紅點應該具備多個屬性，好比大小、背景顏色、文字顏色等。想讓badge具備更強的可定製性，就須要開放這些豐富的屬性。那麼問題來了，category中理論上只能添加方法，沒法添加屬性。這時候就須要一些運行時runtime方面的技巧了。咱們能夠在運行時爲UIView添加屬性，須要使用到的兩個runtime api爲：

 

OBJC_EXPORT id objc_getAssociatedObject(id object, const void *key)
    __OSX_AVAILABLE_STARTING(__MAC_10_6, __IPHONE_3_1);

 

OBJC_EXPORT void objc_setAssociatedObject(id object, const void *key, id value, objc_AssociationPolicy policy)
    __OSX_AVAILABLE_STARTING(__MAC_10_6, __IPHONE_3_1);

例如，假設咱們如今想給UIView動態添加badgeBgColor屬性，用來操縱badge角標的背景色「

- (UIColor *)badgeBgColor//getter
{
    return objc_getAssociatedObject(self, &badgeBgColorKey);
}

 

- (void)setBadgeBgColor:(UIColor *)badgeBgColor//setter
{
    objc_setAssociatedObject(self, &badgeBgColorKey, badgeBgColor, OBJC_ASSOCIATION_RETAIN);
}

關於動態添加屬性的知識在這裏就不具體展開了，想要了解更多的能夠參考個人這篇《iOS運行時runtime初探(強制獲取並修改私有變量，強制增長及修改私有方法等)》。這個知識點也是本文開源的WZLBadge的核心點，實際上這也是大多數開源工具的常規作法。另外，對於WZLBadge的其餘技術細節在這裏就再也不細述，具體能夠到文章末尾處轉去Github查看。

 

 

---

 

使用方法

 

因爲WZLBadge採用對UIView擴展category的方式，所以，全部的UIView及其繼承子類(UIControl等)均可以無縫使用，當前版本開放的接口主要有如下幾個：

/**
 *  show badge with red dot style and WBadgeAnimTypeNone by default.
 */
- (void)showBadge;

 

/**
 *  showBadge
 *
 *  @param style WBadgeStyle type
 *  @param value (if 'style' is WBadgeStyleRedDot or WBadgeStyleNew, this value will be ignored. In this case, any value will be ok.)
*   @param aniType
 */
- (void)showBadgeWithStyle:(WBadgeStyle)style value:(NSInteger)value animationType:(WBadgeAnimType)aniType;

 

/**
 *  clear badge
 */
- (void)clearBadge;

 

 

---

 

 源代碼分享

我將源代碼託管在github上，我我的但願WZLBadge能不斷優化成爲iOS平臺上推送紅點的終極解決方案，若是你感興趣，我很是歡迎你一塊兒加入讓WZLBadge變得更好。有什麼問題或者建議請留言或者在github提issue。

此外，但願你能在github上Fellow我，而且對WZLBadge進行star/fork/watch，接下來個人更新會直接通知到你^^。

github地址：WZLBadge (https://github.com/weng1250/WZLBadge)

 

---

原創文章，轉載請註明 編程小翁@博客園，郵件zilin_weng@163.com，歡迎各位與我在C/C++/Objective-C/機器視覺等領域展開交流!