空页面的背景提示原理

清疚 2022-07-13 09:28 108阅读 0赞

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

![20158914154169.png][]

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

[20158914154169.png]: http://www.xiaoxiangzi.com/article/UploadPic/2015-8/20158914154169.png