iOS开发-应用内角标

导语

iOS App的开发中,尤其是在企业级的应用研发中,我们总是把精力放在界面的搭建、网络数据的请求,或者缓存数据的处理,心思就是放在这些核心的业务处理模块,但是,我们往往最容易忽略的就是细节的处理或者说是难度不那么大的地方。那么,如此一来的话,当项目接近尾期的时候才会意识问题所在,其实细节方面的处理也是同等重要的。我以前做的一款App酱游-走出去,与世界为伍的时候,就是在最后的项目接近尾期的时候才反应过来,细节的地方没有处理,最后就拖延了整个项目的上线时间,甚至在上线之后这个地方的处理都还是存在一系列问题的。所以,当我们在做企业级(也可以是其他)应用的时候,往往最不能忽略的地方就是我们所认为的比较简单的地方,一旦有了这样的想法,也不要急,待我慢慢道来:

今天要说的是badge角标管理。badge角标是显示在某个视图右上角(或者左上角)的用于提示用户消息的一个view,那么这个view有哪些作用呢?其实这个作用非常大,一个友好的badge view可以起到提示用户例如:

  • 提示未读消息数量.
  • 提示新功能新特性的更新.
  • 起到一个极大的引导用户操作的作用.

当然,有强迫症的小伙伴们可能受不了了,但是毕竟是少数(这也不能怪我啊)。

那么,怎样的一个badge view才算是一个友好的badge view呢?我们在开发App的时候,其实在GitHub上用到的开源第三方库斯很多的,我们在评判一个开源库是否友好,无非就是从:

  • 这个库解决了怎样的问题?
  • 是怎样解决的?
  • 能否达到我们预期的效果?
  • 性能的优化如何,在使用的过程中会不会影响APP的最终性能?
  • API的友好度,是否能够友好的使用接口?

这样几个方面来评判(本人观点)。上面提到的几点,其实我个人认为比较重要的是能否达到我们预期的效果?,因为我们使用第三方库的目的就只有一个:节省时间、提升效率,如果一个开源库不能达到这点要求的话,其实我觉得就算这个开源库很牛X,也不是最适合我们的。选择一个适合我们的友好的开源库才是最重要的

介绍

Build StatusVersionLicensePlatform

AXBadgeView-Swift是一个badge view管理类,是之前我写的AXBadgeView的Swift版本(以下的介绍中统一使用AXBadgeView),在新版本中没有太大的改动,主要的是把原有的功能实用swift实现了,使用方法是一样的。

image

AXBadgeView是一个badge view视图,继承于UILabel,子类的实现完成了UI的自动布局,自动计算content的bounds大小并可以通过指定minSize实现badge view最终的bounds大小。

AXBadgeView使用的是自动布局来控制显示的位置的,为什么要用自动布局呢?在我之前做的一个项目中,我使用的是第三方的badge view管理类,在GitHub上的星星还是很多的,但是我使用了之后发现,布局是有问题的,在发现问题之后我就去看了看源码,结果问题显而易见,那个类使用的不是自动布局。那么在这样一个对布局精准度要求较高的地方的话,使用自动布局可以减少很多布局上面的隐患,其实这点来说,我也推荐是用自动布局,因为自动布局的强大之处已经不用我来多说了。

AXBadgeView中怎样控制badge view显示的偏移量呢?通过设置badge instance的offSets属性来控制,offSets的默认值采用了CGFloat.maxCGFloat.min两个值,max表示就是x的最大值或者y的最小值,min就用来表示x的最小值和y的最小值。offSets的默认值是(CGFloat.max, CGFloat.min),表示x的最右边和y的最上边,也就是superView的右上角。那么,在使用的过程中,如果想表示边界值的话就通过以上两个值来表示,就不用手动去计算superView的高宽了。同样的,如果想给定指定的offSets值的话,就可以设置这个属性,坐标系就是iOS的默认坐标系。

特性

