本文主要向大家介绍一下我自己写的 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.titleText
和hud.detailText
,需要哪个则设置哪个,如果不设置则不会显示 - 菊花圈
indicator
可以用hud.indicatorContainerVisible
这个 Bool 的属性来控制显示,不想显示则设置为 false -
hud.titleText
只能显示一行文字,如果想显示大段文字的话,请使用 hud.detailText
2.CJSProgressHUD 的 layout 属性
国际惯例,先上图
CJSProgressHUD 中有如下5个属性可以简单的设置下 layout
hud.outsideRightAndLeftMargin = 10
hud.insideRightAndLefMargin = 30
hud.insideTopMargin = 50
hud.insideBottomMargin = 50
hud.mainViewOffSet = -200
-
outsideRightAndLeftMargin
这个属性是mainView
距离superView
的边距 ,但是只有在 label 显示的文字长度大于等于一行时才会起作用。 -
insideRightAndLeftMargin
是mainView
的subView
到mainView
的左右边距 -
insideTopMargin
是mainView
的subView
到mainView
顶部的距离 -
insideBottomMargin
是mainView
的subView
到mainView
底部的距离 -
mainViewOffSet
是mianView
距离superView
中心的偏移量
insideTopMargin
和 insideBottomMargin
感觉用处不大,但是既然设置了,就暴露出来,万一那天用上了呢。
layout
的这几个属性比较抽象,建议大家还是下载个 demo 自己试试
3.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
都是通过 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 网络请求、逻辑等优化的较好前提下,大家谨慎使用
最后一个属性的效果图如下
6.CJSHUDHelper
最后一节介绍下这个类吧
笔者将一些常用的 HUD 的样式进行了二次封装写在了CJSHUDHelper.swift 里,这样可以用方便调用,调用代码如下所示
CJSHUDHelper.showSucceedHUD(message: "succeed")
比起上面的调用代码简洁不少,笔者强烈建议使用者将项目中常用样式的 HUD 进行二次封装。
CJSHUDHelper.swift 这个类里已经封装了不少了, Demo里有详细展示。
PS
笔者也是刚接触 Swift ,写这个 HUD 的时候肯定有许多地方写的不够完善,或者用了错误的方法,希望有兴趣读这个 HUD 的源码的同学发现错误能够指出来,一起进步