空頁面的背景提示原理，頁面背景提示原理

空頁面的背景提示原理，頁面背景提示原理

當我們列表沒有資料或請求網路出現錯誤時，視圖背景會有相應的提示；例如下面的效果：

這邊是放一張圖片跟一個文字結合而成的效果，原始碼可以查看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