MBProgressHUD是一个显示提示窗口的三方库,常用于用户交互、后台耗时操作等的提示。通过显示一个提示框,通知用户操作或任务的执行状态;同时,利用动画效果,降低用户等待的焦虑心理,增强用户体验。

本篇文章从源码角度来看一下MBProgressHUD是如何实现的,所用的知识都是比较基础的,不过还是值得我们学习一下。详解如下:

1. 类介绍

  • MBProgressHUD

    这是MBProgressHUD的主要类,提供丰富的属性来调整视图的样式。
  • MBRoundProgressView

    这是提供Determinate视图显示的类,有非圆环和圆环视图两种方式。
  • MBBarProgressView

    这是提供进度条的视图类。
  • MBBackgroundView

    这是MBProgressHUD的背景视图类,利用UIVisualEffectView提供毛玻璃效果

2. MBProgressHUD类的显示模式

  • MBProgressHUDModeIndeterminate

![Indeterminate](//upload-images.jianshu.io/upload_images/1843940-7d2ced265a958ace.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • MBProgressHUDModeDeterminate

![Determinate](//upload-images.jianshu.io/upload_images/1843940-0729bfea6d1ffb75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • MBProgressHUDModeDeterminateHorizontalBar

![DeterminateHorizontalBar](//upload-images.jianshu.io/upload_images/1843940-24816377417a2ade.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • MBProgressHUDModeAnnularDeterminate

![AnnularDeterminate](//upload-images.jianshu.io/upload_images/1843940-37b8afa115eb5fe8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • MBProgressHUDModeCustomView

这是自定义视图

  • MBProgressHUDModeText

![Text](//upload-images.jianshu.io/upload_images/1843940-ca92d0d489e9c287.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3.动画模式

  • MBProgressHUDAnimationFade : 渐变模式
  • MBProgressHUDAnimationZoom : Zoom In & Zoom Out
  • MBProgressHUDAnimationZoomOut : 消失时带变小动画
  • MBProgressHUDAnimationZoomIn : 出现时带变大动画

4. 背景样式

  • MBProgressHUDBackgroundStyleSolidColor : 正常颜色
  • MBProgressHUDBackgroundStyleBlur : 毛玻璃效果

5. 视图内容

  • @property (strong, nonatomic, readonly) UILabel *label; : 标题
  • @property (strong, nonatomic, readonly) UILabel *detailsLabel; :详情
  • @property (strong, nonatomic, readonly) UIButton *button : 按钮(显示在标题下方)
  • @property (strong, nonatomic, nullable) UIView *customView; :用户自定义视图
  • @property (strong, nonatomic, readonly) MBBackgroundView *backgroundView; : 整个背景视图
  • @property (strong, nonatomic, readonly) MBBackgroundView *bezelView; :提示框背景视图
  • @property (strong, nonatomic, nullable) UIColor *contentColor UI_APPEARANCE_SELECTOR; : 提示框的内容颜色
  • @property (assign, nonatomic) CGPoint offset UI_APPEARANCE_SELECTOR; :提示框相对父视图中心点的偏移量
  • @property (assign, nonatomic) CGFloat margin UI_APPEARANCE_SELECTOR; :提示框内的内容视图的边距
  • @property (assign, nonatomic) CGSize minSize UI_APPEARANCE_SELECTOR; :提示框最小尺寸
  • @property (assign, nonatomic) BOOL removeFromSuperViewOnHide; :隐藏时从父视图中删除
  • @property (assign, nonatomic) NSTimeInterval graceTime; :延迟多久后显示提示框,避免快速执行的任务也显示提示框,给用户造成视觉干扰。
  • @property (assign, nonatomic) NSTimeInterval minShowTime; :提示框视图最少展示的时间

6. 创建和隐藏视图

  • 创建流程

    通过 + (instancetype)showHUDAddedTo:(UIView *)view animated:(BOOL)animated 类方法创建视图,也可以通过对象方法创建,不过建议用类方法,不仅创建方便,而且会自动的添加到父视图,然后进行显示。其中,创建过程如下:
  1. - (void)commonInit {
  2. // Set default values for properties
  3. _animationType = MBProgressHUDAnimationFade;
  4. _mode = MBProgressHUDModeIndeterminate;
  5. _margin = 20.0f;
  6. _opacity = 1.f;
  7. _defaultMotionEffectsEnabled = YES;
  8. // Default color, depending on the current iOS version
  9. BOOL isLegacy = kCFCoreFoundationVersionNumber < kCFCoreFoundationVersionNumber_iOS_7_0;
  10. _contentColor = isLegacy ? [UIColor whiteColor] : [UIColor colorWithWhite:0.f alpha:0.7f];
  11. // Transparent background self.opaque = NO;
  12. self.backgroundColor = [UIColor clearColor];
  13. // Make it invisible for now self.alpha = 0.0f;
  14. self.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; self.layer.allowsGroupOpacity = NO;
  15. [self setupViews]; [self updateIndicators];
  16. [self registerForNotifications];
  17. }

我们可以发现,通过添加子空间后,根据视图模式调用updateIndicators 方法来创建不同的视图,最后添加了一个状态栏的通知,用来在横竖屏时跳转视图。其中,在显示提示框时,会首先判断graceTime,如过不为0,那么就创建一个定时器倒计时,时间到之后再判断任务是否结束,如果finished 不为空,就开始显示提示框。

  1. - (void)showAnimated:(BOOL)animated {
  2. MBMainThreadAssert();
  3. [self.minShowTimer invalidate];
  4. self.useAnimation = animated;
  5. self.finished = NO;
  6. // If the grace time is set, postpone the HUD display
  7. if (self.graceTime > 0.0) {
  8. NSTimer *timer = [NSTimer timerWithTimeInterval:self.graceTime target:self selector:@selector(handleGraceTimer:) userInfo:nil repeats:NO];
  9. [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
  10. self.graceTimer = timer;
  11. }
  12. // ... otherwise show the HUD immediately
  13. else {
  14. [self showUsingAnimation:self.useAnimation];
  15. }
  16. }
  1. - (void)handleGraceTimer:(NSTimer *)theTimer
  2. {
  3. // Show the HUD only if the task is still running
  4. if (!self.hasFinished) {
  5. [self showUsingAnimation:self.useAnimation];
  6. }
  7. }
  • 隐藏视图 通过 + (BOOL)hideHUDForView:(UIView *)view animated:(BOOL)animated 隐藏视图,其中会根据minShowTime来判断是否立即隐藏提示框。如果,minShowTime 不为0,那么会创建一个定时器,并把定时器加入到common模式的runloop里,等时间到后再把提示框隐藏。
  1. - (void)hideAnimated:(BOOL)animated
  2. {
  3. MBMainThreadAssert();
  4. [self.graceTimer invalidate];
  5. self.useAnimation = animated;
  6. self.finished = YES;
  7. // If the minShow time is set, calculate how long the HUD was shown,
  8. // and postpone the hiding operation if necessary
  9. if (self.minShowTime > 0.0 && self.showStarted) {
  10. NSTimeInterval interv = [[NSDate date] timeIntervalSinceDate:self.showStarted];
  11. if (interv < self.minShowTime) {
  12. NSTimer *timer = [NSTimer timerWithTimeInterval:(self.minShowTime - interv) target:self selector:@selector(handleMinShowTimer:) userInfo:nil repeats:NO];
  13. [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
  14. self.minShowTimer = timer;
  15. return;
  16. }
  17. }
  18. // ... otherwise hide the HUD immediately
  19. [self hideUsingAnimation:self.useAnimation];
  20. }

7. MBRoundProgressView 和 MBBarProgressView

这两个类,分别创建了 Determinate 和 进度条 的提示框视图,具体实现方法是在 - (void)drawRect:(CGRect)rect 方法里通过 UIBezierPath 或者 Quarts2D 画出,设计思想算是常规,请参考代码细读。

8. MBProgressHUD应用

对于三方框架,使用之前,最好先封装一层(继承或分类),方便以后的调试和新框架替换。封装时,尽量用类方法,使用时比较简洁。

  • 添加提示框
  1. + (void)showHUDWithText:(NSString *)text inView:(UIView *)view deley:(NSTimeInterval)time
  2. {
  3. if (text == nil || text.length <= 0) {
  4. return;
  5. }
  6. if (view == nil) {
  7. view = [[UIApplication sharedApplication].windows lastObject];
  8. }
  9. MBProgressHUD *HUD = [MBProgressHUD showHUDAddedTo:view animated:YES];
  10. HUD.mode = MBProgressHUDModeText;
  11. [HUD hideAnimated:YES afterDelay:1.5];
  12. }
  • 隐藏提示框 (改方法调用时,最好在主线程,异步线程可能会出现问题)
  1. + (void)hideHUDForView:(UIView *)view
  2. {
  3. if (view == nil) view = [[UIApplication sharedApplication].windows lastObject];
  4. [self hideHUDForView:view animated:YES];
  5. }

参考资料

https://github.com/jdg/MBProgressHUD

MBProgressHUD1.0.0源码解析的更多相关文章

  1. Masonry1.0.2 源码解析

    在了解Masonry框架之前,有必要先了解一下自动布局的概念.在iOS6之前,UI布局的方式是通过frame属性和Autoresizing来完成的,而在iOS6之后,苹果公司推出了AutoLayout ...

  2. SpringBoot 2.0.3 源码解析

    前言 用SpringBoot也有很长一段时间了,一直是底层使用者,没有研究过其到底是怎么运行的,借此机会今天试着将源码读一下,在此记录...我这里使用的SpringBoot 版本是  2.0.3.RE ...

  3. YYModel V1.0.4源码解析

    YYKit出现了很长时间了,一直想要详细解析一下它的源码,都是各种缘由推迟了. 最近稍微闲了一点,决定先从最简单的YYModel开始吧. 首先,我也先去搜索了一下YYModel相关的文章,解析主要AP ...

  4. 【JUC源码解析】CyclicBarrier

    简介 CyclicBarrier,一个同步器,允许多个线程相互等待,直到达到一个公共屏障点. 概述 CyclicBarrier支持一个可选的 Runnable 命令,在一组线程中的最后一个线程到达之后 ...

  5. Redis系列(十):数据结构Set源码解析和SADD、SINTER、SDIFF、SUNION、SPOP命令

    1.介绍 Hash是以K->V形式存储,而Set则是K存储,空间节省了很多 Redis中Set是String类型的无序集合:集合成员是唯一的. 这就意味着集合中不能出现重复的数据.可根据应用场景 ...

  6. ArrayList、CopyOnWriteArrayList源码解析(JDK1.8)

    本篇文章主要是学习后的知识记录,存在不足,或许不够深入,还请谅解. 目录 ArrayList源码解析 ArrayList中的变量 ArrayList构造函数 ArrayList中的add方法 Arra ...

  7. EventBus3.0源码解析

    本文主要介绍EventBus3.0的源码 EventBus是一个Android事件发布/订阅框架,通过解耦发布者和订阅者简化 Android 事件传递. EventBus使用简单,并将事件发布和订阅充 ...

  8. solr&lucene3.6.0源码解析(四)

    本文要描述的是solr的查询插件,该查询插件目的用于生成Lucene的查询Query,类似于查询条件表达式,与solr查询插件相关UML类图如下: 如果我们强行将上面的类图纳入某种设计模式语言的话,本 ...

  9. solr&lucene3.6.0源码解析(三)

    solr索引操作(包括新增 更新 删除 提交 合并等)相关UML图如下 从上面的类图我们可以发现,其中体现了工厂方法模式及责任链模式的运用 UpdateRequestProcessor相当于责任链模式 ...

  10. Heritrix 3.1.0 源码解析(三十七)

    今天有兴趣重新看了一下heritrix3.1.0系统里面的线程池源码,heritrix系统没有采用java的cocurrency包里面的并发框架,而是采用了线程组ThreadGroup类来实现线程池的 ...

随机推荐

  1. 如何编写高效的SQL

    编写高效的sql可以给用户带来好的体验,需要开发这没有意识到这一点因为他们不关心也不知道怎么做.高效的sql可以给用户节省很多时间,这样就不需要dba来找上门,也不需要搭建RCA和性能调优. 性能不好 ...

  2. tp框架---View视图层---模板继承(举例说明)

    当我们做动态页面时,我们会发现一个网站的头部和尾部是相同的,那么我们如何用tp框架来做模板呢 ? 先看一下注意事项: (1)每个区块由<block></block>标签组成 ( ...

  3. PHP源码阅读strtr

    strtr 转换字符串中特定的字符,但是这个函数使用的方式多种. echo strtr('hello world', 'hw', 'ab'); // 第一种 aello borld echo strt ...

  4. dashDB - Introduction and DB Tools

    dashDB - Introduction dashDB is a database that is designed for performance and scale. It offers sea ...

  5. Jenkins+Git配置

    Jenkins+Git配置 一.GitHub上配置 前提:Jenkins能正常打开 将本地文件上传到GitHub上:进入终端 cd Documents cd project git clone htt ...

  6. Css绘制形状

    前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...

  7. 如何共享数据?- 每天5分钟玩转 Docker 容器技术(41)

    数据共享是 volume 的关键特性,本节我们详细讨论通过 volume 如何在容器与 host 之间,容器与容器之间共享数据. 容器与 host 共享数据 我们有两种类型的 data volume, ...

  8. 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结

    XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...

  9. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  10. [luogu P1967][NOIp2013] 货车运输

    题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情况下,最多 ...