发布于 

设计一个样式和逻辑分离的 HUD 库

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

这是一个简单易用且完全可定制化的 HUD

ProHUD = Toast(通知横幅) + Alert(ProgressHUD、弹窗) + ActionSheet(操作表)

特性

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

Toast - 顶部浮动通知条

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

Alert - 页面中心弹窗

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

Guard - 页面底部操作表

  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。


本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

本站由 @xaoxuu 创建,使用 Stellar 作为主题,您可以在 GitHub 找到本站源码。