无侵入式设计的Loading — UIActivityIndicatorView

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

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

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哦。