DMProgressHUD

iOS进度加载提示工具
授权协议 MIT
开发语言 Objective-C
所属分类 iOS代码库、 进度条(Progress)
软件类型 开源软件
地区 国产
投 递 者 赵征
操作系统 iOS
开源组织
适用人群 未知
 软件概览

一、简介

DMProgressHUD是一款用于显示异步操作任务进度状态的视图工具。
该工具包含了目前较为主流的加载状态视图类型,后续会根据具体情况或需求进行迭代。
DMProgressHUD从设计层次的角度来看,其包含了5种展示模式:

  1. Loading(加载中相关);

  2. Progress(进度具体值相关);

  3. Status(状态相关,例如成功、失败等提示);

  4. Text(文字提示相关);

  5. Custom(自定义视图相关)。

二、导入(Platform : ios >= 8.0)

方案1:CocoaPods

  1. 在Podfile文件加入 pod 'DMProgressHUD';

  2. 在终端输入 pod install;

  3. 在需要使用的地方导入头文件 #import <DMProgressHUD.h>

方案2:直接导入到工程

  1. 把DMProgressHUD.h、DMProgressHUD.m和DMProgressImgs.bundle(图片资源bundle)导入到工程目录下;

  2. 在需要使用的地方导入头文件 #import "DMProgressHUD.h"

三、快捷调用

注意:快捷调用使用默认的样式(Style-Dark)、动画(Animation-gradient)、遮盖(Mask-None)。

1.Loading Mode

1.1 Loading-Indicator

loading_indicator.gif

    DMProgressHUD *hud = [DMProgressHUD showLoadingHUDAddedTo:self.view];
    //hud.loadingType = DMProgressHUDLoadingTypeIndicator;//默认
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

1.2 Loading-Circle

loading_circle_.gif

    DMProgressHUD *hud = [DMProgressHUD showLoadingHUDAddedTo:self.view];
    hud.loadingType = DMProgressHUDLoadingTypeCircle;
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

2.Progress Mode

2.1 Progress-Circle

progress_circle.gif

    DMProgressHUD *hud = [DMProgressHUD showProgressHUDAddedTo:self.view];
    //hud.progressType = DMProgressHUDProgressTypeCircle;//默认
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

2.2 Progress-Sector

progress_sector.gif

    DMProgressHUD *hud = [DMProgressHUD showProgressHUDAddedTo:self.view];
    hud.progressType = DMProgressHUDProgressTypeSector;
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

3.Status Mode

3.1 Success

status_success.gif

    DMProgressHUD *hud = [DMProgressHUD showStatusHUDAddedTo:self.view statusType:DMProgressHUDStatusTypeSuccess];
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

3.2 Fail

status_fail.gif

    DMProgressHUD *hud = [DMProgressHUD showStatusHUDAddedTo:self.view statusType:DMProgressHUDStatusTypeFail];
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

3.3 Warning

status_warning.gif

    DMProgressHUD *hud = [DMProgressHUD showStatusHUDAddedTo:self.view statusType:DMProgressHUDStatusTypeWarning];
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

4.Text Mode

4.1 Text

text.gif

    DMProgressHUD *hud = [DMProgressHUD showTextHUDAddedTo:self.view];
    hud.text = @"Here's info";
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

5.Custom Mode

5.1 Custom

custom.gif

    DMProgressHUD *hud = [DMProgressHUD showHUDAddedTo:self.view];
    hud.mode = DMProgressHUDModeCustom;//指定模式为自定义模式
    hud.text = @"Here's info";
    UIView *custom = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"person"]];
    [hud setCustomView:custom width:180.0 height:180.0];//自定义View
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        //异步耗时操作
        [self doSomething];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            //返回主线程隐藏HUD
            [hud dismiss];
        });
    });

四、更多

  1. 关于调用:DMProgressHUD为调用者提供了快捷调用的方法,另外还提供了一些与额外功能相关的初始化方法供调用者使用;

  2. 关于外观:DMProgressHUD提供两种外观样式,对应分别是Dark/Light;

  3. 关于动画:DMProgressHUD默认使用颜色渐变(alpha)动画进行显示/隐藏,另外还有增量式动画和弹性动画供使用者选择;

  4. 关于遮盖:DMProgressHUD默认不使用遮盖,另外提供透明遮盖和灰色遮盖供使用者选择;

以上所列举关于DMProgressHUD的功能介绍,用户都可以 运行Demo 查看到相应的效果。除此之外,用户还可以对HUD的 图文间距、颜色等 进行自定义,可以在 DMProgressHUD.h 文件查看更多的API详细介绍。

由于时间仓促,本人技术水平有限,出现错误或疏漏之处请批评指正,也可以在下方留言或发送Email至damonmok1216@gmail.com

Github地址:DMProgressHUD

 相关资料
  • 该站点有带有动态内容的工具提示的链接。我正在使用jquery UI工具提示来显示它们。我不希望每次用户不小心将光标放在链接上时,都显示工具提示。我想要显示工具提示只有当它延迟光标在链接上几秒钟。这应该像Gmail一样,当你悬停在发件人的名字上时,你会看到关于他的信息(见图)。 我需要工具提示,用户可以与之交互,所以我使用了这段代码(感谢Antonimo https://stackoverflow.

  • ap.showLoading(OPTION | content) 显示加载提示。可直接传入一个字符串作为 OPTION.content 参数。 OPTION 参数说明 名称 类型 必填 描述 content String 否 loading 的文字提示 delay Number 否 延迟显示,单位 ms,默认 0。如果在此时间之前调用了 ap.hideLoading 则不会显示 代码示例 <scr

  • 问题内容: 当使用AngularJS并使用新页面进行重定向时,加载会花费一些时间,尤其是在移动设备上。 有没有一种方法可以添加进度条进行加载?也许像YouTube这样的东西? 问题答案: 对于YouTube一样的进度条,您可以查看ngprogress。然后,例如,在配置好应用程序之后,您就可以拦截route的events。 并执行类似的操作:

  • 我正在使用tippy.js生成工具提示。一切都很好,但我有分配的工具提示每个不同的图像内容加载。为了减少加载时间,我想在工具提示可见时将图像延迟加载到apear。 我知道tippy.js有一个内置函数来调用AJAX内容(https://atomiks.github.io/tippyjs/ajax/)-但是我想要加载的内容是超文本标记语言,我不想为每个工具提示编写单独的javascript。理想情况

  • 嗨,我是一名移动应用程序开发人员,对Web开发不太熟悉,我正在寻找在加载像Gmail加载屏幕这样的flutter Web应用程序之前实现进度指示器的任何方法。Flutter web很酷,但在加载应用程序之前需要几分钟。我们可以为此加载持续时间添加任何指标吗?在flutter中实现的任何代码都将是flutter应用程序的一部分,它不起作用,应该有另一种方法来实现这一点。

  • ap.hideLoading() 隐藏加载提示。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">showLoading</button> <script>

  • 如果这看起来微不足道,我道歉。 我一直致力于我的第一个Android应用程序,并想就实现加载/飞溅屏幕附加的最佳方式提出建议。 我的设计师提出的是加载/启动屏幕,我不知道如何实现这一点。 我是否要求设计师创建一个。gif图像我可以直接播放或 请注意,自行车从左侧开始,然后继续向右行驶,带有进度指示器和百分比。 选项2是否可行?如果可以,请您给我指一下我可以用作指导的任何资源。 谢谢

  • 我想在我的模型中使用“reason”属性为添加一个工具提示。我该怎么做?