MBProgressHUD
2015-09-19 21:16
260 查看
MBProgressHUD是一个显示HUD窗口的第三方类库,用于在执行一些后台任务时,在程序中显示一个表示进度的loading视图和两个可选的文本提示的HUD窗口。我想最多是应用在加载网络数据的时候。其实苹果官方自己有一个带有此功能的类UIProgressHUD,只不过它是私有的,现在不让用。至于实际的效果。
具体用法我们就不多说了,参考github上的说明就能用得很顺的。本文主要还是从源码的角度来分析一下它的具体实现。
模式
在分析实现代码之前,我们先来看看MBProgressHUD中定义的MBProgressHUDMode枚举。它用来表示HUD窗口的模式,即我们从效果图中看到的几种显示样式。其具体定义如下:
通过设置MBProgressHUD的模式,我们可以使用MBProgressHUD自定义的表示进度的视图来满足我们的需求,也可以自定义这个进度视图,当然还可以只显示文本。在下面我们会讨论源码中是如何使用这几个值的。
外观
我们先来了解一下MBProgressHUD的基本组成。一个MBProgressHUD视图主要由四个部分组成:
loading动画视图(在此做个统称,当然这个区域可以是自定义的一个UIImageView视图)。这个视图由我们设定的模式值决定,可以是菊花、进度条,也可以是我们自定义的视图;
标题文本框(label):主要用于显示提示的主题信息。这个文本框是可选的,通常位于loading动画视图的下面,且它是单行显示。它会根据labelText属性来自适应文本的大小(有一个长度上限),如果过长,则超出的部分会显示为”…“;
详情文本框(detailsLabel)。如果觉得标题不够详细,或者有附属信息,就可以将详细信息放在这里面显示。该文本框对应的是显示detailsLabelText属性的值,它是可以多行显示的。另外,详情的显示还依赖于labelText属性的设置,只有labelText属性被设置了,且不为空串,才会显示detailsLabel;
HUD背景框。主要是作为上面三个部分的一个背景,用来突出上面三部分。
为了让我们更好地自定义这几个部分,MBProgressHUD还提供了一些属性,我们简单了解一下:
通过以上属性,我们可以根据自己的需要来设置这几个部分的外观。
另外还有一个比较有意思的属性是dimBackground,用于为HUD窗口的视图区域覆盖上一层径向渐变(radial gradient)层,其定义如下:
让我们来看看通过它,MBProgressHUD都做了些什么。代码如下:
这段代码由中心向MBProgressHUD视图的四周绘制了一个渐变层。当然,这里的颜色值是写死的,我们无法自行定义。有兴趣的话,大家可以将这个属性设置为YES,看看实际的效果。
创建、布局与绘制
除了继承自UIView的-initWithFrame:初始化方法,MBProgressHUD还为我们提供了两个初始化方法,如下所示:
这两个方法分别传入一个UIWindow对象和一个UIView对象。传入的视图对象仅仅是做为MBProgressHUD视图定义其frame属性的参照,而不会直接将MBProgressHUD视图添加到传入的视图对象上。这个添加操作还得我们自行处理(当然,MBProgressHUD还提供了几个便捷的类方法,我们下面会说明)。
MBProgressHUD提供了几个属性,可以让我们控制HUD的布局,这些属性主要有以下几个:
需要注意的是,MBProgressHUD视图会充满其父视图的frame内,为此,在MBProgressHUD的layoutSubviews方法中,还专门做了处理,如下代码所示:
也因此,当MBProgressHUD显示时,它也会屏蔽父视图的各种交互操作。
在布局的过程中,会先根据我们要显示的视图计算出容纳这些视图所需要的总的宽度和高度。当然,会设置一个最大值。我们截取其中一段来看看:
之后,就开始从上到下放置各个视图。在布局代码的最后,计算了一个size值,这是为后面绘制背景框做准备的。
在上面的布局代码中,主要是处理了loading动画视图、标题文本框和详情文本框,而HUD背景框主要是在drawRect:中来绘制的。背景框的绘制代码如下:
这是最平常的绘制操作,在此不多做解释。
我们上面讲过MBProgressHUD提供了几种窗口模式,这几种模式的主要区别在于loading动画视图的展示。默认情况下,使用的是菊花(MBProgressHUDModeIndeterminate)。我们可以通过设置以下属性,来改变loading动画视图:
对于其它几种模式,MBProgressHUD专门我们提供了几个视图类。如果是进度条模式(MBProgressHUDModeDeterminateHorizontalBar),则使用的是MBBarProgressView类;如果是饼图模式(MBProgressHUDModeDeterminate)或环形模式(MBProgressHUDModeAnnularDeterminate),则使用的是MBRoundProgressView类。上面这两个类的主要操作就是在drawRect:中根据一些进度参数来绘制形状,大家可以自己详细看一下。
当然,我们还可以自定义loading动画视图,此时选择的模式是MBProgressHUDModeCustomView。或者不显示loading动画视图,而只显示文本框(MBProgressHUDModeText)。
具体显示哪一种loading动画视图,是在-updateIndicators方法中来处理的,其实现如下所示:
显示与隐藏
MBRoundProgressView为我们提供了丰富的显示与隐藏HUD窗口的。在分析这些方法之前,我们先来看看MBProgressHUD为显示与隐藏提供的一些属性:
以上这些属性都还好理解,可能需要注意的就是graceTime和taskInProgress的配合使用。在下面我们将会看看这两个属性的用法。
对于显示操作,最基本的就是-show:方法(其它几个显示方法都会调用该方法来显示HUD窗口),我们先来看看它的实现,
可以看到,如果我们没有设置graceTime属性,则会立即显示HUD;而如果设置了graceTime,则会创建一个定时器,并让显示操作延迟到graceTime所设定的时间再执行,而-handleGraceTimer:实现如下:
可以看到,只有在设置了taskInProgress标识位为YES的情况下,才会去显示HUD窗口。所以,如果我们要自己调用-show:方法的话,需要酌情考虑设置taskInProgress标识位。
除了-show:方法以外,MBProgressHUD还为我们提供了一组显示方法,可以让我们在显示HUD的同时,执行一些后台任务,我们在此主要介绍两个。其中一个是-showWhileExecuting:onTarget:withObject:animated:,它是基于target-action方式的调用,在执行一个后台任务时显示HUD,等后台任务执行完成后再隐藏HUD,具体实现如下所示:
可以看到,-showWhileExecuting:onTarget:withObject:animated:首先将taskInProgress属性设置为YES,这样在调用-show:方法时,即使设置了graceTime,也确保能在任务完成之前显示HUD。然后开启一个新线程,来异步执行我们的后台任务,最后去显示HUD。
而在异步调用方法-launchExecution中,线程首先是维护了自己的一个@autoreleasepool,所以在我们自己的方法中,就不需要再去维护一个@autoreleasepool了。之后是去执行我们的任务,在任务完成之后,再回去主线程去执行清理操作,并隐藏HUD窗口。
另一个显示方法是-showAnimated:whileExecutingBlock:onQueue:completionBlock:,它是基于GCD的调用,当block中的任务在指定的队列中执行时,显示HUD窗口,任务完成之后执行completionBlock操作,最后隐藏HUD窗口。我们来看看它的具体实现:
这个方法也是首先将taskInProgress属性设置为YES,然后开启一个线程去执行block任务,最后主线程去执行清理操作,并隐藏HUD窗口。
对于HUD的隐藏,MBProgressHUD提供了两个方法,一个是-hide:,另一个是-hide:afterDelay:,后者基于前者,所以我们主要来看看-hide:的实现:
我们可以看到,在设置了minShowTime属性并且已经显示了HUD窗口的情况下,会去判断显示的时间是否小于minShowTime指定的时间,如果是,则会开启一个定时器,等到显示的时间到了minShowTime所指定的时间,才会去隐藏HUD窗口;否则会直接去隐藏HUD窗口。
隐藏的实际操作主要是去做了些清理操作,包括根据设定的removeFromSuperViewOnHide值来执行是否从父视图移除HUD窗口,以及执行completionBlock操作,还有就是执行代理的hudWasHidden:方法。这些操作是在私有方法-done里面执行的,实现如下:
其它
MBProgressHUD的一些主要的代码差不多已经分析完了,最后还有些边边角角的地方,一起来看看。
显示和隐藏的便捷方法
除了上面描述的实例方法之外,MBProgressHUD还为我们提供了几个便捷显示和隐藏HUD窗口的方法,如下所示:
方法的签名已经很能说明问题了,在此不多描述。
部分属性值的设置
对于部分属性(主要是”外观”一节中针对菊花、标题文本框和详情文本框的几个属性值),为了在设置将这些属性时修改对应视图的属性,并没有直接为每个属性生成一个setter,而是通过KVO来监听这些属性值的变化,再将这些值赋值给视图的对应属性,如下所示:
代理
MBProgressHUD还为我们提供了一个代理MBProgressHUDDelegate,这个代理中只提供了一个方法,即:
这个代理方法是在隐藏HUD窗口后调用,如果此时我们需要在我们自己的实现中执行某些操作,则可以实现这个方法。
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if ([self.delegate respondsToSelector:@selector(hudViewWasTapped)]) {
[self.delegate performSelector:@selector(hudViewWasTapped)];
}
}
问题
MBProgressHUD为我们提供了一个HUD窗口的很好的实现,不过个人在使用过程中,觉得它给我们提供的交互功能太少。其代理只提供了一个-hudWasHidden:方法,而且我们也无法通过点击HUD来执行一些操作。在现实的需求中,可能存在这种情况:比如一个网络操作,在发送请求等待响应的过程中,我们会显示一个HUD窗口以显示一个loading框。但如果我们想在等待响应的过程中,在当前视图中取消这个网络请求,就没有相应的处理方式,MBProgressHUD没有为我们提供这样的交互操作。当然这时候,我们可以根据自己的需求来修改源码。
与SVProgressHUD的对比
与MBProgressHUD类似,SVProgressHUD类库也为我们提供了在视图中显示一个HUD窗口的功能。两者的基本思路是差不多的,差别更多的是在实现细节上。相对于MBProgressHUD来说,SVProgressHUD的实现有以下几点不同:
SVProgressHUD类对外提供的都是类方法,包括显示、隐藏、和视图属性设置都是使用类方法来操作。其内部实现为一个单例对象,类方法实际是针对这个单例对象来操作的。
SVProgressHUD主要包含三部分:loading视图、提示文本框和背景框,没有详情文本框。
SVProgressHUD默认提供了正确、错误和信息三种状态视图(与loading视图同一位置,根据需要来设置)。当然MBProgressHUD中,也可以自定义视图(customView)来显示相应的状态视图。
SVProgressHUD为我们提供了更多的交互操作,包括点击事件、显示事件及隐藏事件。不过这些都是通过通知的形式向外发送,所以我们需要自己去监听这些事件。
SVProgressHUD中一些loading动画是以Layer动画的形式来实现的。
SVProgressHUD的实现细节还未详细去看,有兴趣的读者可以去研究一下。这两个HUD类库各有优点,大家在使用时,可根据自己的需要和喜好来选择。
小结
总体来说,MBProgressHUD的代码相对朴实,简单易懂,没有什么花哨难懂的东西。就技术点而言,也没有太多复杂的技术,都是我们常用的一些东西。就使用而言,也是挺方便的,参考一下github上的使用指南就能很快上手。
具体用法我们就不多说了,参考github上的说明就能用得很顺的。本文主要还是从源码的角度来分析一下它的具体实现。
模式
在分析实现代码之前,我们先来看看MBProgressHUD中定义的MBProgressHUDMode枚举。它用来表示HUD窗口的模式,即我们从效果图中看到的几种显示样式。其具体定义如下:
外观
我们先来了解一下MBProgressHUD的基本组成。一个MBProgressHUD视图主要由四个部分组成:
loading动画视图(在此做个统称,当然这个区域可以是自定义的一个UIImageView视图)。这个视图由我们设定的模式值决定,可以是菊花、进度条,也可以是我们自定义的视图;
标题文本框(label):主要用于显示提示的主题信息。这个文本框是可选的,通常位于loading动画视图的下面,且它是单行显示。它会根据labelText属性来自适应文本的大小(有一个长度上限),如果过长,则超出的部分会显示为”…“;
详情文本框(detailsLabel)。如果觉得标题不够详细,或者有附属信息,就可以将详细信息放在这里面显示。该文本框对应的是显示detailsLabelText属性的值,它是可以多行显示的。另外,详情的显示还依赖于labelText属性的设置,只有labelText属性被设置了,且不为空串,才会显示detailsLabel;
HUD背景框。主要是作为上面三个部分的一个背景,用来突出上面三部分。
为了让我们更好地自定义这几个部分,MBProgressHUD还提供了一些属性,我们简单了解一下:
另外还有一个比较有意思的属性是dimBackground,用于为HUD窗口的视图区域覆盖上一层径向渐变(radial gradient)层,其定义如下:
创建、布局与绘制
除了继承自UIView的-initWithFrame:初始化方法,MBProgressHUD还为我们提供了两个初始化方法,如下所示:
MBProgressHUD提供了几个属性,可以让我们控制HUD的布局,这些属性主要有以下几个:
在布局的过程中,会先根据我们要显示的视图计算出容纳这些视图所需要的总的宽度和高度。当然,会设置一个最大值。我们截取其中一段来看看:
在上面的布局代码中,主要是处理了loading动画视图、标题文本框和详情文本框,而HUD背景框主要是在drawRect:中来绘制的。背景框的绘制代码如下:
我们上面讲过MBProgressHUD提供了几种窗口模式,这几种模式的主要区别在于loading动画视图的展示。默认情况下,使用的是菊花(MBProgressHUDModeIndeterminate)。我们可以通过设置以下属性,来改变loading动画视图:
当然,我们还可以自定义loading动画视图,此时选择的模式是MBProgressHUDModeCustomView。或者不显示loading动画视图,而只显示文本框(MBProgressHUDModeText)。
具体显示哪一种loading动画视图,是在-updateIndicators方法中来处理的,其实现如下所示:
MBRoundProgressView为我们提供了丰富的显示与隐藏HUD窗口的。在分析这些方法之前,我们先来看看MBProgressHUD为显示与隐藏提供的一些属性:
对于显示操作,最基本的就是-show:方法(其它几个显示方法都会调用该方法来显示HUD窗口),我们先来看看它的实现,
除了-show:方法以外,MBProgressHUD还为我们提供了一组显示方法,可以让我们在显示HUD的同时,执行一些后台任务,我们在此主要介绍两个。其中一个是-showWhileExecuting:onTarget:withObject:animated:,它是基于target-action方式的调用,在执行一个后台任务时显示HUD,等后台任务执行完成后再隐藏HUD,具体实现如下所示:
而在异步调用方法-launchExecution中,线程首先是维护了自己的一个@autoreleasepool,所以在我们自己的方法中,就不需要再去维护一个@autoreleasepool了。之后是去执行我们的任务,在任务完成之后,再回去主线程去执行清理操作,并隐藏HUD窗口。
另一个显示方法是-showAnimated:whileExecutingBlock:onQueue:completionBlock:,它是基于GCD的调用,当block中的任务在指定的队列中执行时,显示HUD窗口,任务完成之后执行completionBlock操作,最后隐藏HUD窗口。我们来看看它的具体实现:
对于HUD的隐藏,MBProgressHUD提供了两个方法,一个是-hide:,另一个是-hide:afterDelay:,后者基于前者,所以我们主要来看看-hide:的实现:
隐藏的实际操作主要是去做了些清理操作,包括根据设定的removeFromSuperViewOnHide值来执行是否从父视图移除HUD窗口,以及执行completionBlock操作,还有就是执行代理的hudWasHidden:方法。这些操作是在私有方法-done里面执行的,实现如下:
MBProgressHUD的一些主要的代码差不多已经分析完了,最后还有些边边角角的地方,一起来看看。
显示和隐藏的便捷方法
除了上面描述的实例方法之外,MBProgressHUD还为我们提供了几个便捷显示和隐藏HUD窗口的方法,如下所示:
部分属性值的设置
对于部分属性(主要是”外观”一节中针对菊花、标题文本框和详情文本框的几个属性值),为了在设置将这些属性时修改对应视图的属性,并没有直接为每个属性生成一个setter,而是通过KVO来监听这些属性值的变化,再将这些值赋值给视图的对应属性,如下所示:
MBProgressHUD还为我们提供了一个代理MBProgressHUDDelegate,这个代理中只提供了一个方法,即:
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if ([self.delegate respondsToSelector:@selector(hudViewWasTapped)]) {
[self.delegate performSelector:@selector(hudViewWasTapped)];
}
}
问题
MBProgressHUD为我们提供了一个HUD窗口的很好的实现,不过个人在使用过程中,觉得它给我们提供的交互功能太少。其代理只提供了一个-hudWasHidden:方法,而且我们也无法通过点击HUD来执行一些操作。在现实的需求中,可能存在这种情况:比如一个网络操作,在发送请求等待响应的过程中,我们会显示一个HUD窗口以显示一个loading框。但如果我们想在等待响应的过程中,在当前视图中取消这个网络请求,就没有相应的处理方式,MBProgressHUD没有为我们提供这样的交互操作。当然这时候,我们可以根据自己的需求来修改源码。
与SVProgressHUD的对比
与MBProgressHUD类似,SVProgressHUD类库也为我们提供了在视图中显示一个HUD窗口的功能。两者的基本思路是差不多的,差别更多的是在实现细节上。相对于MBProgressHUD来说,SVProgressHUD的实现有以下几点不同:
SVProgressHUD类对外提供的都是类方法,包括显示、隐藏、和视图属性设置都是使用类方法来操作。其内部实现为一个单例对象,类方法实际是针对这个单例对象来操作的。
SVProgressHUD主要包含三部分:loading视图、提示文本框和背景框,没有详情文本框。
SVProgressHUD默认提供了正确、错误和信息三种状态视图(与loading视图同一位置,根据需要来设置)。当然MBProgressHUD中,也可以自定义视图(customView)来显示相应的状态视图。
SVProgressHUD为我们提供了更多的交互操作,包括点击事件、显示事件及隐藏事件。不过这些都是通过通知的形式向外发送,所以我们需要自己去监听这些事件。
SVProgressHUD中一些loading动画是以Layer动画的形式来实现的。
SVProgressHUD的实现细节还未详细去看,有兴趣的读者可以去研究一下。这两个HUD类库各有优点,大家在使用时,可根据自己的需要和喜好来选择。
小结
总体来说,MBProgressHUD的代码相对朴实,简单易懂,没有什么花哨难懂的东西。就技术点而言,也没有太多复杂的技术,都是我们常用的一些东西。就使用而言,也是挺方便的,参考一下github上的使用指南就能很快上手。
相关文章推荐
- 排序算法之希尔排序
- SQL 查询每组的第一条记录
- ios零碎知识点
- HDU 5455
- 【BZOJ】1016 生成树计数 最小生成树 Maxtrix-Tree定理 生成树计数 搜索
- 游戏开发观念又转变了-需要学习更多
- LintCode Majority Number II / III
- Camera显示之Hal层的适配
- 无锁编程 - 大纲
- AVL树,红黑树,B树,B+树,Trie树应用场景简介
- java 编程IDE-eclipse使用基础问题
- 项目开发指引
- 无锁编程 - 大纲
- 【poj2104】K-th Number 分块
- hiho1087 Hamiltonian Cycle 位运算+记忆化搜索 求哈密顿回路数量
- 函数指针和指针函数
- POJ 1502 水 dij
- sp<> 强指针类的用法
- 【五校联考2015 9.19】C
- 从网络解析数据并实现三个界面的跳转