开源 一行代码实现多形式多动画的推送小红点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
- 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.
- Slight adjustment for code structure to fit future extension.
- 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,而且接口简单。接口应该类似于这样:
|
1
|
[someView showBadgeWithStyle:WBadgeStyleRedDot value:0 animationType:WBadgeAnimTypeShake]; |
现实往往是这样的,使用者使用起来越简单,接口提供方就需要做的越多。我们知道,小红点应该具有多个属性,比如大小、背景颜色、文字颜色等。想让badge具有更强的可定制性,就需要开放这些丰富的属性。那么问题来了,category中理论上只能添加方法,无法添加属性。这时候就需要一些运行时runtime方面的技巧了。我们可以在运行时为UIView添加属性,需要使用到的两个runtime api为:
|
1
2
|
OBJC_EXPORT id objc_getAssociatedObject(id object, const void *key) __OSX_AVAILABLE_STARTING(__MAC_10_6, __IPHONE_3_1); |
|
1
2
|
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角标的背景色“
|
1
2
3
4
|
- (UIColor *)badgeBgColor//getter{ return objc_getAssociatedObject(self, &badgeBgColorKey);} |
|
1
2
3
4
|
- (void)setBadgeBgColor:(UIColor *)badgeBgColor//setter{ objc_setAssociatedObject(self, &badgeBgColorKey, badgeBgColor, OBJC_ASSOCIATION_RETAIN);} |
关于动态添加属性的知识在这里就不具体展开了,想要了解更多的可以参考我的这篇《iOS运行时runtime初探(强制获取并修改私有变量,强制增加及修改私有方法等)》。这个知识点也是本文开源的WZLBadge的核心点,实际上这也是大多数开源工具的常规做法。另外,对于WZLBadge的其他技术细节在这里就不再细述,具体可以到文章末尾处转去Github查看。
使用方法
由于WZLBadge采用对UIView扩展category的方式,因此,所有的UIView及其继承子类(UIControl等)都可以无缝使用,当前版本开放的接口主要有以下几个:
|
1
2
3
4
|
/** * show badge with red dot style and WBadgeAnimTypeNone by default. */- (void)showBadge; |
|
1
2
3
4
5
6
7
8
|
/** * 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; |
|
1
2
3
4
|
/** * clear badge */- (void)clearBadge; |
源代码分享
我将源代码托管在github上,我个人希望WZLBadge能不断优化成为iOS平台上推送红点的终极解决方案,如果你感兴趣,我非常欢迎你一起加入让WZLBadge变得更好。有什么问题或者建议请留言或者在github提issue。
此外,希望你能在github上Fellow我,并且对WZLBadge进行star/fork/watch,接下来我的更新会直接通知到你^^。
github地址:WZLBadge (https://github.com/weng1250/WZLBadge)
开源 一行代码实现多形式多动画的推送小红点WZLBadge(iOS)-备用的更多相关文章
- 【原】Github系列之二:开源 一行代码实现多形式多动画的推送小红点WZLBadge(iOS)
更新日志 V1.2 2015.09.25 1.UITabBarItem badge is supproted; 2.Enable change badge properties when badge ...
- 一行代码实现自定义转场动画--iOS自定义转场动画集
WXSTransition 这款非常不错,力推 这是作者源码简书地址: http://www.jianshu.com/p/fd3154946919 这是作者源码github地址 https://git ...
- EasyRTMP直播推送效率优化之开源librtmp CPU占用高效率优化
本文转自EasyDarwin开源团队Kim的博客:http://blog.csdn.net/jinlong0603/article/details/52950948 EasyRTMP 前面介绍过Eas ...
- iOS 基于APNS消息推送原理与实现(包括JAVA后台代码)
Push的原理: Push 的工作机制可以简单的概括为下图 图中,Provider是指某个iPhone软件的Push服务器,这篇文章我将使用.net作为Provider. APNS 是Apple ...
- 前端通信:SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新,代码热修复案例)
距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...
- sourcetree回退已推送的代码
方法一: https://blog.csdn.net/gang544043963/article/details/71511958 我百度到博主用这种界面的方式进行的,可视化很好.我想应该可以很好的回 ...
- EasyDarwin开源手机直播方案:EasyPusher手机直播推送,EasyDarwin流媒体服务器,EasyPlayer手机播放器
在不断进行EasyDarwin开源流媒体服务器的功能和性能完善的同时,我们也配套实现了目前在安防和移动互联网行业比较火热的移动端手机直播方案,主要就是我们的 EasyPusher直播推送项目 和 Ea ...
- 开源作品ThinkJDBC—一行代码搞定数据库操作
1 简介 ThinkJD,又名ThinkJDBC,一个简洁而强大的开源JDBC操作库.你可以使用Java像ThinkPHP框架的M方法一样,一行代码搞定数据库操作.ThinkJD会自动管理数据库连接, ...
- Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
摘要: 本文对Hystrix.Resilience4j.Sentinel进行对比,并探讨如何使用一行代码这种极简的方式,将Hystrix迁移到Sentinel. Hystrix 自从前段时间 宣布停止 ...
随机推荐
- MFC新婚之夜(笑昏,大概是指MFC的人固步自封)
请问学会MFC都要学些什么呢?DOC-VIEW,OLE,UI线程,泵,钩,还是堆,栈内存分配与回收的机制?还是那些各种各样的CHAR,还是__cdecl, __stdcall,PASCAL等等,或者编 ...
- 简要介绍EF(实体框架)
原文地址:http://wenku.baidu.com/link?url=eutYH1QWA9y7fnxsxT9pZfJTPfa36nCI4R3Ub8Y4ybAVSgmXzEnXHwUj-GPFinn ...
- 《Node.js开发指南》知识整理
Node.js简介 Node是一个可以让JavaScript运行在服务器端的平台,抛弃了传统平台依靠多线程来实现高并发的设计思路,而采用单线程.异步式I/O.事件驱动式的程序设计模型. 安装和配置No ...
- 鼠标点击DIV后,DIV的背景变色(js)
<!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...
- double精度的坑与BigDecimal
近期经常接触支付相关的功能,在开发及测试过程中,开始金额都使用的是double类型,而近期新进的需求存在支付时打折的情况,也就是会出现如 1.23元的情况,那么这时候问题来了,如果是直接使用1.23进 ...
- 菜单栏始终浮动在顶部 js
//菜单栏始终浮动在顶部var navH = $(".trade-tab-bot").offset().top;//获取要定位元素距离浏览器顶部的距离//滚动条事件$(window ...
- ios 数组倒序和数组转字符串
NSMutableArray *array = [NSMutableArray arrayWithObjects:",nil]; NSArray* reversedArray = [[arr ...
- cocoapods 的使用心得
一般我们下载的demo里边含有cocoapods 我们需要 在终端上输入命令,让他能够成功运行 步骤如下: 打开终端 cd 项目目录 直接拖动到终端里边就可以, 然后 pod install 如果 ...
- lua 加密
项目要求对lua脚本进行加密,查了一下相关的资料 ,得知lua本身可以使用luac将脚本编译为字节码(bytecode)从而实现加密,试了一下,确实可行.下面是使用原生的lua解释器编译字节码:1.新 ...
- SPOJ 416 - Divisibility by 15(贪心)
糟烂的代码啊... 这个题目思路很简单——末位只可能为0和5,所有数字的和肯定被3整除 没有0和5的肯定不行 否则,把所有数字求和 如果被3整除,则从大到小输出 如果除3余1,则按以下顺序——删1: ...