【原】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,而且接口简单。接口应该类似于这样:

 

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;

 

 本文转自编程小翁博客园博客,原文链接:http://www.cnblogs.com/wengzilin/p/4633937.html,如需转载请自行联系原作者

相关文章
|
3月前
|
Apache 数据安全/隐私保护 Docker
【开源问答系统】GitHub 14.9k star 的开源问答引擎来了,三分钟搭建完成~~~
Apache Answer 是一款开源问答系统,助力团队将零散知识沉淀为结构化资产。支持 Docker 快速部署、插件扩展、权限控制与多语言,兼具高效搜索、投票排序与私有化部署能力,适用于技术社区、企业知识库与用户支持场景。
590 22
|
3月前
|
人工智能 JavaScript 前端开发
Github 2024-10-28 开源项目周报 Top15
本周GitHub热门项目涵盖Svelte、Open Interpreter、PowerShell等,涉及Web开发、AI助手、自动化工具等领域,Python、JavaScript为主流语言,展现开源技术活跃生态。(239字)
487 19
|
3月前
|
人工智能 JavaScript 前端开发
Github 2024-11-04 开源项目周报 Top14
本周GitHub热门项目涵盖屏幕截图转代码、网页监控、低代码开发等。Python与TypeScript主导,亮点项目包括AI生成代码工具、开源社交应用Bluesky及机器人框架LeRobot,展现AI与自动化技术的快速发展趋势。
226 15
|
3月前
|
缓存 自然语言处理 JavaScript
抓紧上车,别再错过啦, Github 开源后台管理平台,Naive UI !!!
naive-ui-pro 是基于 Vue3 + Vite + TypeScript 的免费开源中后台模板,主打“路由插件化架构”,将权限、页签、缓存等功能拆解为可插拔模块,像搭积木一样灵活组装。内置 14+ 插件、Pro Naive UI 组件库与丰富示例,支持移动端适配、多主题、国际化,MIT 许可,开箱即用,助力高效开发。
421 4
|
3月前
|
人工智能 JavaScript Docker
Github 2024-11-11 开源项目周报 Top15
本周GitHub热门项目涵盖多领域:Python与TypeScript领跑,包括屏幕截图转代码、本地文件共享、PDF处理、AI开发代理等。亮点项目如screenshot-to-code、LocalSend、OpenHands及Diagrams,兼具创新与实用性,广受开发者关注。
305 13
|
3月前
|
人工智能 算法 JavaScript
Github 2024-10-14 开源项目周报 Top14
本周GitHub热门项目共14个,Python项目占7席。涵盖算法实现、生成式AI、金融分析、目标检测等领域,包括TheAlgorithms系列、OpenBB金融平台、Ultralytics YOLO11、Manim动画框架等,展现开源技术多元发展态势。
166 8
|
3月前
|
人工智能 Rust JavaScript
Github 2024-10-07 开源项目周报 Top15
本周GitHub热门项目共15个,Python项目占比最高达7个。榜首为Python算法实现集合TheAlgorithms/Python,Star数超17万;其他亮点包括Godot游戏引擎、OpenBB金融平台、ToolJet低代码框架及新兴AI相关项目如Crawl4AI、Llama Stack等,涵盖游戏、金融、AI、理财等多个领域。
176 4
|
3月前
|
人工智能 Rust 算法
Github 2024-09-30 开源项目周报 Top15
本周GitHub热门项目揭晓:Python主导,AutoGPT居首,涵盖AI、编程、数学动画等领域,助力开发者探索前沿技术。
162 4
|
3月前
|
人工智能 JavaScript 前端开发
Github 2024-09-16 开源项目周报 Top14
本周GitHub热门项目涵盖Python、TypeScript、Go等语言,React居首。亮点包括微软PowerToys、Node版本管理器、AI证件照工具HivisionIDPhotos及端侧大模型MiniCPM等。
144 2
|
3月前
|
Rust JavaScript 安全
Github 2024-09-02 开源项目周报 Top13
本周GitHub热门项目涵盖AI、开发工具与开源替代品。包括Notion替代AppFlowy、Airtable替代NocoDB、云平台Coolify及可观察性平台OpenObserve等,涉及Python、TypeScript、Rust等语言,聚焦效率、隐私与自动化。
220 1