抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

简单易用,完全可定制化的 HUD
ProHUD = Toast(通知横幅) + Alert(ProgressHUD、弹窗) + ActionSheet(操作表)

在写「ProHUD」之前我已经在「AXKit」中实现了原生控件快速构造方法、为公司写了 ObjC 版的可定制化 HUD、Swift 版的开源的 NoticeBoard(通知横幅)。ProHUD 诞生的意义就在于取代这些不那么完善的 HUD。

大量截图预览

特性

  1. 用相似的接口调用 ToastAlertGuard 组件。
  2. 程序初始化时配置自定义 UI 样式,快速调用。
  3. 用简便的方法拿到已发布的实例,避免重复发布实例。
  4. 可对已发布的实例进行数据更新。
  5. 横竖屏和 iPad 布局优化。
  6. 易于扩展,可以很方便的添加任意控件,并处理好布局。
  7. 可对所有实例监听消失事件。

顶部浮动通知条

  1. 多个 Toast 并存策略(平铺)。
  2. 只接收一个点击事件。
  3. 可以预先对不同的场景配置不同的默认值(图标、持续时间)。

页面中心弹窗

  1. 多个 Alert 并存策略(具有景深效果的堆叠)。
  2. 可以预先对不同的场景配置不同的默认值(图标、持续时间)。
  3. 可快速创建具有预先配置的默认样式(Default、Destructive、Cancel)的按钮。
  4. 对已发布的实例进行文本和按钮的更新,包括新增、修改、删除文本和按钮。
  5. 强制退出按钮(防止超时导致页面卡死)。

页面底部操作表

  1. 快速创建具有预先配置的默认样式的文本元素(标题、副标题、正文)。
  2. 可快速创建具有预先配置的默认样式(Default、Destructive、Cancel)的按钮。

设计思路

UI与逻辑分离

这个库采用配置 UI 和调用接口分离的设计,这种思路借鉴了和而泰公共库,我认为这是一种调用比传统 UI 库方便的同时可定制化能力也比传统 UI 库强大的设计思路。

简单来说,就是你在 AppDelegate 中告诉 ProHUD,你要的横幅、弹窗、操作表分别是什么样的,如果参数是什么什么,就怎么展示 UI。然后调用的地方就不需要设置 UI 了,只需要专注于数据。

例如弹出一个正在加载的提示框:
Alert.push(scene: .loading, title: "正在加载", message: "请稍等片刻")

这样就发出了一个弹窗,而弹窗的样式,则在 AppDelegate 中以及预先配置好了。我使用了 scene 这个灵活的参数,你可以自己扩展场景。

为程序的弹窗场景设置模板,实现快速调用:
extension ProHUD.Scene {
static var confirm: ProHUD.Scene {
var scene = ProHUD.Scene(identifier: "confirm")
scene.image = UIImage(named: "ProHUDMessage")
return scene
}
static var delete: ProHUD.Scene {
var scene = ProHUD.Scene(identifier: "delete")
scene.image = UIImage(named: "ProHUDTrash")
scene.title = "确认删除"
scene.message = "此操作不可撤销"
return scene
}
static var buy: ProHUD.Scene {
var scene = ProHUD.Scene(identifier: "buy")
scene.image = UIImage(named: "ProHUDBuy")
scene.title = "确认付款"
scene.message = "一旦购买拒不退款"
return scene
}
}

一个 scene 就可以理解成一套模板。

动态更新

ProHUD 另一个优势就是动态更新,对于已经发布的实例,你可以方便的去更新内容。

示例1:获取刚才弹出的Loading,把它更新为加载成功。
Alert.find("loading", last: { (a) in
a.update { (vm) in
vm.scene = .success
vm.title = "同步成功"
vm.message = nil
}
})
示例2:获取刚才弹出的Loading,把它更新为加载失败,并增加重试按钮。
Alert.find("loading", last: { (a) in
a.update { (vm) in
vm.scene = .error
vm.title = "同步失败"
vm.message = "请检查网络是否连接"
vm.add(action: .default, title: "重试") {
// do something
}
vm.add(action: .cancel, title: "取消", handler: nil)
}
})

极端场景

很多库没有多实例管理,很容易出现简单粗暴的视图重叠现象,ProHUD 针对不同场景做了不同的优化,对于横幅来说,可以平铺显示,像系统的通知中心一样,你可以拖拽向上移除。对于弹窗来说,我给底层的弹窗做了景深效果处理,使得看起来不像是 BUG。

评论