Swift 3.0 版本HUD — CJSProgressHUD

本文主要向大家介绍一下我自己写的 Swift 3.0 版本的HUD的使用方法。

MBProgressHUD 是大家都是非常熟悉的常用第三方库,前一阵做 Swift 开发时需要用到 HUD ,所以去找了下 Swift版本的 HUD,但是没有找到,好吧,只能用 OC 和 Swift 混编的方式暂时解决下问题。
最近一段时间稍微有点空闲时间,所以自己写了一套 Swift 3.0 版本的。

  • CJSProgressHUD 暴露出来的属性较多,可以方便的自定义符合自己项目需求的 HUD 样式(这也是我写这个 HUD 的初衷之一)
  • CJSProgressHUD 注释都是中文的(较low ),方便使用者有空的时候看看源码

先贴下 GitHub 地址 CJSProgressHUD

1.基本使用

先上效果图


基本使用

CJSProgressHUD 的使用方法和 MBProgressHUD 的相似,都是先创建 HUD, 代码如下

//显示 HUD  到 view 上
let hud = CJSProgressHUD.showMessageHUD(AddTo: view)

然后设置 HUD 需要设置的属性

hud.titleText = "我是 title"
hud.detailText = "我是 detail,我和 tilte 不一样,title 只能显示一行,而我没有行数限制,大家想显示大段文字可以用我"
hud.indicatorContainerVisible = true

这样写的好处是,不用在创建 HUD 的时候传一大堆参数进去(这是模仿 MBProgressHUD 的写法写的),且不想自定义的参数,无需再设置,减少代码量。

关于上面 gif 中几个示例的说明:

  • CJSProgressHUD 提供了两个属性来展示文字,分别是hud.titleTexthud.detailText,需要哪个则设置哪个,如果不设置则不会显示
  • 菊花圈indicator 可以用 hud.indicatorContainerVisible 这个 Bool 的属性来控制显示,不想显示则设置为 false
  • hud.titleText 只能显示一行文字,如果想显示大段文字的话,请使用 hud.detailText

2.CJSProgressHUD 的 layout 属性

国际惯例,先上图


layout

CJSProgressHUD 中有如下5个属性可以简单的设置下 layout

hud.outsideRightAndLeftMargin = 10
hud.insideRightAndLefMargin = 30
hud.insideTopMargin = 50
hud.insideBottomMargin = 50
hud.mainViewOffSet = -200
  • outsideRightAndLeftMargin 这个属性是 mainView 距离 superView 的边距 ,但是只有在 label 显示的文字长度大于等于一行时才会起作用。
  • insideRightAndLeftMarginmainViewsubViewmainView 的左右边距
  • insideTopMarginmainViewsubViewmainView顶部的距离
  • insideBottomMarginmainViewsubViewmainView底部的距离
  • mainViewOffSetmianView 距离 superView 中心的偏移量

insideTopMargininsideBottomMargin感觉用处不大,但是既然设置了,就暴露出来,万一那天用上了呢。

layout 的这几个属性比较抽象,建议大家还是下载个 demo 自己试试

3.customIndicatorView 属性

上效果图先

customIndicatorView

CJSProgressHUD 最上方的指示器控件,可以通过 hud.customIndicatorView 这个属性设置,示例代码如下

// 创建 HUD
let hud = CJSProgressHUD.showMessageHUD(AddTo: view)
// 创建 customView
var img = UIImage(named: "Warning")
img = img?.withRenderingMode(.alwaysTemplate)
let imageView = UIImageView(image: img) 
// 添加 customView           
hud.customIndicatorView = imageView            
hud.titleText = "Warning"            

通过 customIndicatorView 属性,可以为HUD添加自定义的 indicator,有意思的,效果炫的 indicator 都可以利用这个属性添加到 hud 上

4.自定义的 CJSCustomIndicator 和 CJSTriangleIndicator

效果图


CJSCustomIndicator
CJSTriangleIndicator

上面两个效果图分别是 CJSCustomIndicatorCJSTriangleIndicator 都是通过 hud.customIndicatorView 这个属性添加到 HUD 上的

CJSAnnularIndicator CJSTriangleIndicator 是两个自定义的 indicator 考虑到 CJSAnnularIndicator 和 CJSTriangleIndicator 有部分属性是可以自定义的,故没有把这两个个类写到CJSProgressHUD.swift 里,而是拆了出来,这样者两个自定义控件也可以使用在 CJSProgressHUD上,也可以在其它的类里面调用

CJSCustomIndicator 可以设置的属性有

// 控件颜色
annularIndicator.annularColor = UIColor.yellow 
// label 字体大小           
annularIndicator.textSize = 13            
// 是否显示控件中间的文字
annularIndicator.labelVisible = false

CJSTriangleIndicator 中三个小三角的颜色需在初始化时设置

let triangle = CJSTriangleIndicator(frame: CGRect(x: 100, y: 100, width: 35, height: 35),  colorArray: [UIColor.red, UIColor.yellow, UIColor.green])

5.其它可设置的属性

//是否圆角
hud.cornerRadius = 0
// 控件字体大小
hud.textFont = UIFont.systemFont(ofSize: 26)
// mainView 颜色
hud.mainViewColor = UIColor.purple
// hud.backgroundColor 颜色 通过这个属性可以设置全屏展示 HUD 
hud.backgroundColor = UIColor.purple
// hud 的 superView 是否可以响应手势
hud.superViewClickable = true

上面几个属性可说的不多,说说最后一个吧,superViewClickable
这个属性如果设置为 true(默认是 false),则不影响 hud 后面控件的使用,这个效果是在京东的 App 上看到的,但是使用这样的 HUD 效果,是在 APP 网络请求、逻辑等优化的较好前提下,大家谨慎使用
最后一个属性的效果图如下

superViewClickable

6.CJSHUDHelper

最后一节介绍下这个类吧


Swift 3.0 版本HUD — CJSProgressHUD_第1张图片
CJSHUDHelper

笔者将一些常用的 HUD 的样式进行了二次封装写在了CJSHUDHelper.swift 里,这样可以用方便调用,调用代码如下所示

CJSHUDHelper.showSucceedHUD(message: "succeed")

比起上面的调用代码简洁不少,笔者强烈建议使用者将项目中常用样式的 HUD 进行二次封装。
CJSHUDHelper.swift 这个类里已经封装了不少了, Demo里有详细展示。

PS

笔者也是刚接触 Swift ,写这个 HUD 的时候肯定有许多地方写的不够完善,或者用了错误的方法,希望有兴趣读这个 HUD 的源码的同学发现错误能够指出来,一起进步

行笔简陋,如有问题,敬请指正##

你可能感兴趣的:(Swift 3.0 版本HUD — CJSProgressHUD)