返回 导航

Swift

hangge.com

Swift - 第三方透明指示器MBProgressHUD使用详解1（安装配置、基本用法）

作者：hangge | 2018-04-20 08:10
    在程序开发中，我们常常会根据不同情况显示一些透明指示层（HUD 窗口），比如：操作执行完毕后的提示框，请求数据时的 loading 视图等等。我们当然可以自己实现这些 HUD 窗口，但最方便的还是直接使用一些比较成熟的第三方库。在接下来的几篇文章中，我会详细地介绍几款目前比较好用的第三方 HUD 库给大家。

一、MBProgressHUD

1，基本介绍

（1）MBProgressHUD 是一个使用 Objective-C 写的 HUD 库，它可以在后台线程中显示一个带有指示器或标签的半透明的 HUD 窗口。
（2）其实苹果官方自己就有一个带有此功能的类：UIProgressHUD，只不过它是私有的，不让用。而 MBProgressHUD 可以代替私有的 UIProgressHUD，并提供一些额外的特性。

2，安装配置

（1）从 GitHub 上下载最新的代码：https://github.com/jdg/MBProgressHUD
（2）将下载下来的源码包中 MBProgressHUD.h 和 MBProgressHUD.m 拖拽至我们的工程中。这时 XCode 会提示是否创建桥接文件，选择是，便会自动创建一个 Bridging-Header.h 桥接头文件。

（3）最后在这个新建的桥接文件中，引入 MBProgressHUD 库即可。
#import "MBProgressHUD.h"

二、基本用法

1，普通提示框

（1）显示最简单的“菊花”的提示
//初始化HUD窗口，并置于当前的View当中显示
_ = MBProgressHUD.showAdded(to: self.view, animated: true)

（2）显示“纯文字”的提示
//初始化HUD窗口，并置于当前的View当中显示
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
//纯文本模式
hud.mode = .text
//设置提示文字
hud.label.text = "请稍等"

（3）显示“纯文字标题 + 详情”的提示 
//初始化HUD窗口，并置于当前的View当中显示
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
//纯文本模式
hud.mode = .text
//设置提示标题
hud.label.text = "请稍等"
//设置提示详情
hud.detailsLabel.text = "具体要等多久我也不知道"

（4）显示“菊花 + 文字”的提示
//初始化HUD窗口，并置于当前的View当中显示
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
//设置提示文字
hud.label.text = "请稍等"

（5）显示“菊花 + 文字标题 + 详情”的提示
//初始化HUD窗口，并置于当前的View当中显示
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
//设置提示标题
hud.label.text = "请稍等"
//设置提示详情
hud.detailsLabel.text = "具体要等多久我也不知道"

2，带进度的提示框

（1）使用水平进度条
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
hud.mode = .determinateHorizontalBar //显示水平进度条
hud.progress = 0.3 //当前进度
hud.label.text = "当前进度：30%"

（2）使用环形进度条
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
hud.mode = .annularDeterminate //显示环形进度条
hud.progress = 0.3 //当前进度
hud.label.text = "当前进度：30%"

（3）使用饼状进度条
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
hud.mode = .determinate //显示饼状进度条
hud.progress = 0.3 //当前进度
hud.label.text = "当前进度：30%"

三、对提示框进行操作

1，隐藏提示框

（1）立刻隐藏
//初始化HUD窗口，并置于当前的View当中显示
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)

//立刻隐藏HUD窗口
hud.hide(animated: true)

（2）延迟隐藏 
//初始化HUD窗口，并置于当前的View当中显示
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)

//HUD窗口显示2秒后自动隐藏
hud.hide(animated: true, afterDelay: 2)

（3）通过 minShowTime 属性可以设置最短显示时间（默认为 0）。使用这个设置可以避免提示框显示后立即被隐藏。 
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
hud.label.text = "请稍等"
hud.minShowTime = 3  //至少要等3秒钟才隐藏
hud.hide(animated: true) //由于设置了minShowTime，所以还需等3秒钟才隐藏

（4）通过 animationType 属性可以设置提示框消失动画，有如下三种可选值：
  • .fade：逐渐透明消失（默认值）
  • .zoomOut：逐渐缩小并透明消失
  • .zoomIn：逐渐放大并透明消失

（5）通过 removeFromSuperViewOnHide 属性，可以设置提示框隐藏的时候是否从父视图中移除（默认为 false）
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
hud.label.text = "请稍等"
hud.removeFromSuperViewOnHide = true //隐藏时从父视图中移除
hud.hide(animated: true, afterDelay: 2)  //2秒钟后自动隐藏

2，添加点击手势

下面样例给提示框添加个点击手势。当点击提示框后，提示框自动消失。当然在实际应用中，我们还可以在点击响应中进行一些其它操作，比如取消当前的网络请求等等。
        
import UIKit

class ViewController: UIViewController {

    //提示框
    var hud:MBProgressHUD?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //初始化HUD窗口，并置于当前的View当中显示
        self.hud = MBProgressHUD.showAdded(to: self.view, animated: true)
        self.hud?.label.text = "请稍等"
        
        //添加单击手势
        let tapSingle = UITapGestureRecognizer(target:self,
                                               action:#selector(hudTapped))
        self.hud?.addGestureRecognizer(tapSingle)
    }
    
    //提示框点击响应
    @objc func hudTapped(){
        self.hud?.hide(animated: true)
    }
}
评论

全部评论（0）

回到顶部