為你的TabBar新增Badge 感謝分享

實現過程

首先定義了三種badge型別

typedef ns_enum(nsuinteger, custombadgetype);

然後提供了乙個最主要的api，設定badge

- (void)setbadgestyle:(custombadgetype)type value:(nsinteger)badgevalue atindex:(nsinteger)index;

下邊是設定badge的實現，主要思路是首先初始化所有的badgeview，比如tabbar items的數量為3，則初始化3個紅點badge和數字badge，並把它們都隱藏。然後根據badge的style ，value，index設定顯示哪乙個紅點以及顯示什麼樣式。

-(void)setbadgestyle:(custombadgetype)type value:(nsinteger)badgevalue atindex:(nsinteger)index //獲取badge dotviews陣列 和 numberviews陣列， 分別代表紅點badge和數字badge nsmutablearray *badgedotviews = [self valueforkey:kbadgedotviewskey]; nsmutablearray *badgenumberviews = [self valueforkey:kbadgenumberviewskey]; //設定隱藏badge [badgedotviews[index] sethidden:yes]; [badgenumberviews[index] sethidden:yes]; //根據型別決定顯示哪一種badge if(type == kcustombadgestylereddot)else if(type == kcustombadgestylenumber)else if(type == kcustombadgestylenone) }

這裡初始化badgeviews的思路是使用tabbar的寬度計算出每乙個badge的位置，然後新增uiview 和uilabel到tabbar中，並設定一些屬性：

-(void)addbadgeviews //設定屬性來記錄有哪些dotviews，方便更新dotviews的屬性時使用 [self setvalue:badgedotviews forkey:kbadgedotviewskey]; //numberbadge views nsmutablearray *badgenumberviews = [nsmutablearray new]; for(int i = 0;i < itemscount;i ++) //設定屬性來記錄有哪些numberviews，方便更新numberviews的屬性時使用 [self setvalue:badgenumberviews forkey:kbadgenumberviewskey]; }

上邊還有乙個函式是根據數字更新badge，實現也很簡單武斷，如下：

-(void)adjustbadgenumberviewwithlabel:(uilabel *)label number:(nsinteger)numberelse if(number < 99)else }

看完上邊，其實大概的邏輯流程都講清楚了。如果你細心的話，會發現[self setvalue:badgenumberviews forkey:kbadgenumberviewskey];這一句呼叫是有問題的，如果不處理程式會直接崩潰。我本來是想在extension中定義幾個的屬性，寫起來才覺得很麻煩，因此在stackoverflow上稍微看了幾個回答，採用了乙個簡單點的方法：重寫valueforundefinedkey:和setvalue:forundefinedkey:，並利用objc的動態繫結的方式注入屬性，這裡其實會有一些陷阱，可以參考我最後附的鏈結進行詳細閱讀。**如下：

-(id)valueforundefinedkey:(nsstring *)key -(void)setvalue:(id)value forundefinedkey:(nsstring *)key

如果你知道更好地方法一定要告訴我：- ）

還有其他的一些api實現比較簡單就不列出來了。

使用方法

使用方法相當簡單，首先將github上的.h和.m檔案加入你的工程，接下來只需要兩步：

在初始化tabbar的時候，設定badgeview的位置

[tabcontroller.tabbar settabiconwidth:29];//調整x偏移量
[tabcontroller.tabbar setbadgetop:9];//調整y偏移量

設定顯示badgeview的樣式

[self.tabbarcontroller.tabbar setbadgestyle:type value:number atindex:index];

大功告成！

效果這裡附上乙個效果

思考這個實現還有很多滿足了我最簡單的需求，還有一些問題需要處理：

參考本文的源**以及demo都在github上，需要的請戳這裡 mrsummer/custombadge。歡迎吐槽~

為你的TabBar新增Badge 感謝分享

為Emacs新增標籤tabbar功能

SuperShadow 為你的View新增炫彩陰影

為你的程式新增系統級熱鍵

為你的TabBar新增Badge 感謝分享

為Emacs新增標籤tabbar功能

SuperShadow 為你的View新增炫彩陰影

為你的程式新增系統級熱鍵

相關推薦