以上已经对AXBadgeView做了一定的介绍了,那么这里将做一些总结性的东西,出了以上介绍的几点之外,AXBadgeView还具有以下特性:

  • 设置数字显示99+的样式,可以自定义显示的数字.
  • 自定义显示的样式.
  • 自定义动画效果.
  • 当内容为0的时候可以设置隐藏.
  • 当内容更新的时候,是否动画更新内容.

样式

AXBadgeView默认提供了4样式,每一种样式显示的内容都有所区别,在使用的过程中可以根据需求设置不同的样式以达到不痛的效果。样式默认为:.Normal。使用的过程中可以指定style来确定显示的样式和内容:

enum AXBadgeViewStyle: Int {
    /// Normal shows a red dot.
    case Normal
    /// Number shows a number form text.
    case Number
    /// Text shows a custom text.
    case Text
    /// New shows a new text.
    case New
}
  • .Normal:显示小红点.
  • .Number:显示数字.
  • .Text:显示普通文本.
  • .New:显示new文本.

通过代码实现更改样式:

objective-c:

_showsView.badgeView.style = AXBadgeViewNew;

swift:

showsView.badgeView.style = AXBadgeViewStyle.New

动画

AXBadgeView提供了4种动画,每一种动画都有不同的显示效果。在使用的过程中可以设置不同的动画类型来实现不同的显示效果。动画默认为.None即无动画,那么在设置相应的动画类型的话可以通过设置animation来指定响应的动画类型:

enum AXBadgeViewAnimation: Int {
    /// Animation none, badge view stay still.
    case None
    /// Animation scale.
    case Scale
    /// Animation shake.
    case Shake
    /// Animation bounce.
    case Bounce
    /// Animation breathe.
    case Breathe
}
  • .None:默认,不显示任何动画.
  • .Scale:缩放动画.
  • .Shake:震动动画.
  • .Bounce:反弹动画.
  • .Breathe:渐变动画.

代码示例:

objective-c:

_showsView.badgeView.animation = AXBadgeViewAnimationScale

swift:

showsView.badgeView.animation = AXBadgeViewAnimation.Scale

API

我在写这个工具类的时候就考虑到API友好的这个实际问题了,那么这样的一个工具应该怎样去设计它的API接口呢?在软件开发中,耦合度越低对我们整个项目的研发和维护是有很大帮助的,所以我们在设计一个API的时候,就要尽量去考虑到耦合度的因素。

AXBadgeView接口很简单,在使用的过程中过我们只需要关心显示隐藏的接口就行了,其他的细节已经处理好了:

show(animated:inView:)

hide(animated:completion:)

AXBadgeView采用了协议和类扩展的形式,直接在UIViewUIBarButtonItemUITabBarItem中直接添加并实现了相应的接口,使用起来很方便。在OC中使用了运行时添加Associated Objects的方式添加了badgeView属性和相关的饿方法。那么在Swift中的话就有点差别,Swift中在添加了以上三个类的扩展以外,还实现了对应的协议:

protocol AXBadgeViewDelegate {
    /// Badge view property.
    var badgeView: AXBadgeView {get set}
    /// Animated to show the badge view.
    func showBadge(animated animated: Bool) -> Void
    /// Animated to hide the badge view.
    func clearBadge(animated animated: Bool) -> Void
}

怎样接入我的项目?

源文件

直接引用就是直接在GitHub下载代码源文件AXBadgeView-Swift—–>Objective-C版,并将下载的源文件导入工程:

  1. swift直接使用.

  2. oc在需要使用的地方#import "AXBadgeView.h".

CocoaPods

CocoaPods 依赖管理是比较使用起来比较方便的一种方式,只需要添加相应的依赖描述,便可直接接入现有项目:

  1. 添加pod描述到你的Podfile问家里边: pod 'AXPopoverView', '~> 0.1.0'
  2. 运行安装命令: pod install.
    • swift直接使用.
    • oc在需要使用的地方#import "AXBadgeView.h".

License

This code is distributed under the terms and conditions of the MIT license.