版本记录
| 版本号 | 时间 |
|---|---|
| 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图
饼状图
这里我有个疑问，不知道为什么我这里一直是个环形，不是个扇形填充，只是描边不填充，有知道的希望可以和我说一下，谢谢。
后记
端午节就这么过去了，这个提示图我也写的差不多了，希望大家能指出其中的错误和不足，谢谢大家。
端午安康
