您的位置: 首页  >  文章  >  提示框第三方库之MBProgressHUD

提示框第三方库之MBProgressHUD

分类: 文章 • 2024-10-19 16:04:46

MBProgressHUD 提示框第三方库之MBProgressHUD

MBProgressHUD is an iOS drop-in class that displays a translucent HUD with an indicator and/or labels while work is being done in a background thread. The HUD is meant as a replacement for the undocumented, private UIKit UIProgressHUD with some additional features.

提示框第三方库之MBProgressHUD 提示框第三方库之MBProgressHUD 提示框第三方库之MBProgressHUD 提示框第三方库之MBProgressHUD 提示框第三方库之MBProgressHUD 提示框第三方库之MBProgressHUD 提示框第三方库之MBProgressHUD

Requirements

MBProgressHUD works on any iOS version and is compatible with both ARC and non-ARC projects. It depends on the following Apple frameworks, which should already be included with most Xcode templates:

  • Foundation.framework
  • UIKit.framework
  • CoreGraphics.framework

You will need LLVM 3.0 or later in order to build MBProgressHUD.

Adding MBProgressHUD to your project

Cocoapods

CocoaPods is the recommended way to add MBProgressHUD to your project.

  1. Add a pod entry for MBProgressHUD to your Podfile pod 'MBProgressHUD', '~> 0.6'
  2. Install the pod(s) by running pod install.
  3. Include MBProgressHUD wherever you need it with #import "MBProgressHUD.h".

Source files

Alternatively you can directly add the MBProgressHUD.h and MBProgressHUD.m source files to your project.

  1. Download the latest code version or add the repository as a git submodule to your git-tracked project.
  2. Open your project in Xcode, then drag and drop MBProgressHUD.h and MBProgressHUD.m onto your project (use the "Product Navigator view"). Make sure to select Copy items when asked if you extracted the code archive outside of your project.
  3. Include MBProgressHUD wherever you need it with #import "MBProgressHUD.h".

Static library

You can also add MBProgressHUD as a static library to your project or workspace.

  1. Download the latest code version or add the repository as a git submodule to your git-tracked project.
  2. Open your project in Xcode, then drag and drop MBProgressHUD.xcodeproj onto your project or workspace (use the "Product Navigator view").
  3. Select your target and go to the Build phases tab. In the Link Binary With Libraries section select the add button. On the sheet find and add libMBProgressHUD.a. You might also need to add MBProgressHUD to the Target Dependencies list.
  4. Include MBProgressHUD wherever you need it with #import <MBProgressHUD/MBProgressHUD.h>.

Usage

The main guideline you need to follow when dealing with MBProgressHUD while running long-running tasks is keeping the main thread work-free, so the UI can be updated promptly. The recommended way of using MBProgressHUD is therefore to set it up on the main thread and then spinning the task, that you want to perform, off onto a new thread.

[MBProgressHUD showHUDAddedTo:self.view animated:YES];
dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
    // Do something...
    dispatch_async(dispatch_get_main_queue(), ^{
        [MBProgressHUD hideHUDForView:self.view animated:YES];
    });
});

If you need to configure the HUD you can do this by using the MBProgressHUD reference that showHUDAddedTo:animated: returns.

MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];
hud.mode = MBProgressHUDModeAnnularDeterminate;
hud.labelText = @"Loading";
[self doSomethingInBackgroundWithProgressCallback:^(float progress) {
    hud.progress = progress;
} completionCallback:^{
    [hud hide:YES];
}];

UI updates should always be done on the main thread. Some MBProgressHUD setters are however considered "thread safe" and can be called from background threads. Those also include setMode:, setCustomView:, setLabelText:, setLabelFont:,setDetailsLabelText:, setDetailsLabelFont: and setProgress:.

If you need to run your long-running task in the main thread, you should perform it with a slight delay, so UIKit will have enough time to update the UI (i.e., draw the HUD) before you block the main thread with your task.

[MBProgressHUD showHUDAddedTo:self.view animated:YES];
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, 0.01 * NSEC_PER_SEC);
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
    // Do something...
    [MBProgressHUD hideHUDForView:self.view animated:YES];
});

