引述
我们在使用淘宝的时候,在我的订单页面,如果没有相应的订单状态,会有相应的提示,如下图为淘宝无订单时候的页面显示
其实,在我们整个的iOS开发过程中,不止这里会用到,当我们任何一个页面再没有数据时候都会有一个提示页,增加用户体验。于是本人对齐进行了封装,真正做到了哪里用到哪里调,简单的一行代码就可以完成这个效果。
DWQEmptyView
每个人的实现方式不同,我是通过为UIvew添加分类,结合Runtime动态添加属性的方法实现空白视图效果的。实现原理主要点
- 1.在UIView分类的 .m 文件中关联对象(动态添加属性)
//DWQErrorPageView
- (void)setErrorPageView:(DWQErrorPageView *)errorPageView{
[self willChangeValueForKey:NSStringFromSelector(@selector(errorPageView))];
objc_setAssociatedObject(self, @selector(errorPageView), errorPageView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self didChangeValueForKey:NSStringFromSelector(@selector(errorPageView))];
}
- (DWQErrorPageView *)errorPageView{
return objc_getAssociatedObject(self, _cmd);
}
ruantime方法介绍
objc_setAssociatedObject(id object, const void *key, id value, objc_AssociationPolicy policy)
id object : 表示关联者,是一个对象
const void key: 获取被关联者的索引key
id value : 被关联者
objc_AssociationPolicy policy : 关联时采用的协议,有assign,retain,copy等协议,一般使用OBJC_ASSOCIATION_RETAIN_NONATOMIC
- 2.创建空白视图
- (instancetype)init{
return [self initWithFrame:CGRectZero];
}
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor whiteColor];
UIImageView* errorImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"DWQBlankPage"]];
_errorImageView = errorImageView;
[self addSubview:_errorImageView];
UILabel* errorTipLabel = [[UILabel alloc]init];
errorTipLabel.numberOfLines = 1;
errorTipLabel.font = [UIFont systemFontOfSize:16];
errorTipLabel.textAlignment = NSTextAlignmentCenter;
errorTipLabel.textColor = [UIColor darkGrayColor];
errorTipLabel.text = @"杜文全提醒:您的网络在开小差哦~";
_errorTipLabel = errorTipLabel;
[self addSubview:_errorTipLabel];
UIButton* reloadButton = [UIButton buttonWithType:UIButtonTypeCustom];
reloadButton.layer.masksToBounds = YES;
reloadButton.layer.cornerRadius = 20;
[reloadButton setTitle:@" 点击刷新" forState:UIControlStateNormal];
reloadButton.titleLabel.font =[UIFont systemFontOfSize:15];
[reloadButton setImage:[UIImage imageNamed:@"DWQupdate" ] forState:UIControlStateNormal];
reloadButton.backgroundColor = [UIColor lightGrayColor];
[reloadButton addTarget:self action:@selector(_clickReloadButton:) forControlEvents:UIControlEventTouchUpInside];
_reloadButton = reloadButton;
[self addSubview:_reloadButton];
[_errorImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self);
make.centerY.equalTo(self.mas_centerY).offset(-30);
}];
[_errorTipLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self);
make.height.equalTo(@20);
make.top.equalTo(_errorImageView.mas_bottom);
}];
[_reloadButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(LSCREENW-60);
make.height.mas_equalTo(40);
make.centerX.equalTo(self);
make.bottom.equalTo(self.mas_bottom).offset(-30);
}];
}
return self;
}
- 3.点击按钮刷新的实现,也是通过Runtime动态添加block属性来实现
- (DWQErrorPageView *)errorPageView{
return objc_getAssociatedObject(self, _cmd);
}
- (void)configReloadAction:(void (^)())block{
self.reloadAction = block;
if (self.errorPageView && self.reloadAction) {
self.errorPageView.didClickReloadBlock = self.reloadAction;
}
}
使用方法
1.在需要使用的控制器或者PCH文件中引入头文件
#import "UIView+DWQEmptyView.h"
2.使用self.view 调用方法,代码示例如下:
// //如果无网络
// [self.view showErrorPageView];
// [self.view configReloadAction:^{
// NSLog(@"点击我就可以刷新了啊");
// }];
//空数据
[self.view showBlankPageView];
//隐藏
//[self.view hideBlankPageView];
效果图展示:
控件下载地址
觉得不错的小伙伴给个赞,在GitHub上给个Star噢!!!~~~~