你的位置:首页 > 操作系统

[操作系统]空页面的背景提示原理

当我们列表没有数据或请求网络出现错误时,视图背景会有相应的提示;例如下面的效果:

这边是放一张图片跟一个文字结合而成的效果,源代码可以查看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