提示图显示篇之MBProgressHUD（五）

版本记录

版本号	时间
V1.0	2017.05.28

前言

在我们的app项目中，为了增加和用户很好的交互能力，通常都需要加一些提示图，比如说，当我们需要网络加载数据的时候，首先要监测网络，如果网络断开的时候，我们需要提示用户；还有一个场景就是登陆的时候，需要提示用户正在登录中和登录成功；再比如清除用户的缓存数据成功的时候，也需要进行清除成功的提示的，等等。总之，用的场景很多，好的提示图可以增强和用户的交互体验，试想，如果没有网络，也不提示用户，用户还以为还在登录，过了一会还是上不去，那可能用户就疯掉了，怒删app了。最近做的几个项目中也是对这个要求的也很多，在实际应用中可以自己写，也可以使用第三方框架，比较知名的比如MBProgressHUD和SVProgressHUD，从这一篇开始我就一点一点的介绍它们以及它们的使用方法，希望对大家有所帮助，那我们就开始喽。先给出github地址：
MBProgressHUD github
感兴趣可以先看上一篇
1.提示图显示篇之MBProgressHUD（一）
2.提示图显示篇之MBProgressHUD（二）
3.提示图显示篇之MBProgressHUD（三）
4.提示图显示篇之MBProgressHUD（四）

这一篇将对MBProgreeHUD的详细使用举例进行介绍。

详情

下面从几个demo入手，说明MBProgressHUD
的用法。

一、系统自带菊花

下面这个demo，是系统自带的菊花，并设置其背景色为黑色。这里设置背景色，需要知道MBProgressHUD的一个枚举。

typedef NS_ENUM(NSInteger, MBProgressHUDBackgroundStyle) {
    /// Solid color background 其他颜色
    MBProgressHUDBackgroundStyleSolidColor,
    /// UIVisualEffectView or UIToolbar.layer background view 默认的，半透明
    MBProgressHUDBackgroundStyleBlur
};

这里系统默认的是MBProgressHUDBackgroundStyleBlur半透明的，一般这么设置背景色。

HUD.bezelView.backgroundColor = [UIColor blackColor];

下面我们再看一下bezelView

/**
 * The view containing the labels and indicator (or customView).
 */
@property (strong, nonatomic, readonly) MBBackgroundView *bezelView;

@interface MBBackgroundView : UIView

/**
 * The background style. 
 * Defaults to MBProgressHUDBackgroundStyleBlur on iOS 7 or later and MBProgressHUDBackgroundStyleSolidColor otherwise.
 * @note Due to iOS 7 not supporting UIVisualEffectView, the blur effect differs slightly between iOS 7 and later versions.
 */
@property (nonatomic) MBProgressHUDBackgroundStyle style;

/**
 * The background color or the blur tint color.
 * @note Due to iOS 7 not supporting UIVisualEffectView, the blur effect differs slightly between iOS 7 and later versions.
 */
@property (nonatomic, strong) UIColor *color;

@end

下面我们就看代码，具体实现

- (void)HUDDisplayModel1
{
    MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
    [self.view addSubview:HUD];
    //如果设置此属性则当前的view置于后台
    HUD.dimBackground = YES;
    HUD.mode = MBProgressHUDModeIndeterminate;
    // 显示隐藏时的动画模式--放大
    HUD.animationType = MBProgressHUDAnimationZoomIn;
    HUD.label.text = @"请稍等";
    //设置背景色为黑色
    HUD.bezelView.backgroundColor = [UIColor blackColor];
    HUD.label.textColor = [UIColor whiteColor];
    //显示对话框
    [HUD showAnimated:YES whileExecutingBlock:^{
        //对话框显示时需要执行的操作
        sleep(20);
    } completionBlock:^{
        //操作执行完后取消对话框
        [HUD removeFromSuperview];
    }];
}

具体效果看下边的gif图。

系统自带的菊花

---

二、环状图

下面这个是环状图，用来显示任务的进度视图。废话不多了，先看代码 。

//环状图
- (void)HUDDisplayModel2
{
    MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
    [self.view addSubview:HUD];
    self.HUD = HUD;
    HUD.delegate = self;
    //如果设置此属性则当前的view置于后台
//    HUD.dimBackground = YES;
    HUD.mode = MBProgressHUDModeAnnularDeterminate;
    // 显示隐藏时的动画模式--放大
    HUD.animationType = MBProgressHUDAnimationZoomIn;
    HUD.label.text = @"正在加载";
    //设置背景色为黑色
    HUD.bezelView.backgroundColor = [UIColor blackColor];
    HUD.label.textColor = [UIColor whiteColor];
    //设置进度条的的边线和进度的颜色
    HUD.contentColor = [UIColor whiteColor];
    [HUD showAnimated:YES whileExecutingBlock:^{
        //对话框显示时需要执行的操作
        float progress = 0.0;
        while (progress < 1.0) {
            progress += 0.01;
            NSLog(@"%lf--HUD.progress",HUD.progress);
            dispatch_async(dispatch_get_main_queue(), ^{
                HUD.progress = progress;
            });
            //将线程挂起一段时间，单位是us
            usleep(50000);
        }
    } completionBlock:^{
        //操作执行完后取消对话框
        [HUD removeFromSuperview];
    }];
}

下面看一下gif图。

环状指示图

---

三、条形图

下面这个是条形图，用来显示任务的进度视图。废话不多了，先看代码 。

