JHUD - 一个加载时全屏显示的 HUD

1,473 阅读2分钟
原文链接: www.jianshu.com

前言

JHUD 是一个用于在加载数据时全屏显示的HUD,实现类似美团外卖加载数据时的效果,只是美团的骆驼帧图没有找到,便在 preloaders.net 找了个小齿轮当做CustomAnimations 来写了。

先发一波 JHUD 地址,请点 这里

结构

先来说说JHUD内的视图结构。


结构图

如图所示,

JHUD是一个继承于UIView的类,内部有三个子控件,由上至下分别为UIViewUILabelUIButton
子控件的frame采用代码约束的方式设置,详情见 UIView+JHUDAutoLayout 类。

JHUD提供了三种动画类型作为枚举,如下:

typedef NS_ENUM(NSUInteger, JHUDLoadingType) {

JHUDLoadingTypeCircle = 0,

JHUDLoadingTypeCircleJoin,

JHUDLoadingTypeDot,

JHUDLoadingTypeCustomAnimations,

JHUDLoadingTypeFailure,

};

前三种为动画由 JHUDLoadingAnimationView 这个类来实现,此类在show的时候加在三控件之一的UIView上,在需要显示的时候调用show方法指定显示其父视图和枚举类型即可。

使用如下:

self.hudView.messageLabel.text = @"Hello ,this is a circle animation";

[self.hudView showAtView:self.view hudType:JHUDLoadingTypeCircle];

见效果图:


Circle


CircleJoin


Dot

至于 JHUDLoadingTypeCustomAnimations 枚举则为自定义动画时使用,此动画是由UIImageView来展示的,UIImageView则是加在最上面三控件之一的UIView上,在展示前三种枚举动画的时候,此UIImageView是处于隐藏状态的。

使用时

需传入参数 customAnimationImages(NSArray) 为帧动画数组,如果动画大小不能满足的话,可以通过设置 indicatorViewSize(CGSize) 来改变大小。

使用如下所示:

NSMutableArray * images = [NSMutableArray array];

for (int index = 0; index<=19; index++) {

NSString * imageName = [NSString stringWithFormat:@"%d.png",index];

UIImage *image = [UIImage imageNamed:imageName];

[images addObject:image];

}

self.hudView.indicatorViewSize = CGSizeMake(60, 60);

self.hudView.customAnimationImages = images;

self.hudView.messageLabel.text = @"无人问我粥可温\n无人与我共黄昏";

[self.hudView showAtView:self.view hudType:JHUDLoadingTypeCustomAnimations];

效果如下图:


customAnimations

最后一个枚举 JHUDLoadingTypeFailure 使用的情景,可为数据获取失败或网络出现问题时使用。

使用方式如下:

self.hudView.indicatorViewSize = CGSizeMake(150, 150);

self.hudView.messageLabel.text = @"Failed to get data, please try again later";

[self.hudView.refreshButton setTitle:@"Refresh ?" forState:UIControlStateNormal];

self.hudView.customImage = [UIImage imageNamed:@"nullData"];

[self.hudView showAtView:self.view hudType:JHUDLoadingTypeFailure];

见效果图:


Failure


注意,indicatorViewSize 的值在前三种动画类型中是不允许改变的,因为动画的frame及轨迹都已定!

结尾

动画效果其实没有找着比较适合的,临时起意的动画参考 mark666 这位仁兄的,如果道友有更合适的动画的话,期待能够告诉我进行尝试实现。

附上 JHUD 源码地址 : github.com/jinxiansen/…

email: : hi@jinxiansen.com

若有不足之处,欢迎批评指正!