版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2017.05.28 |
前言
在我们的app项目中，为了增加和用户很好的交互能力，通常都需要加一些提示图，比如说，当我们需要网络加载数据的时候，首先要监测网络，如果网络断开的时候，我们需要提示用户；还有一个场景就是登陆的时候，需要提示用户正在登录中和登录成功；再比如清除用户的缓存数据成功的时候，也需要进行清除成功的提示的，等等。总之，用的场景很多，好的提示图可以增强和用户的交互体验，试想，如果没有网络，也不提示用户，用户还以为还在登录，过了一会还是上不去，那可能用户就疯掉了，怒删app了。最近做的几个项目中也是对这个要求的也很多，在实际应用中可以自己写，也可以使用第三方框架，比较知名的比如MBProgressHUD和SVProgressHUD，从这一篇开始我就一点一点的介绍它们以及它们的使用方法，希望对大家有所帮助，那我们就开始喽。先给出github地址：
MBProgressHUD github
感兴趣可以先看上一篇
1.提示图显示篇之MBProgressHUD（一）
2.提示图显示篇之MBProgressHUD（二）
3.提示图显示篇之MBProgressHUD（三）
这一篇将对MBProgreeHUD的绘制和显示隐藏进行介绍。
详情
一、绘制
-
- 背景视图的绘制
当我们设置好MBProgressHUD的属性等因素后，然后我们需要做的就是将它们渲染到屏幕上，就是我们看到的提示图了。
- (void)drawRect:(CGRect)rect
{
// 拿到当前的绘图上下文
CGContextRef context = UIGraphicsGetCurrentContext();
UIGraphicsPushContext(context);
// 默认中间的HUD外是透明的,可以看到父控件,设置了dimBackground这个属性可以让HUD周围是一个渐变色的背景.
// 这里用了一个渐变层,颜色是写死的
if (self.dimBackground) {
//Gradient colours
size_t gradLocationsNum = 2;
CGFloat gradLocations[2] = {0.0f, 1.0f};
CGFloat gradColors[8] = {0.0f,0.0f,0.0f,0.0f,0.0f,0.0f,0.0f,0.75f};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, gradColors, gradLocations, gradLocationsNum);
CGColorSpaceRelease(colorSpace);
//Gradient center
CGPoint gradCenter= CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
//Gradient radius
float gradRadius = MIN(self.bounds.size.width , self.bounds.size.height) ;
//Gradient draw
CGContextDrawRadialGradient (context, gradient, gradCenter,
0, gradCenter, gradRadius,
kCGGradientDrawsAfterEndLocation);
CGGradientRelease(gradient);
}
// 用户有设置颜色就使用设置的颜色,没有的话默认灰色
// 从下面代码可以看出,自定义HUD背景颜色是没有透明度的
if (self.color) {
CGContextSetFillColorWithColor(context, self.color.CGColor);
} else {
CGContextSetGrayFillColor(context, 0.0f, self.opacity);
}
CGRect allRect = self.bounds;
// 画出一个圆角的HUD
// size在layoutSubviews中被计算出来,是HUD的真实size
CGRect boxRect = CGRectMake(round((allRect.size.width - size.width) / 2) + self.xOffset,
round((allRect.size.height - size.height) / 2) + self.yOffset, size.width, size.height);
float radius = self.cornerRadius;
//开始绘制路径
CGContextBeginPath(context);
// 起始点
CGContextMoveToPoint(context, CGRectGetMinX(boxRect) + radius, CGRectGetMinY(boxRect));
// 依次画出右上角、右下角,左下角,左上角的四分之一圆弧
// 注意,虽然没有显式地调用CGContextAddLineToPoint函数
// 但绘制圆弧时每一次的起点都会和上一次的终点连接,生成线段
CGContextAddArc(context, CGRectGetMaxX(boxRect) - radius, CGRectGetMinY(boxRect) + radius, radius, 3 * (float)M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(boxRect) - radius, CGRectGetMaxY(boxRect) - radius, radius, 0, (float)M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect) + radius, CGRectGetMaxY(boxRect) - radius, radius, (float)M_PI / 2, (float)M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect) + radius, CGRectGetMinY(boxRect) + radius, radius, (float)M_PI, 3 * (float)M_PI / 2, 0);
CGContextClosePath(context);
CGContextFillPath(context);
UIGraphicsPopContext();
}
- 2.indicator的绘制
MBRoundProgressView的绘制
下面说一下圆形指示器的绘制。
当我们绘制路径时,描述的路径如果宽度大于1,描边的时候是向路径宽度是以路径为中点的。举个例子，如果从(0,0)向(100,0)画一条宽度为X的线,那么显示的宽度实际只有X/2，因为还有一半因为超出了绘图区域而没有被绘制。为了防止绘制内容的丢失，半径radius的计算是(self.bounds.size.width - lineWidth)/2，而并不是self.bounds.size.width/2，更不是(self.bounds.size.width -2*lineWidth)/2。
看下面的代码
// 圆环绘制
if (_annular) {
// iOS7.0以后的圆环描边风格变了,变成了2.f
// 7.0之前的还是5.f.主要是为了迎合扁平的风格我觉得
BOOL isPreiOS7 = kCFCoreFoundationVersionNumber < kCFCoreFoundationVersionNumber_iOS_7_0;
CGFloat lineWidth = isPreiOS7 ? 5.f : 2.f;
......
CGFloat radius = (self.bounds.size.width - lineWidth)/2;
}
MBBarProgressView的绘制
MBBarProgressView与MBRoundProgressView的绘制类似，都是使用Quartz2D进行绘图。
看下面的代码
.....
// Draw background
float radius = (rect.size.height / 2) - 2;
CGContextMoveToPoint(context, 2, rect.size.height/2);
CGContextAddArcToPoint(context, 2, 2, radius + 2, 2, radius);
//CGContextAddLineToPoint(context, rect.size.width - radius - 2, 2);
CGContextAddArcToPoint(context, rect.size.width - 2, 2, rect.size.width - 2, rect.size.height / 2, radius);
CGContextAddArcToPoint(context, rect.size.width - 2, rect.size.height - 2, rect.size.width - radius - 2, rect.size.height - 2, radius);
//CGContextAddLineToPoint(context, radius + 2, rect.size.height - 2);
CGContextAddArcToPoint(context, 2, rect.size.height - 2, 2, rect.size.height/2, radius);
CGContextFillPath(context);
二、视图的显示和隐藏
- 显示
显示的实现代码可以参考下面：
- (void)showWhileExecuting:(SEL)method onTarget:(id)target withObject:(id)object animated:(BOOL)animated
{
methodForExecution = method;
// 对于MRC来说,要保留target和object对象
// ARC会自动保留这两个对象
// 不管是ARC还是MRC,都要注意引用循环的问题,因此下面有个-cleanUp方法用来释放强引用
targetForExecution = MB_RETAIN(target);
objectForExecution = MB_RETAIN(object);
self.taskInProgress = YES;
// detachNewThreadSelector是NSThread的类方法,开启一个子线程执行任务,线程默认start
[NSThread detachNewThreadSelector:@selector(launchExecution) toTarget:self withObject:nil];
// Show HUD view
[self show:animated];
}
- (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block onQueue:(dispatch_queue_t)queue
completionBlock:(MBProgressHUDCompletionBlock)completion
{
// 标记任务标识
self.taskInProgress = YES;
// 将block先引用起来,在隐藏完之后执行block
self.completionBlock = completion;
// 在队列上异步执行,更新UI在主线程进行
dispatch_async(queue, ^(void) {
block();
dispatch_async(dispatch_get_main_queue(), ^(void) {
// 方法中有隐藏HUD这一更新UI的操作
[self cleanUp];
});
});
// 在任务执行的过程中进行动画
[self show:animated];
}
- (void)launchExecution
{
// 对于多线程操作建议把线程操作放到@autoreleasepool中
@autoreleasepool {
// 忽略警告的编译器指令
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
// 究其原因,编译期时编译器并不知道methodForExecution是什么
// ARC的内存管理是建立在规范的命名规则之上的,不知道方法名是什么就不知道如何处理返回值
// 如果该方法有返回值,就不知道返回值是加入了自动释放池的还是需要ARC释放的对象
// 因此ARC不对返回值执行任何操作,如果返回值并不是加入自动释放池的对象,这时就内存泄露了
[targetForExecution performSelector:methodForExecution withObject:objectForExecution];
#pragma clang diagnostic pop
[self performSelectorOnMainThread:@selector(cleanUp) withObject:nil waitUntilDone:NO];
}
}
- (void)cleanUp
{
// 任务标识重置
taskInProgress = NO;
#if !__has_feature(objc_arc)
[targetForExecution release];
[objectForExecution release];
#else
targetForExecution = nil;
objectForExecution = nil;
#endif
[self hide:useAnimation];
}
这里，taskInProgress的意思要结合graceTime来看，graceTime是为了防止hud只显示很短时间(一闪而过)的情况，给用户设定的一个属性，如果任务在graceTime内完成，将不会showhud。所以graceTime这个属性离开了赋给hud的任务就没意义了，因此，taskInProgress用来标识是否带有执行的任务。
- (void)handleGraceTimer:(NSTimer *)theTimer
{
// 如果没有任务,设置了graceTime也没有意义
if (taskInProgress) {
[self showUsingAnimation:useAnimation];
}
}
值得注意的是，通过showWhileExecuting:onTarget:withObject:animated:等方法时，会自动将taskInProgress置为yes，其他情况(任务所在的线程不是由hud内部所创建的)需手动设置这个属性。
- (void)show:(BOOL)animated
{
......
// 进行self.graceTime的延时之后,才调用handleGraceTimer:显示hud
// 如果没到时间就执行完了,那么完成任务调用的done方法会把taskInProgress设为NO,那么就不会显示hud了
if (self.graceTime > 0.0) {
NSTimer *newGraceTimer = [NSTimer timerWithTimeInterval:self.graceTime target:self selector:@selector(handleGraceTimer:) userInfo:nil repeats:NO];
[[NSRunLoop currentRunLoop] addTimer:newGraceTimer forMode:NSRunLoopCommonModes];
self.graceTimer = newGraceTimer;
}
......
}
- 隐藏
下面是隐藏实现的代码逻辑。
- (void)hide:(BOOL)animated afterDelay:(NSTimeInterval)delay
{
[self performSelector:@selector(hideDelayed:) withObject:[NSNumber numberWithBool:animated] afterDelay:delay];
}
- (void)hideDelayed:(NSNumber *)animated
{
[self hide:[animated boolValue]];
}
- (void)hide:(BOOL)animated
{
NSAssert([NSThread isMainThread], @"MBProgressHUD needs to be accessed on the main thread.");
useAnimation = animated;
// 设置一个最短的显示时间
// showStarted在显示的时候被设置了,用当前的时间算出距离showStarted过了多少时间
// 得出interv.如果没有达到minShowTimer所要求的时间,就开启定时器等待到指定的最短时间
if (self.minShowTime > 0.0 && showStarted) {
NSTimeInterval interv = [[NSDate date] timeIntervalSinceDate:showStarted];
if (interv < self.minShowTime) {
self.minShowTimer = [NSTimer scheduledTimerWithTimeInterval:(self.minShowTime - interv) target:self
selector:@selector(handleMinShowTimer:) userInfo:nil repeats:NO];
return;
}
}
// ... otherwise hide the HUD immediately
[self hideUsingAnimation:useAnimation];
}
参考文章和博客
1. 源码笔记---MBProgressHUD
后记
这里主要写的的绘制原理以及显示隐藏的代码实现，后面还会深入的举例说明MBProgressHUD的使用方法，希望对大家有所帮助，谢谢大家~~~
端午快乐！