You should be aware that any HUD updates issued inside the above block won't be displayed until the block completes.

For more examples, including how to use MBProgressHUD with asynchronous operations such as NSURLConnection, take a look at the bundled demo project. Extensive API documentation is provided in the header file (MBProgressHUD.h).

License

This code is distributed under the terms and conditions of the MIT license.

Change-log

Version 0.6 @ 13.03.13

  • Full cocoapods support.
  • Static library integration option.
  • Improved blocks support.
  • Bezel color.
  • Demo app fixes (iOS 6).
  • Various bug-fixes and enhancements.

Version 0.5 @ 22.03.12

  • Major source code modernization and cleanup (KVO, layout code, instance vars, etc.).
  • New annular determinate mode.
  • New text only mode.
  • Added a static library project and Xcode 4 workspace.
  • Added methods to find and return HUD(s) on a view.
  • Various bug fixes.
  • Various demo project enhancements (hi-res rescues, new samples).

IMPORTANT: Requires LLVM 3+.

Version 0.41 @ 03.01.12

  • Support for ARC.

Version 0.4 @ 25.07.10

Version 0.33 @ 27.03.10

  • Custom view operation mode added.
  • Fixed a memory leak.

Version 0.32 @ 4.01.10

  • Added minShowTime, graceTime, xOffset, yOffset.
  • Various fixes.

Version 0.31 @ 8.10.09

  • Fix for touch through during the fade-out animation.

Version 0.3 @ 30.9.09

  • Added show: and hide: methods.
  • Now using UIViews layoutSubviews to automate layout calls.
  • Added some floors to round pixel positions and thereby prevent unsharp views.
  • Some additional documentation and code cleanup.

Version 0.2 @ 21.7.09

  • Added determinate progress mode and switching capabilities between determinate and indeterminate modes.
  • Various bug-fixes.

Version 0.11 @ 2.6.09.

  • Updated labelText and detailsLabelText properties to support text modifications while the HUD is being shown.

Version 0.1 @ 2.4.09

  • Initial release.

 

MBProgressHUD是一个开源项目，实现了很多种样式的提示框，使用上简单、方便，并且可以对显示的内容进行自定义，功能很强大，很多项目中都有使用到。到GitHub上可以下载到项目源码https://github.com/jdg/MBProgressHUD，下载下来后直接把MBProgressHUD.h和MBProgressHUD.m拖入工程中就行，别忘了选择拷贝到工程。完了在需要使用的地方导入头文件就可以开始使用了。首先看下工程截图：

                                                                提示框第三方库之MBProgressHUD

 

接下来是整个Demo的完整界面，这里我只选择出了几个常用的对话框，其他样式的在源码提供的Demo里可以找到，要用的话直接参考就可以。

                                                                        提示框第三方库之MBProgressHUD

接下来直接上代码了，头文件部分：

 

[cpp] view plaincopy
  1. #import <UIKit/UIKit.h>  
  2. #import "MBProgressHUD.h"  
  3.   
  4. @interface ViewController : UIViewController  
  5. {  
  6.     //HUD（Head-Up Display，意思是抬头显示的意思）  
  7.     MBProgressHUD *HUD;  
  8. }  
  9.   
  10. - (IBAction)showTextDialog:(id)sender;  
  11. - (IBAction)showProgressDialog:(id)sender;  
  12. - (IBAction)showProgressDialog2:(id)sender;  
  13. - (IBAction)showCustomDialog:(id)sender;  
  14. - (IBAction)showAllTextDialog:(id)sender;  
  15.   
  16. @end  


实现文件（按钮实现部分）：

 

 

