带徽章提醒的Button开发过程

徽章提醒，在App图标上经常可以看见。在Tab bar上，只要设一个属性，就会出现。那么在其它地方要出现一个徽章，怎么办呢？
一种方法是用UIKit来模拟，用UIImageView，UILabel等组合来实现；
另外一种方法是用Core Graphic函数来画。这是规则的图形，实现起来也是还可以的。
在GitHub上，也出现了第三方库JSBadgeView，采用的就是第2种方法。使用起来还是比较简单的。

背景简介

进入新公司之后，分到了一个任务，就是做徽章提醒的基础控件。原来我一直用第一种方法来做的，直接在Storyboard上用一个view套一个UIImageView和UILabel。所以一下子没怎么明白过来。
后来，听人介绍，才知道有这么一个第三库，是专门来显示那个红色（一般是这样的）徽章。
最终的样子如下图所示

badgeButton.png

现有代码

JSBadgeView

通过关键字JSBadgeView，搜索整个工程，发现有一个地方用到了，是一个Cell定义的地方，是直接使用这个第三方库的。Cell本质是一个View，一个容器。其中的一个子View的右上角加个红色徽章，很基础的用法。

JSMyBadgeView

后来，无意之间又看到了JSMyBadgeView文件，在CommonUI文件夹下。大致看了一下，就是在第三方库JSBadgeView的基础上改的。改动的地方主要有以下几个：

1. 宏定义Height由16改为18；Radius由10改为18
2. textWidth变量额外加2
3. 在drawRect函数，加了无限大和空的判断

使用情况

在工程中搜索JSMyBadgeView，发现有4处使用了这个修改过的第三方库文件，大致的用法也差不多。

1. 对齐方式有右上角（符合预期），中间，中间靠右（后面两个场景出乎意料）
2. 设背景颜色等等
3. 设徽章数字，0以下，不显示；100以上，显示99+；两者之间，显示实际的数字

基础控件要怎么做

如果只是这个红色的徽章，那么直接用 JSBadgeView或者JSMyBadgeView就好了。要改的话，也在原来的这几个基础上面改好了，并没有基础控件的概念。感觉好像什么都不用做了。

最初的想法

• 最外面是一个View容器
• 接着是一个Button，用来做响应（响应函数用block，代理有点繁琐）
• 然后是一个ImageView，用来放图标
• 用第三方库JSBadgeView或者JSMyBadgeView，在ImageView上面加徽章

• 明天站会的时候，再提出问题，听听大家的意见，看看理解是否一致

• 第二天，站会沟通，发现大家的理解还是比较一致的

难点在加载

我在做这个控件的时候，用到了Xib。不过Xib对应的是ViewController，不过我们要的是一个View。这也是老调重弹，View是有利于复用的，但是ViewController不利于复用。

• init 和 initWithFrame 函数在xib加载的过程中不会被调用
• initWithCode 和 awakeFromNib 在xib加载过程中会调用，但是会和loadNibNamed 函数形成循环调用而导致崩溃

解决方法

问题的关键是搞清楚 File's Owner 这个概念。在XCode的默认情况下，Xib对应一个ViewController，在xib文件的File's Owner的class项目，可以看到，就是对应的ViewController。如果没有指定，class项目是NSObject，说明，并不是非要ViewController不可。Xcode这样设置是iOS界面开发方式在storyboard出来之前的过渡状态，以Xib为界面开发的阶段。

1. 将xib的File's Owner设置为自定义的View；
2. 通过loadNibNamed加载xib
3. 将目标view通过 addSubView 加入到自定义的View，这里就是self
4. 通过代码，添加加载的view和self之间的限制，这里可以用一个第三方库SnapKit/Masonry

• 根据语义，加载函数loadNibNamed还是放在awakeFromNib中比较好。不需要调用者来加载，而是在系统加载xib的时候自动加载。

• 既然用了xib，小红点就直接用图片加了，不用第三方库JSBadgeView了

实例代码

zhangxusong888/PAButtonWithBadgeViewTest

参考文章

JaviSoto/JSBadgeView
JSBadgeView的基本使用
SnapKit/Masonry
有趣的Autolayout示例-Masonry实现