版本記錄
| 版本號 | 時間 |
|---|---|
| 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圖
餅狀圖
??這里我有個疑問，不知道為什么我這里一直是個環形，不是個扇形填充，只是描邊不填充，有知道的希望可以和我說一下，謝謝。
后記
??端午節就這么過去了，這個提示圖我也寫的差不多了，希望大家能指出其中的錯誤和不足，謝謝大家。
端午安康
