美文网首页
无侵入式设计的Loading — UIActivityIndic

无侵入式设计的Loading — UIActivityIndic

作者: isletn | 来源:发表于2017-06-12 16:07 被阅读0次

从iOS系统的迭代更新可以看出,无侵入式设计已经成为好的用户体验趋势。而数据加载等耗时操作,通常需要一个Loading来提示用户:“正在加载,请稍等”。那么今天给大家介绍一个自己封装的无侵入式Loading。

目前较普遍的Loading方式,都是使用“Toast”形式的View,也就是在当前界面覆盖一层LoadingView,个人觉得这跟弹窗一样影响用户体验,当然,GitHub上有不少优秀的库用于数据加载时的Loading,已经做的非常美观了。比如SVProgressHUDMBProgressHUD等等,大家可以试试。

SVProgressHUD示例图.png

而今天的重点,我想说说UIActivityIndicatorView,这个原生的加载视图,我们一般叫它——菊花。而这个视图在iOS系统应用中备受青睐。

选取网络-loading.png

类似加载就不一一列举了。这种设计,在视觉体验上毫无突兀感,加载视图的位置也恰好的体现了正在加载的内容,不得不说这样的设计在用户体验上做的很出色。


OK,让我们进入正题,自己封装一个UIActivityIndicatorView用于数据加载等耗时操作。

我们以NavigationBar上面的Loading为列:

  • 首先,我们创建一个UIViewController的分类;
Activity.png
  • 接下来,我们需要覆盖self.navigationItem.titleView,因为菊花在NavigationBar上面嘛;
    //创建一个custom titleView
    UIView *customTitleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame) - 4 * kSpacing - 2 * kBarItemWidth , kTitleViewHeight)];

    //custom titleLabel
    UILabel *titleLabel = [[UILabel alloc] init];
    titleLabel.textColor = [UIColor whiteColor];
    titleLabel.font = [UIFont systemFontOfSize:kNavigationTitleFontSize];
    titleLabel.text = self.title;
    [customTitleView addSubview:titleLabel];
    [titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(customTitleView);
        make.height.equalTo(customTitleView);
    }];

    //Activity
    UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
    [customTitleView addSubview:activity];
    [activity mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(customTitleView);
        make.trailing.equalTo(titleLabel.mas_leading).offset(-10);
    }];
    self.navigationItem.titleView = customTitleView;

    //开始Loading
    [activity startAnimating];
  • 因为我们需要手动控制UIActivityIndicatorView的开始于暂停,所以activity需要成为一个全局属性;
  objc_setAssociatedObject(self, &kActivityIndicatorViewKey, activity, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
  • 所以,开始加载,完整的方法是这样的:
  - (UIActivityIndicatorView *)navigationActivity {
    
    UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
    UIView *customTitleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame) - 4 * kSpacing - 2 * kBarItemWidth , kTitleViewHeight)];
    UILabel *titleLabel = [[UILabel alloc] init];
    titleLabel.textColor = [UIColor whiteColor];
    titleLabel.font = [UIFont systemFontOfSize:kNavigationTitleFontSize];
    titleLabel.text = self.title;
    [customTitleView addSubview:titleLabel];
    [titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(customTitleView);
        make.height.equalTo(customTitleView);
    }];
    [customTitleView addSubview:activity];
    [activity mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(customTitleView);
        make.trailing.equalTo(titleLabel.mas_leading).offset(-10);
    }];
    self.navigationItem.titleView = customTitleView;
    [activity startAnimating];
    objc_setAssociatedObject(self, &kActivityIndicatorViewKey, activity, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    
    return activity;
}
  • 最后,数据加载完成,停止Loading.
  - (void)hidenActivity {
    UIActivityIndicatorView *activity = objc_getAssociatedObject(self, &kActivityIndicatorViewKey);
    [activity stopAnimating];
}
  • 有的时候,我们需要知道Loading的状态,那么实现下面的方法:
 - (BOOL)isActivity {
    UIActivityIndicatorView *activity = objc_getAssociatedObject(self, &kActivityIndicatorViewKey);
    return activity.isAnimating;
}

OK, 我们在ViewController中调用,跑一下试试;

 - (void)viewDidLoad {
    [super viewDidLoad];

    [self navigationActivity];
}
Loading.png

其他形式的Loading

image.png
image.png

最后附上代码
NLActivity
Swift版本
觉得有还行的话帮忙给个star哦。

相关文章

  • 无侵入式设计的Loading — UIActivityIndic

    从iOS系统的迭代更新可以看出,无侵入式设计已经成为好的用户体验趋势。而数据加载等耗时操作,通常需要一个Loadi...

  • Android无侵入式引导提示-一键式启动

    git地址 安卓无侵入式引导提示-NoviceGuide 优点 代码无侵入式,不需要处理原来的布局以及逻辑,只要在...

  • Spring 核心 : IOC 处理器扩展

    非侵入式框架 Spring一直标注自己是一个非侵入式框架。非侵入式设计的概念并不新鲜,目标就是降低使用者和框架代码...

  • Spring核心——IOC处理器扩展

    非侵入式框架 Spring一直标注自己是一个非侵入式框架。非侵入式设计的概念并不新鲜,目标就是降低使用者和框架代码...

  • Spring初步学习(一)

    spring的特点为:轻量级,无侵入式设计功能模块:test:提供单元测试的支持core container:IO...

  • spring框架的优势

    Spring框架的优点 1、非侵入式设计 Spring是一种非侵入式(non-invasive)框架,它可以使应用...

  • 分布式性能监控工具

    1.zipkin 2.pinpoint,无侵入式

  • 无侵入式工具 - SmartTool

    前言 开发过程中,通过日志,AS等工具查看网络,异常等信息总是感觉不太方便,于是萌发了开发个更好用的工具的想法。要...

  • 01. struts2介绍

    struts2优点 与Servlet API 耦合性低。无侵入式设计 提供了拦截器,利用拦截器可以进行AOP编程,...

  • Boost侵入式容器设计

    此篇博客的目标: 1.解释何为boost侵入式容器 2.利用boost侵入式容器实现根据不同变量做键来进行排序 一...

网友评论

      本文标题:无侵入式设计的Loading — UIActivityIndic

      本文链接:https://www.haomeiwen.com/subject/cjylqxtx.html