版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2017.05.28 |
前言
在我们的app项目中，为了增加和用户很好的交互能力，通常都需要加一些提示图，比如说，当我们需要网络加载数据的时候，首先要监测网络，如果网络断开的时候，我们需要提示用户；还有一个场景就是登陆的时候，需要提示用户正在登录中和登录成功；再比如清除用户的缓存数据成功的时候，也需要进行清除成功的提示的，等等。总之，用的场景很多，好的提示图可以增强和用户的交互体验，试想，如果没有网络，也不提示用户，用户还以为还在登录，过了一会还是上不去，那可能用户就疯掉了，怒删app了。最近做的几个项目中也是对这个要求的也很多，在实际应用中可以自己写，也可以使用第三方框架，比较知名的比如MBProgressHUD和SVProgressHUD，从这一篇开始我就一点一点的介绍它们以及它们的使用方法，希望对大家有所帮助，那我们就开始喽。先给出github地址：
MBProgressHUD github
感兴趣可以先看上一篇
1.提示图显示篇之MBProgressHUD（一）
这一篇将对MBProgreeHUD的结构和模式等基本概念进行介绍。
详情
在我们使用MBProgreeHUD之前我们需要先了解一下它的几个概念。我们首先要记住的是它是UIView的子类，也就是说它就是一个特殊的自定义View。
一、模式
MBProgreeHUD有很多不同的指示模式，有饼状的，条状的，还有系统默认的菊花状的等等，在代码里面是以枚举的方式体现的，如下所示：
typedef enum {
//1. 默认模式,使用系统自带的指示器 ,不能显示进度,只能不停地转呀转
MBProgressHUDModeIndeterminate,
// 2. 用饼状图显示进度
MBProgressHUDModeDeterminate,
//3. 进度条
MBProgressHUDModeDeterminateHorizontalBar,
//4. 圆环
MBProgressHUDModeAnnularDeterminate,
//5. 自定义视图
MBProgressHUDModeCustomView,
//6. 只显示文字
MBProgressHUDModeText
} MBProgressHUDMode;
可见这里的模式是可以自定义的，还可以是使用系统的，下面就分别介绍这几种模式。
- 1.MBProgressHUDModeIndeterminate
//系统自带模式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeIndeterminate;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
图案是下边这样的
系统自带样式
- 2.MBProgressHUDModeDeterminate
//饼状图的样式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeDeterminate;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
图案是下边这样的
环状图样式
这里没有给进度，所以看起来像是环状，但是确实是饼状的以后会给大家演示。
- 3.MBProgressHUDModeDeterminateHorizontalBar
//条状图的样式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeDeterminateHorizontalBar;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
图案是下边这样的
条状图
这里我没有给进度参数progress所以是中空的。
- 4.MBProgressHUDModeAnnularDeterminate
//环状图的样式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeAnnularDeterminate;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
图案是下边这样的
环状图
- 5.MBProgressHUDModeCustomView
//自定义视图的样式
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@"global"];
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeCustomView;
HUD.customView = imageView;
HUD.label.text = @"全球化";
HUD.detailsLabel.text = @"我们一起参与";
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
图案是下边这样的
自定义图案
- 6.MBProgressHUDModeText
//只显示文字
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeText;
HUD.label.text = @"全球化";
HUD.detailsLabel.text = @"我们一起参与";
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
图案是下边这样的
只显示文字
二、组成
MBProgressHUD由指示器,文本框,详情文本框,背景框4个部分组成。
我们还以下边这个图案进行说明。
自定义图案
-
这里的图片就相当于指示器，等同于上面那几种模式中的菊花等，如果是自定义的视图，需要传一个属性值customView，它继承于UIView，所以传一个UIImageView也是可以的。
-
"全球化”这里就是文本框label，相当于cell的主标题一样，与它相关的属性如下：
//文本
@property (copy) NSString *labelText;
//文本字体
@property (MB_STRONG) UIFont* labelFont;
//文本颜色
@property (MB_STRONG) UIColor* labelColor;
- “我们一起参与”就相当于详细文本框detailLabel，与它相关的属性，如下：
//详细文本框的文字
@property (copy) NSString *detailsLabelText;
//详细文本框的字体
@property (MB_STRONG) UIFont* detailsLabelFont;
//详细文本框的文字颜色
@property (MB_STRONG) UIColor* detailsLabelColor;
- 灰色的背景其实就是这里的背景框，它可以设置透明度，颜色，等等。与其相关的属性如下所示。
// 背景框的透明度，默认值是0.8
@property (assign) float opacity;
// 背景框的颜色, 如果设置了这个属性，则opacity属性会失效，即不会有半透明效果
@property (MB_STRONG) UIColor *color;
// 背景框的圆角半径。默认值是10.0
@property (assign) float cornerRadius;
// 菊花的颜色，默认是白色
@property (MB_STRONG) UIColor *activityIndicatorColor;
后记
这一篇我们主要介绍了MBProgressHUD的模式和组成，并且简单说明了相关组成的单元属性，下一篇我会接着给大家介绍。谢谢大家，端午第一天假期愉快。
春江花月夜
网友评论