版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2017.05.26 |
前言
在我们的app项目中，为了增加和用户很好的交互能力，通常都需要加一些提示图，比如说，当我们需要网络加载数据的时候，首先要监测网络，如果网络断开的时候，我们需要提示用户；还有一个场景就是登陆的时候，需要提示用户正在登录中和登录成功；再比如清除用户的缓存数据成功的时候，也需要进行清除成功的提示的，等等。总之，用的场景很多，好的提示图可以增强和用户的交互体验，试想，如果没有网络，也不提示用户，用户还以为还在登录，过了一会还是上不去，那可能用户就疯掉了，怒删app了。最近做的几个项目中也是对这个要求的也很多，在实际应用中可以自己写，也可以使用第三方框架，比较知名的比如MBProgressHUD和SVProgressHUD，从这一篇开始我就一点一点的介绍它们以及它们的使用方法，希望对大家有所帮助，那我们就开始喽。
这一篇先说一下MBProgressHUD，先给出github地址：
MBProgressHUD github
详情
MBProgressHUD 简介
我们在介绍MBProgressHUD之前，先认识一个作者，是个歪果仁。
作者
这个项目就是他发起的，并且受欢迎度排在他所有开源代码的第一位。没有别的意思，就是向技术牛人致敬。这个框架目前最近的版本是1.0.0。
一、使用要求和前提
该框架需要工作在ios6+以上的系统，且只有在ARC下是有用的，而且依赖于apple的一下几个框架：
- Foundation.framework
- UIKit.framework
- CoreGraphics.framework
还有就是需要最新版本的xcode来运行，老版本的也可以编译和工作，但是兼容性可能不是很好。
二、获取集成方式
可以通过下面几种方式集成该框架。
- 使用cocoapods:pod 'MBProgressHUD', '~> 1.0.0'
- 使用Carthage ： github "jdg/MBProgressHUD" ~> 1.0.0
- 直接在仓库里面下载框架，并且把.h和.m文件拖入到项目中。
- 静态库集成：libMBProgressHUD.a
三、使用方法
推荐的使用方法就是在主线程开始发起使用，在新的线程里面结束使用，实例代码如下：
[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];
});
});
可以将HUD加在任何视图或者window上面，但是要避免讲HUD加在具有复杂的视图层次的视图上面，比如UITableView和UICollectionView，这可能导致HUD无法正常显示。
如果你想配置，你可以使用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];
}];
可以使用NSProgress对象，这个对象可以报告进度，MBProgressHUD就会根据进度更新自己，比如我们常见的0---100%加在数据，100%时条状或者饼状图正好填满。实例代码如下：
MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];
hud.mode = MBProgressHUDModeAnnularDeterminate;
hud.labelText = @"Loading";
NSProgress *progress = [self doSomethingInBackgroundCompletion:^{
[hud hide:YES];
}];
hud.progressObject = progress;
UI更新应该一直放在主线程中做，但是一些MBProgresHUD的setter方法也可以认为是线程安全的，可以在子线程中直接调用。比如：
- setMode
- setCustomView
- setLabelText
- setLabelFont
- setDetailsLabelText
- setDetailsLabelFont
- setProgress
如果你需要在主线程做耗时任务，你应该使用该框架的时候增加稍微的延迟，可以保证UIKit有足够的时间更新UI（例如画HUD），如下所示：
[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];
});
MBProgressHUD 框架文件
我这里使用的是pod集成的，我们先看一下，该框架都有哪些文件。
框架
大家看一下，其实这个框架还是很轻量级的，如果你看过SDwebImage和AFNetworking的话，就会发现这个框架文件很少，但是少而精，好用就是它的特点，下面我们就看一下，这里的.h和.m文件。
一、MBProgressHUD.h
看代码
//
// MBProgressHUD.h
// Version 1.0.0
// Created by Matej Bukovinski on 2.4.09.
//
// This code is distributed under the terms and conditions of the MIT license.
// Copyright © 2009-2016 Matej Bukovinski
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <CoreGraphics/CoreGraphics.h>
@class MBBackgroundView;
@protocol MBProgressHUDDelegate;
extern CGFloat const MBProgressMaxOffset;
typedef NS_ENUM(NSInteger, MBProgressHUDMode) {
/// UIActivityIndicatorView.
MBProgressHUDModeIndeterminate,
/// A round, pie-chart like, progress view.
MBProgressHUDModeDeterminate,
/// Horizontal progress bar.
MBProgressHUDModeDeterminateHorizontalBar,
/// Ring-shaped progress view.
MBProgressHUDModeAnnularDeterminate,
/// Shows a custom view.
MBProgressHUDModeCustomView,
/// Shows only labels.
MBProgressHUDModeText
};
typedef NS_ENUM(NSInteger, MBProgressHUDAnimation) {
/// Opacity animation
MBProgressHUDAnimationFade,
/// Opacity + scale animation (zoom in when appearing zoom out when disappearing)
MBProgressHUDAnimationZoom,
/// Opacity + scale animation (zoom out style)
MBProgressHUDAnimationZoomOut,
/// Opacity + scale animation (zoom in style)
MBProgressHUDAnimationZoomIn
};
typedef NS_ENUM(NSInteger, MBProgressHUDBackgroundStyle) {
/// Solid color background
MBProgressHUDBackgroundStyleSolidColor,
/// UIVisualEffectView or UIToolbar.layer background view
MBProgressHUDBackgroundStyleBlur
};
typedef void (^MBProgressHUDCompletionBlock)();
NS_ASSUME_NONNULL_BEGIN
/**
* Displays a simple HUD window containing a progress indicator and two optional labels for short messages.
*
* This is a simple drop-in class for displaying a progress HUD view similar to Apple's private UIProgressHUD class.
* The MBProgressHUD window spans over the entire space given to it by the initWithFrame: constructor and catches all
* user input on this region, thereby preventing the user operations on components below the view.
*
* @note To still allow touches to pass through the HUD, you can set hud.userInteractionEnabled = NO.
* @attention MBProgressHUD is a UI class and should therefore only be accessed on the main thread.
*/
@interface MBProgressHUD : UIView
/**
* Creates a new HUD, adds it to provided view and shows it. The counterpart to this method is hideHUDForView:animated:.
*
* @note This method sets removeFromSuperViewOnHide. The HUD will automatically be removed from the view hierarchy when hidden.
*
* @param view The view that the HUD will be added to
* @param animated If set to YES the HUD will appear using the current animationType. If set to NO the HUD will not use
* animations while appearing.
* @return A reference to the created HUD.
*
* @see hideHUDForView:animated:
* @see animationType
*/
+ (instancetype)showHUDAddedTo:(UIView *)view animated:(BOOL)animated;
/// @name Showing and hiding
/**
* Finds the top-most HUD subview and hides it. The counterpart to this method is showHUDAddedTo:animated:.
*
* @note This method sets removeFromSuperViewOnHide. The HUD will automatically be removed from the view hierarchy when hidden.
*
* @param view The view that is going to be searched for a HUD subview.
* @param animated If set to YES the HUD will disappear using the current animationType. If set to NO the HUD will not use
* animations while disappearing.
* @return YES if a HUD was found and removed, NO otherwise.
*
* @see showHUDAddedTo:animated:
* @see animationType
*/
+ (BOOL)hideHUDForView:(UIView *)view animated:(BOOL)animated;
/**
* Finds the top-most HUD subview and returns it.
*
* @param view The view that is going to be searched.
* @return A reference to the last HUD subview discovered.
*/
+ (nullable MBProgressHUD *)HUDForView:(UIView *)view;
/**
* A convenience constructor that initializes the HUD with the view's bounds. Calls the designated constructor with
* view.bounds as the parameter.
*
* @param view The view instance that will provide the bounds for the HUD. Should be the same instance as
* the HUD's superview (i.e., the view that the HUD will be added to).
*/
- (instancetype)initWithView:(UIView *)view;
/**
* Displays the HUD.
*
* @note You need to make sure that the main thread completes its run loop soon after this method call so that
* the user interface can be updated. Call this method when your task is already set up to be executed in a new thread
* (e.g., when using something like NSOperation or making an asynchronous call like NSURLRequest).
*
* @param animated If set to YES the HUD will appear using the current animationType. If set to NO the HUD will not use
* animations while appearing.
*
* @see animationType
*/
- (void)showAnimated:(BOOL)animated;
/**
* Hides the HUD. This still calls the hudWasHidden: delegate. This is the counterpart of the show: method. Use it to
* hide the HUD when your task completes.
*
* @param animated If set to YES the HUD will disappear using the current animationType. If set to NO the HUD will not use
* animations while disappearing.
*
* @see animationType
*/
- (void)hideAnimated:(BOOL)animated;
/**
* Hides the HUD after a delay. This still calls the hudWasHidden: delegate. This is the counterpart of the show: method. Use it to
* hide the HUD when your task completes.
*
* @param animated If set to YES the HUD will disappear using the current animationType. If set to NO the HUD will not use
* animations while disappearing.
* @param delay Delay in seconds until the HUD is hidden.
*
* @see animationType
*/
- (void)hideAnimated:(BOOL)animated afterDelay:(NSTimeInterval)delay;
/**
* The HUD delegate object. Receives HUD state notifications.
*/
@property (weak, nonatomic) id<MBProgressHUDDelegate> delegate;
/**
* Called after the HUD is hiden.
*/
@property (copy, nullable) MBProgressHUDCompletionBlock completionBlock;
/*
* Grace period is the time (in seconds) that the invoked method may be run without
* showing the HUD. If the task finishes before the grace time runs out, the HUD will
* not be shown at all.
* This may be used to prevent HUD display for very short tasks.
* Defaults to 0 (no grace time).
*/
@property (assign, nonatomic) NSTimeInterval graceTime;
/**
* The minimum time (in seconds) that the HUD is shown.
* This avoids the problem of the HUD being shown and than instantly hidden.
* Defaults to 0 (no minimum show time).
*/
@property (assign, nonatomic) NSTimeInterval minShowTime;
/**
* Removes the HUD from its parent view when hidden.
* Defaults to NO.
*/
@property (assign, nonatomic) BOOL removeFromSuperViewOnHide;
/// @name Appearance
/**
* MBProgressHUD operation mode. The default is MBProgressHUDModeIndeterminate.
*/
@property (assign, nonatomic) MBProgressHUDMode mode;
/**
* A color that gets forwarded to all labels and supported indicators. Also sets the tintColor
* for custom views on iOS 7+. Set to nil to manage color individually.
* Defaults to semi-translucent black on iOS 7 and later and white on earlier iOS versions.
*/
@property (strong, nonatomic, nullable) UIColor *contentColor UI_APPEARANCE_SELECTOR;
/**
* The animation type that should be used when the HUD is shown and hidden.
*/
@property (assign, nonatomic) MBProgressHUDAnimation animationType UI_APPEARANCE_SELECTOR;
/**
* The bezel offset relative to the center of the view. You can use MBProgressMaxOffset
* and -MBProgressMaxOffset to move the HUD all the way to the screen edge in each direction.
* E.g., CGPointMake(0.f, MBProgressMaxOffset) would position the HUD centered on the bottom edge.
*/
@property (assign, nonatomic) CGPoint offset UI_APPEARANCE_SELECTOR;
/**
* The amount of space between the HUD edge and the HUD elements (labels, indicators or custom views).
* This also represents the minimum bezel distance to the edge of the HUD view.
* Defaults to 20.f
*/
@property (assign, nonatomic) CGFloat margin UI_APPEARANCE_SELECTOR;
/**
* The minimum size of the HUD bezel. Defaults to CGSizeZero (no minimum size).
*/
@property (assign, nonatomic) CGSize minSize UI_APPEARANCE_SELECTOR;
/**
* Force the HUD dimensions to be equal if possible.
*/
@property (assign, nonatomic, getter = isSquare) BOOL square UI_APPEARANCE_SELECTOR;
/**
* When enabled, the bezel center gets slightly affected by the device accelerometer data.
* Has no effect on iOS < 7.0. Defaults to YES.
*/
@property (assign, nonatomic, getter=areDefaultMotionEffectsEnabled) BOOL defaultMotionEffectsEnabled UI_APPEARANCE_SELECTOR;
/// @name Progress
/**
* The progress of the progress indicator, from 0.0 to 1.0. Defaults to 0.0.
*/
@property (assign, nonatomic) float progress;
/// @name ProgressObject
/**
* The NSProgress object feeding the progress information to the progress indicator.
*/
@property (strong, nonatomic, nullable) NSProgress *progressObject;
/// @name Views
/**
* The view containing the labels and indicator (or customView).
*/
@property (strong, nonatomic, readonly) MBBackgroundView *bezelView;
/**
* View covering the entire HUD area, placed behind bezelView.
*/
@property (strong, nonatomic, readonly) MBBackgroundView *backgroundView;
/**
* The UIView (e.g., a UIImageView) to be shown when the HUD is in MBProgressHUDModeCustomView.
* The view should implement intrinsicContentSize for proper sizing. For best results use approximately 37 by 37 pixels.
*/
@property (strong, nonatomic, nullable) UIView *customView;
/**
* A label that holds an optional short message to be displayed below the activity indicator. The HUD is automatically resized to fit
* the entire text.
*/
@property (strong, nonatomic, readonly) UILabel *label;
/**
* A label that holds an optional details message displayed below the labelText message. The details text can span multiple lines.
*/
@property (strong, nonatomic, readonly) UILabel *detailsLabel;
/**
* A button that is placed below the labels. Visible only if a target / action is added.
*/
@property (strong, nonatomic, readonly) UIButton *button;
@end
@protocol MBProgressHUDDelegate <NSObject>
@optional
/**
* Called after the HUD was fully hidden from the screen.
*/
- (void)hudWasHidden:(MBProgressHUD *)hud;
@end
/**
* A progress view for showing definite progress by filling up a circle (pie chart).
*/
@interface MBRoundProgressView : UIView
/**
* Progress (0.0 to 1.0)
*/
@property (nonatomic, assign) float progress;
/**
* Indicator progress color.
* Defaults to white [UIColor whiteColor].
*/
@property (nonatomic, strong) UIColor *progressTintColor;
/**
* Indicator background (non-progress) color.
* Only applicable on iOS versions older than iOS 7.
* Defaults to translucent white (alpha 0.1).
*/
@property (nonatomic, strong) UIColor *backgroundTintColor;
/*
* Display mode - NO = round or YES = annular. Defaults to round.
*/
@property (nonatomic, assign, getter = isAnnular) BOOL annular;
@end
/**
* A flat bar progress view.
*/
@interface MBBarProgressView : UIView
/**
* Progress (0.0 to 1.0)
*/
@property (nonatomic, assign) float progress;
/**
* Bar border line color.
* Defaults to white [UIColor whiteColor].
*/
@property (nonatomic, strong) UIColor *lineColor;
/**
* Bar background color.
* Defaults to clear [UIColor clearColor];
*/
@property (nonatomic, strong) UIColor *progressRemainingColor;
/**
* Bar progress color.
* Defaults to white [UIColor whiteColor].
*/
@property (nonatomic, strong) UIColor *progressColor;
@end
@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
@interface MBProgressHUD (Deprecated)
+ (NSArray *)allHUDsForView:(UIView *)view __attribute__((deprecated("Store references when using more than one HUD per view.")));
+ (NSUInteger)hideAllHUDsForView:(UIView *)view animated:(BOOL)animated __attribute__((deprecated("Store references when using more than one HUD per view.")));
- (id)initWithWindow:(UIWindow *)window __attribute__((deprecated("Use initWithView: instead.")));
- (void)show:(BOOL)animated __attribute__((deprecated("Use showAnimated: instead.")));
- (void)hide:(BOOL)animated __attribute__((deprecated("Use hideAnimated: instead.")));
- (void)hide:(BOOL)animated afterDelay:(NSTimeInterval)delay __attribute__((deprecated("Use hideAnimated:afterDelay: instead.")));
- (void)showWhileExecuting:(SEL)method onTarget:(id)target withObject:(id)object animated:(BOOL)animated __attribute__((deprecated("Use GCD directly.")));
- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block __attribute__((deprecated("Use GCD directly.")));
- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block completionBlock:(nullable MBProgressHUDCompletionBlock)completion __attribute__((deprecated("Use GCD directly.")));
- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block onQueue:(dispatch_queue_t)queue __attribute__((deprecated("Use GCD directly.")));
- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block onQueue:(dispatch_queue_t)queue
completionBlock:(nullable MBProgressHUDCompletionBlock)completion __attribute__((deprecated("Use GCD directly.")));
@property (assign) BOOL taskInProgress __attribute__((deprecated("No longer needed.")));
@property (nonatomic, copy) NSString *labelText __attribute__((deprecated("Use label.text instead.")));
@property (nonatomic, strong) UIFont *labelFont __attribute__((deprecated("Use label.font instead.")));
@property (nonatomic, strong) UIColor *labelColor __attribute__((deprecated("Use label.textColor instead.")));
@property (nonatomic, copy) NSString *detailsLabelText __attribute__((deprecated("Use detailsLabel.text instead.")));
@property (nonatomic, strong) UIFont *detailsLabelFont __attribute__((deprecated("Use detailsLabel.font instead.")));
@property (nonatomic, strong) UIColor *detailsLabelColor __attribute__((deprecated("Use detailsLabel.textColor instead.")));
@property (assign, nonatomic) CGFloat opacity __attribute__((deprecated("Customize bezelView properties instead.")));
@property (strong, nonatomic) UIColor *color __attribute__((deprecated("Customize the bezelView color instead.")));
@property (assign, nonatomic) CGFloat xOffset __attribute__((deprecated("Set offset.x instead.")));
@property (assign, nonatomic) CGFloat yOffset __attribute__((deprecated("Set offset.y instead.")));
@property (assign, nonatomic) CGFloat cornerRadius __attribute__((deprecated("Set bezelView.layer.cornerRadius instead.")));
@property (assign, nonatomic) BOOL dimBackground __attribute__((deprecated("Customize HUD background properties instead.")));
@property (strong, nonatomic) UIColor *activityIndicatorColor __attribute__((deprecated("Use UIAppearance to customize UIActivityIndicatorView. E.g.: [UIActivityIndicatorView appearanceWhenContainedIn:[MBProgressHUD class], nil].color = [UIColor redColor];")));
@property (atomic, assign, readonly) CGSize size __attribute__((deprecated("Get the bezelView.frame.size instead.")));
@end
NS_ASSUME_NONNULL_END
二、MBProgressHUD.m
.m文件有点长了，1484行，这里都是具体的实现，有想知道怎么实现的朋友可以仔细看看，这里我就不列出来了，大家先好好看看.h文件里面的属性和接口，暂时可以不关心如何实现。后面我会跟着大家一起深入研究的。
后记
这里只是简单介绍了MBProgressHUD框架，接下来几篇我会给大家举例使用方法，希望可以对大家有用，期待大家的关注，谢谢。
古韵古香