//条状图
- (void)HUDDisplayModel3
{
    MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
    [self.view addSubview:HUD];
    self.HUD = HUD;
    HUD.delegate = self;
    //如果设置此属性则当前的view置于后台
    //    HUD.dimBackground = YES;
    HUD.mode = MBProgressHUDModeDeterminateHorizontalBar;
    // 显示隐藏时的动画模式--放大
    HUD.animationType = MBProgressHUDAnimationZoomIn;
    HUD.label.text = @"正在加载";
    //设置背景色为黑色
    HUD.bezelView.backgroundColor = [UIColor blackColor];
    HUD.label.textColor = [UIColor whiteColor];
    //设置进度条的的边线和进度的颜色
    HUD.contentColor = [UIColor whiteColor];
    [HUD showAnimated:YES whileExecutingBlock:^{
        //对话框显示时需要执行的操作
        float progress = 0.0;
        while (progress < 1.0) {
            progress += 0.01;
            NSLog(@"%lf--HUD.progress",HUD.progress);
            dispatch_async(dispatch_get_main_queue(), ^{
                HUD.progress = progress;
            });
            //将线程挂起一段时间，单位是us
            usleep(50000);
        }
    } completionBlock:^{
        //操作执行完后取消对话框
        [HUD removeFromSuperview];
    }];
}

下面看gif图。

条状图

---

四、自定义视图

下面这个是自定义图，用来显示任务的进度视图。废话不多了，先看代码 。

//自定义视图
- (void)customDisplayModel4
{
    MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
    [self.view addSubview:HUD];
    self.HUD = HUD;
    HUD.delegate = self;
    //如果设置此属性则当前的view置于后台
    //    HUD.dimBackground = YES;
    HUD.mode = MBProgressHUDModeCustomView;
    // 显示隐藏时的动画模式--放大
    HUD.animationType = MBProgressHUDAnimationZoomIn;
    HUD.label.text = @"加载成功";
    //设置背景色为黑色
    HUD.bezelView.backgroundColor = [UIColor blackColor];
    HUD.label.textColor = [UIColor whiteColor];
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:@"success"];
    HUD.customView = imageView;
    //设置进度条的的边线和进度的颜色
    HUD.contentColor = [UIColor whiteColor];
    [HUD showAnimated:YES whileExecutingBlock:^{
        //对话框显示时需要执行的操作
        sleep(20);
    } completionBlock:^{
        //操作执行完后取消对话框
        [HUD removeFromSuperview];
    }];
}

下面看自定义视图。

自定义视图

---

五、只显示文本视图

下面这个是只显示文本视图，用来显示任务的进度视图。废话不多了，先看代码 。

//只显示文本
- (void)HUDDisplayModel6
{
    MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
    [self.view addSubview:HUD];
    self.HUD = HUD;
    HUD.delegate = self;
    //如果设置此属性则当前的view置于后台
    //    HUD.dimBackground = YES;
    HUD.mode = MBProgressHUDModeText;
    // 显示隐藏时的动画模式--放大
    HUD.animationType = MBProgressHUDAnimationZoomIn;
    HUD.label.text = @"加载成功";
    //设置背景色为黑色
    HUD.bezelView.backgroundColor = [UIColor blackColor];
    HUD.label.textColor = [UIColor whiteColor];
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:@"success"];
    HUD.customView = imageView;
    //设置进度条的的边线和进度的颜色
    HUD.contentColor = [UIColor whiteColor];
    [HUD showAnimated:YES whileExecutingBlock:^{
        //对话框显示时需要执行的操作
        sleep(20);
    } completionBlock:^{
        //操作执行完后取消对话框
        [HUD removeFromSuperview];
    }];
}

看下图。

只显示文本

---

六、饼状视图

下面这个是只显示饼状视图，用来显示任务的进度视图。废话不多了，先看代码 。

//饼状图
- (void)HUDDisplayModel5
{
    MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
    [self.view addSubview:HUD];
    self.HUD = HUD;
    HUD.delegate = self;
    //如果设置此属性则当前的view置于后台
    //    HUD.dimBackground = YES;
    HUD.mode = MBProgressHUDModeDeterminate;
    // 显示隐藏时的动画模式--放大
    HUD.animationType = MBProgressHUDAnimationZoomIn;
    HUD.label.text = @"正在加载";
    //设置背景色为黑色
    HUD.bezelView.backgroundColor = [UIColor blackColor];
    HUD.label.textColor = [UIColor whiteColor];
    //设置进度条的的边线和进度的颜色
    HUD.contentColor = [UIColor whiteColor];
    [HUD showAnimated:YES whileExecutingBlock:^{
        //对话框显示时需要执行的操作
        float progress = 0.0;
        while (progress < 1.0) {
            progress += 0.01;
            NSLog(@"%lf--HUD.progress",HUD.progress);
            dispatch_async(dispatch_get_main_queue(), ^{
                HUD.progress = progress;
            });
            //将线程挂起一段时间，单位是us
            usleep(50000);
        }
    } completionBlock:^{
        //操作执行完后取消对话框
        [HUD removeFromSuperview];
    }];
}

看下面的gif图

饼状图

  这里我有个疑问，不知道为什么我这里一直是个环形，不是个扇形填充，只是描边不填充，有知道的希望可以和我说一下，谢谢。

后记

  端午节就这么过去了，这个提示图我也写的差不多了，希望大家能指出其中的错误和不足，谢谢大家。

端午安康