[cpp] view plaincopy
  1. - (IBAction)showTextDialog:(id)sender {  
  2.     //初始化进度框，置于当前的View当中  
  3.     HUD = [[MBProgressHUD alloc] initWithView:self.view];  
  4.     [self.view addSubview:HUD];  
  5.       
  6.     //如果设置此属性则当前的view置于后台  
  7.     HUD.dimBackground = YES;  
  8.       
  9.     //设置对话框文字  
  10.     HUD.labelText = @"请稍等";  
  11.       
  12.     //显示对话框  
  13.     [HUD showAnimated:YES whileExecutingBlock:^{  
  14.         //对话框显示时需要执行的操作  
  15.         sleep(3);  
  16.     } completionBlock:^{  
  17.         //操作执行完后取消对话框  
  18.         [HUD removeFromSuperview];  
  19.         [HUD release];  
  20.         HUD = nil;  
  21.     }];  
  22. }  
  23.   
  24. - (IBAction)showProgressDialog:(id)sender {  
  25.     HUD = [[MBProgressHUD alloc] initWithView:self.view];  
  26.     [self.view addSubview:HUD];  
  27.     HUD.labelText = @"正在加载";  
  28.       
  29.     //设置模式为进度框形的  
  30.     HUD.mode = MBProgressHUDModeDeterminate;  
  31.     [HUD showAnimated:YES whileExecutingBlock:^{  
  32.         float progress = 0.0f;  
  33.         while (progress < 1.0f) {  
  34.             progress += 0.01f;  
  35.             HUD.progress = progress;  
  36.             usleep(50000);  
  37.         }  
  38.     } completionBlock:^{  
  39.         [HUD removeFromSuperview];  
  40.         [HUD release];  
  41.         HUD = nil;  
  42.     }];  
  43. }  
  44.   
  45. - (IBAction)showProgressDialog2:(id)sender {  
  46.     HUD = [[MBProgressHUD alloc] initWithView:self.view];  
  47.     [self.view addSubview:HUD];  
  48.     HUD.labelText = @"正在加载";  
  49.     HUD.mode = MBProgressHUDModeAnnularDeterminate;  
  50.       
  51.     [HUD showAnimated:YES whileExecutingBlock:^{  
  52.         float progress = 0.0f;  
  53.         while (progress < 1.0f) {  
  54.             progress += 0.01f;  
  55.             HUD.progress = progress;  
  56.             usleep(50000);  
  57.         }  
  58.     } completionBlock:^{  
  59.         [HUD removeFromSuperview];  
  60.         [HUD release];  
  61.         HUD = nil;  
  62.     }];  
  63. }  
  64.   
  65. - (IBAction)showCustomDialog:(id)sender {  
  66.     HUD = [[MBProgressHUD alloc] initWithView:self.view];  
  67.     [self.view addSubview:HUD];  
  68.     HUD.labelText = @"操作成功";  
  69.     HUD.mode = MBProgressHUDModeCustomView;  
  70.     HUD.customView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Checkmark"]] autorelease];  
  71.     [HUD showAnimated:YES whileExecutingBlock:^{  
  72.         sleep(2);  
  73.     } completionBlock:^{  
  74.         [HUD removeFromSuperview];  
  75.         [HUD release];  
  76.         HUD = nil;  
  77.     }];  
  78.       
  79. }  
  80.   
  81. - (IBAction)showAllTextDialog:(id)sender {  
  82.     HUD = [[MBProgressHUD alloc] initWithView:self.view];  
  83.     [self.view addSubview:HUD];  
  84.     HUD.labelText = @"操作成功";  
  85.     HUD.mode = MBProgressHUDModeText;  
  86.       
  87.     //指定距离中心点的X轴和Y轴的偏移量，如果不指定则在屏幕中间显示  
  88. //    HUD.yOffset = 150.0f;  
  89. //    HUD.xOffset = 100.0f;  
  90.       
  91.     [HUD showAnimated:YES whileExecutingBlock:^{  
  92.         sleep(2);  
  93.     } completionBlock:^{  
  94.         [HUD removeFromSuperview];  
  95.         [HUD release];  
  96.         HUD = nil;  
  97.     }];  
  98. }  


依次实现的效果如下：

 

           提示框第三方库之MBProgressHUD               提示框第三方库之MBProgressHUD

 

           提示框第三方库之MBProgressHUD               提示框第三方库之MBProgressHUD

下面这个效果就类似Android中的Toast：

                                                     提示框第三方库之MBProgressHUD

以上就简单介绍了MBProgressHUD的使用，这里都是采用block的形式来操作的，这样写起代码来更直观也更高效。

相关推荐