Swift 造轮子之自制 HUD

所有文章已搬迁到个人站点:me.harley-xk.studio,欢迎访问留言

HUD 是每个 iOS App 的必备组件之一,市面上 Objective-C 的版本也是五花八门。然而转入 Swift 之后并没有一个明星组件出现,仅有的那几个也不能完全满足需求,无奈只能自己造轮子了。

自造轮子之 Chrysan

Chrysan 取自单词 chrysanthemum 的前半部分,意为菊花,也是 HUD 的通俗称呼。所以就这么叫着吧~

其实 Chrysan 这个库写完已经有一段时间了,经过了好几个线上项目的考验,暂时没有发现什么重大问题,所以最近把它推送到了 CocoaPods,打算分享出来造福大众,顺便骗一波 star 😂

安装

Chrysan 已经推送到 pod repo,所以集成非常简单:

pod 'Chrysan'

当然,也可以在我的 Github 上直接下载源代码:https://github.com/Harley-xk/Chrysan

使用

Chrysan 设计为每个 View 都可以创建出 HUD,实践证明这个特性在某些特殊情况下非常有用。每个 View 都有一个 chrysan 属性,通过它可以创建当前 View 的独立的菊花。只有当第一次访问 chrysan 属性时才会真实地创建 ChrysanView 实例,避免不必要的开销和内存占用。

通过访问 ViewController 的 chrysan 属性,可以访问 ViewController 的根 View 的菊花并自动创建。

显示

public func show(_ status: Status = .running, message: String? = nil, hideDelay delay: Double = 0)

这个方法用来显示一个菊花,各参数说明如下:

message - 显示在图标下方的说明文字,说明文字支持多行文本

hideDelay - 自动隐藏的时间,传入0则表示不自动隐藏

status - 显示菊花的状态,属于 Status 枚举类型,可以控制显示不同的状态

/// 菊花的状态,不同的状态显示不同的icon
    public enum Status {
        /// 无状态,显示纯文字
        case plain
        /// 执行中,显示菊花
        case running
        /// 进度,环形进度条
        case progress
        /// 成功,显示勾
        case succeed
        /// 错误,显示叉
        case error
        /// 自定义,显示自定义的 icon
        case custom
    }

显示菊花

由于 show 方法的各个参数都支持默认值,因此可以调用所有参数都是默认值的最简形式,此时显示一个单纯的不会隐藏的菊花。

chrysan.show()

如果需要显示带文字的菊花,只需要简单加上一个 message 参数就可以了:

chrysan.show(message: "正在处理")

显示纯文本

// 显示纯文字
chrysan.show(.plain, message:"这是一段纯文字")
// 显示纯文字,1 秒后隐藏
chrysan.show(.plain, message:"这是一段纯文字", hideDelay: 1)

显示图案

// 任务完成后给予用户反馈
chrysan.show(.succeed, message: "处理完毕", hideDelay: 1)
// 显示自定义图案
let image = UIImage(named: "myImage")
chrysan.show(customIcon: image, message: "自定义图案", hideDelay: 1)

显示任务进度

// 显示环形的任务进度,会在中心显示进度百分比,progress 取值 0-1
chrysan.show(progress: progress, message: "下载中...")

自定义样式

Chrysan 支持有限的自定义样式

菊花背景支持 UIBlurEffect 的所有样式

/// 菊花背景样式,使用系统自带的毛玻璃特效,默认为黑色样式
public var hudStyle = UIBlurEffectStyle.dark

菊花使用系统的 UIActivityIndicatorView,支持 UIActivityIndicatorViewStyle 的所有类型,默认为 large white

public var chrysanStyle = UIActivityIndicatorViewStyle.whiteLarge

颜色,影响 icon(不包含菊花)、说明文字、进度条和进度数值的颜色

/// icon 及文字颜色,默认为白色
public var color = UIColor.white

支持自定义图片,图片会被强制转换成 Template 渲染模式,因此必须使用包含 alpha 通道的图片

/// 自定义的 icon 图片 
public var customIcon: UIImage? = nil

弹出 HUD 时,可以设置遮罩以遮住背景的内容,遮罩的颜色可以自定义,默认为全透明

/// 遮罩颜色,遮挡 UI 的视图层的颜色,默认透明
public var maskColor = UIColor.clear

可以自定义 HUD 在视图中央的偏移,可以在某些特殊情况下调整 HUD 的位置

/// 菊花在视图中水平方向上的偏移,默认为正中
public var offsetX: CGFloat = 0
/// 菊花在视图中竖直方向上的偏移,默认为正中
public var offsetY: CGFloat = 0

更多内容请查看示例以及代码注释。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,262评论 7 249
  • 传说上帝对你关上了一扇门就会为你打开一扇窗。 年幼的我曾经固执的相信世界是公平的。然而第一次听到这句话...
    长歌7788阅读 261评论 3 7
  • 有一种鸟叫做清晨鸟,它们只在清晨太阳刚刚升起的时候飞出鸟巢,在天空中飞一会儿,等太阳升到高处时,它们就返回鸟巢。之...
    王文武阅读 883评论 0 2