iOS: 教你給UI控件添加Badge(消息提醒小圓點)

PPBadgeView

一、前言

最近項目的一個需求是在UIView, UITabBarItem, UIBarButtonItem 這三種類型的控件上添加消息提醒小圓點(Badge),一開始找了一個星星不少的Badge庫 RKNotificationHub,但發現其不能很好的知足項目需求(在UITabBarItem表現不是很好), 因而就本身動手寫了PPBadgeView,能夠很方便的爲UIView, UITabBarItem, UIBarButtonItem及其子類添加Badge, 支持 Objective-C與Swift 上效果圖:

二、原理

PPBadgeView的實現原理很簡單: 將一個UILabel控件(Badge,也可爲其它)添加到UIView(及子類)的對象上 , 因此咱們的關鍵點是要找到這個UIView對象! 像UIControl、UILabel、UIButton、UIImageView...這些控件就不用說了,都是繼承UIView,可直接在它們的身上添加Badge,可是 UITabBarItem , UIBarButtonItem 就不一樣了,它們兩個並非繼承的UIView,該怎麼辦?

2.一、給UITabBarItem添加Badge

經過系統的API能夠看到 UITabBarItem 繼承關係:
UIBarButtonItem --> UIBarItem --> NSObject ,
並無看見UIView(及子類) , UITabBarItem/UIBarItem的公開屬性裏也沒發現可用的UIView...不急,還記得Xcode自帶的UI視圖調試神器嗎?

運行Demo後點擊打開,可清楚的看到底部欄的UITabBarItem內有一個UITabBarButton,其下屬還有一個UITabBarSwappableImageView的圖片控件,咱們要找的就是這個UITabBarSwappableImageView

接下來就是要獲取這個UITabBarSwappableImageView,咱們可使用Runtime + KVC 的方式:

1. 先利用runtime獲的UITabBarButton的對象名稱(具體方法能夠查看這篇博客:三分鐘教會你runtime獲取屬性和成員變量), 最後打印的結果爲(因打印的內容太多,這裏只貼出最關鍵的結果):
   打印結果: UITabBarItem內的成員變量類型爲: @"UITabBarButton"，名字爲: _view
2. 再使用KVC取出這個UITabBarButton對象,遍歷出UITabBarSwappableImageView對象

   UIView *tabBarButton = [tabBarItem valueForKey:@"_view"];
    for (UIView *subView in tabBarButton.subviews) {
        if ([subView isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
            return subView;
        }
    }複製代碼

   找到了Badge能夠依靠的UIView, 剩下添加Badge的工做是否是變得容易不少了,這裏很少說, 在PPBadgeView裏有詳細代碼.

2.二、給UIBarButtonItem添加Badge

經過系統的API能夠看到 UIBarButtonItem 繼承關係:
UIBarButtonItem --> UIBarItem --> NSObject
和UITabBarItem同樣其公開的屬性也是沒有可用的UIView對象的,不過有了上面的👆經驗,獲取UIBarButtonItem中的UIView(及子類)也是一樣的作法, 看圖:
咱們要找的就是UINavigationButton中的UIImageView屬性了

很奇怪,利用runtime獲取出來UINavigationButton類名稱爲"UIView"
打印結果: UIBarButtonItem內的成員變量類型爲: @"UIView"，名字爲: _view
這裏須要注意的是, UINavigationButton中的UIImageView對象的layer默認masksToBounds = YES,在取出的時候須要設置masksToBounds = NO:

UIView *navigationButton = [barButtonItem valueForKey:@"_view"];
    for (UIView *subView in navigationButton.subviews) {
        if ([subView isKindOfClass:NSClassFromString(@"UIImageView")]) {
            subView.layer.masksToBounds = NO;
            return subView;
        }
    }複製代碼

固然,你也能夠直接使用navigationButton來作Badge的父視圖...

=========================

2017-06-27更新: UITabBarItem分類/拓展移除掉直接比對"私有屬性API:UITabBarSwappableImageView"的代碼,規避上架審覈被拒的風險.很是感謝@iOS程序犭袁 大大的指出的這個問題

=========================

結束

PPBadgeView現已託管到GitHub維護,有Objective-C和Swift雙版本,支持CocoaPods導入,地址: github.com/jkpang/PPBa…

個人GitHub主頁: github.com/jkpang