空页面的背景提示原理
当我们列表没有数据或请求网络出现错误时,视图背景会有相应的提示;例如下面的效果:
这边是放一张图片跟一个文字结合而成的效果,源代码可以查看Codin.net项目的源代码;
1:先把背景封装成一个视图
@interface EaseBlankPageView : UIView @property (strong, nonatomic) UIImageView *monkeyView; @property (strong, nonatomic) UILabel *tipLabel; @property (strong, nonatomic) UIButton *reloadButton; @property (copy, nonatomic) void(^reloadButtonBlock)(id sender); - (void)configWithType:(EaseBlankPageType)blankPageType hasData:(BOOL)hasData hasError:(BOOL)hasError reloadButtonBlock:(void(^)(id sender))block; @end
@implementation EaseBlankPageView - (instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor clearColor]; } return self; } - (void)configWithType:(EaseBlankPageType)blankPageType hasData:(BOOL)hasData hasError:(BOOL)hasError reloadButtonBlock:(void (^)(id))block{ if (hasData) { [self removeFromSuperview]; return; } self.alpha = 1.0; // 图片 if (!_monkeyView) { _monkeyView = [[UIImageView alloc] initWithFrame:CGRectZero]; [self addSubview:_monkeyView]; } // 文字 if (!_tipLabel) { _tipLabel = [[UILabel alloc] initWithFrame:CGRectZero]; _tipLabel.backgroundColor = [UIColor clearColor]; _tipLabel.numberOfLines = 0; _tipLabel.font = [UIFont systemFontOfSize:17]; _tipLabel.textColor = [UIColor lightGrayColor]; _tipLabel.textAlignment = NSTextAlignmentCenter; [self addSubview:_tipLabel]; } // 布局 [_monkeyView mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(self); make.bottom.equalTo(self.mas_centerY); }]; [_tipLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.centerX.equalTo(self); make.top.equalTo(_monkeyView.mas_bottom); make.height.mas_equalTo(50); }]; _reloadButtonBlock = nil; if (hasError) { // 加载失败 if (!_reloadButton) { _reloadButton = [[UIButton alloc] initWithFrame:CGRectZero]; [_reloadButton setImage:[UIImage imageNamed:@"blankpage_button_reload"] forState:UIControlStateNormal]; _reloadButton.adjustsImageWhenHighlighted = YES; [_reloadButton addTarget:self action:@selector(reloadButtonClicked:) forControlEvents:UIControlEventTouchUpInside]; [self addSubview:_reloadButton]; [_reloadButton mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(self); make.top.equalTo(_tipLabel.mas_bottom); make.size.mas_equalTo(CGSizeMake(160, 60)); }]; } _reloadButton.hidden = NO; _reloadButtonBlock = block; [_monkeyView setImage:[UIImage imageNamed:@"blankpage_image_loadFail"]]; _tipLabel.text = @"貌似出了点差错\n真忧伤呢"; }else{ // 空白数据 if (_reloadButton) { _reloadButton.hidden = YES; } NSString *imageName, *tipStr; switch (blankPageType) { case EaseBlankPageTypeActivity://项目动态 { imageName = @"blankpage_image_Sleep"; tipStr = @"这里还什么都没有\n赶快起来弄出一点动静吧"; } break; case EaseBlankPageTypeTask://任务列表 { imageName = @"blankpage_image_Sleep"; tipStr = @"这里还没有任务\n赶快起来为团队做点贡献吧"; } break; case EaseBlankPageTypeTopic://讨论列表 { imageName = @"blankpage_image_Sleep"; tipStr = @"这里怎么空空的\n发个讨论让它热闹点吧"; } break; case EaseBlankPageTypeTweet://冒泡列表(自己的) { imageName = @"blankpage_image_Hi"; tipStr = @"无冒泡\n来,冒个泡吧~"; } break; case EaseBlankPageTypeTweetOther://冒泡列表(别人的) { imageName = @"blankpage_image_Sleep"; tipStr = @"这个人很懒\n一个冒泡都木有~"; } break; case EaseBlankPageTypeProject://项目列表(自己的) { imageName = @"blankpage_image_Sleep"; tipStr = @"您还木有项目呢,赶快起来创建吧~"; } break; case EaseBlankPageTypeProjectOther://项目列表(别人的) { imageName = @"blankpage_image_Sleep"; tipStr = @"这个人很懒,一个项目都木有~"; } break; case EaseBlankPageTypeFileDleted://去了文件页面,发现文件已经被删除了 { imageName = @"blankpage_image_loadFail"; tipStr = @"晚了一步\n文件刚刚被人删除了~"; } break; case EaseBlankPageTypeFolderDleted://文件夹 { imageName = @"blankpage_image_loadFail"; tipStr = @"晚了一步\n文件夹貌似被人删除了~"; } break; case EaseBlankPageTypePrivateMsg://私信列表 { imageName = @"blankpage_image_Hi"; tipStr = @"无私信\n打个招呼吧~"; } break; default://其它页面(这里没有提到的页面,都属于其它) { imageName = @"blankpage_image_Sleep"; tipStr = @"这里还什么都没有\n赶快起来弄出一点动静吧"; } break; } [_monkeyView setImage:[UIImage imageNamed:imageName]]; _tipLabel.text = tipStr; } } - (void)reloadButtonClicked:(id)sender{ self.hidden = YES; [self removeFromSuperview]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ if (_reloadButtonBlock) { _reloadButtonBlock(sender); } }); } @end
注意:这边分为两种,一种是请求出现错误时显示,并有一个刷新的按键,另外一种就是当前表格没有数据时显示的,并且进行的分类;
2:然后在UIView+Common时的分类进行扩展
#pragma mark BlankPageView @property (strong, nonatomic) EaseBlankPageView *blankPageView; - (void)configBlankPage:(EaseBlankPageType)blankPageType hasData:(BOOL)hasData hasError:(BOOL)hasError reloadButtonBlock:(void(^)(id sender))block; @end
- (void)setBlankPageView:(EaseBlankPageView *)blankPageView{ [self willChangeValueForKey:@"BlankPageViewKey"]; objc_setAssociatedObject(self, &BlankPageViewKey, blankPageView, OBJC_ASSOCIATION_RETAIN_NONATOMIC); [self didChangeValueForKey:@"BlankPageViewKey"]; } - (EaseBlankPageView *)blankPageView{ return objc_getAssociatedObject(self, &BlankPageViewKey); } - (void)configBlankPage:(EaseBlankPageType)blankPageType hasData:(BOOL)hasData hasError:(BOOL)hasError reloadButtonBlock:(void (^)(id))block{ if (hasData) { if (self.blankPageView) { self.blankPageView.hidden = YES; [self.blankPageView removeFromSuperview]; } }else{ if (!self.blankPageView) { self.blankPageView = [[EaseBlankPageView alloc] initWithFrame:self.bounds]; } self.blankPageView.hidden = NO; [self.blankPageContainer addSubview:self.blankPageView]; // [self.blankPageContainer insertSubview:self.blankPageView atIndex:0]; // [self.blankPageView mas_makeConstraints:^(MASConstraintMaker *make) { // make.size.equalTo(self); // make.top.left.equalTo(self.blankPageContainer); // }]; [self.blankPageView configWithType:blankPageType hasData:hasData hasError:hasError reloadButtonBlock:block]; } } - (UIView *)blankPageContainer{ UIView *blankPageContainer = self; for (UIView *aView in [self subviews]) { if ([aView isKindOfClass:[UITableView class]]) { blankPageContainer = aView; } } return blankPageContainer; }
注意:这边有对父视图加载时的判断,只有是表格视图才可以;这边有对背景视图的增加及删除的操作;
3:页面调用时代码如下
- (void)refresh{ if (_isLoading) { return; } if (!_curCommitInfo) { [self.view beginLoading]; } _isLoading = YES; __weak typeof(self) weakSelf = self; [[Coding_NetAPIManager sharedManager] request_CommitInfo_WithUserGK:_ownerGK projectName:_projectName commitId:_commitId andBlock:^(CommitInfo *data, NSError *error) { weakSelf.isLoading = NO; [weakSelf.view endLoading]; [weakSelf.myRefreshControl endRefreshing]; if (data) { weakSelf.curCommitInfo = data; [weakSelf configListGroups]; [weakSelf.myTableView performSelector:@selector(reloadData) withObject:nil afterDelay:0.5]; } [weakSelf.view configBlankPage:EaseBlankPageTypeView hasData:(weakSelf.curCommitInfo.commitDetail != nil) hasError:(error != nil) reloadButtonBlock:^(id sender) { [weakSelf refresh]; }]; }]; //推送过来的页面,可能 curProject 对象为空 if (!_curProject) { _curProject = [Project new]; _curProject.owner_user_name = _ownerGK; _curProject.name = _projectName; } if (![_curProject.id isKindOfClass:[NSNumber class]]) { [[Coding_NetAPIManager sharedManager] request_ProjectDetail_WithObj:_curProject andBlock:^(id data, NSError *error) { if (data) { weakSelf.curProject = data; } }]; } }
注意:直接请求完调用视图的configBlankPage