空页面的背景提示原理

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

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

posted @ 2015-08-09 14:07  踏浪帅  阅读(1375)  评论(0编辑  收藏  举报