缺省页-空视图-站位视图

需求如下：


屏幕快照 2018-09-17 下午2.41.31.png

在每个项目中，都会在请求数据为空或者网络不好的时候，提示用户当前网络状态的占位图。已达到效果和美观上都给人比较好的提示。以前都是针对不同场景展示不同的站位图片，每个用到的地方，都要自己写一遍空视图。由于该项目中用到的地方比较多，所以封装了出来。使用者，直接传入想对应页面的占位图枚举参数即可。不需要增加太多的代码。

思路：

第一种：空视图无非就是一个View 和一个用于展示文案的UILabel。
第二种：空视图还可以展示一个view+一个用于刷新试图的UIButton 按钮。

·首先我们需要封装一个无数据占位图

一个项目中，无数据占位图不光只有一种，但是可以看到他们的布局是非常相似的，所以我的做法是根据不同的值，创建不同的UI。

首先先要定一个一个枚举
typedef enum{
    TimeOutEmptyType = 0,             //    网络请求超时
    NoneSearchDataEmptyType,          //    暂无搜索结果
    NoneDataEmptyType,                //    暂无数据
    ErrorEmptyType,                   //    页面出错啦~
    LocationErrorEmptyType,           //    无法获取位置信息
    NoNetWorkEmptyType,               //    网络无法连接
    NoShopAssitantType,               //    没有店铺助理
    NoInspectionTemplateType,         //    没有巡检模版
    NoInspectionTaskType,             //    没有巡检任务
    NOOpenDoorDataType,               //    没有开门数据
    NoneVisitorType,                  //    没有拜访者数据
    NORepairRecordDataType,           //    没有维修记录
    NOEMRecordDataType,               //    没有保养记录
    NoBlueToothDoor,                  //    没有附近的门
    NoDeviceSelect,                   //    没有选择设备
    NoNoticeType,                     //    没有通知记录
    NoAnnounceType,                   //    没有公告记录
    NoPaymentType,                    //    没有收费记录
    NoTicketType                      //    没有工单待办记录

}EmptyType;

当然这肯定不是项目中全部的空视图，它会根据业务需求不断的增加。
.h

@interface SCEmptyView : UIView
@property (nonatomic, strong) UIImageView *emptyImage;
@property (nonatomic, strong) UILabel *titleLab;
@property (nonatomic, strong) UILabel *subTitleLab;
@property (nonatomic, strong) UIButton* retryBtn;

提供两个类方法，用于直接创建空视图。

+ (SCEmptyView*)defaultEmptyView;
+ (SCEmptyView*)emptyViewWithImage:(UIImage*)img title:(NSString*)title subTitle:(NSString*)subTitle;

初始化空界面,返回自定义空数据View

/*!
 *  @author wyy
 *
 *  @brief 初始化空界面
 *
 *  @param icon     图标
 *  @param title    标题
 *  @param subTitle 副标题
 *  @param btnTitle 按钮文字
 *
 *  @return 返回自定义空数据View
 */
- (SCEmptyView*)initWithFrame:(CGRect)frame icon:(NSString*)icon title:(NSString*)title subTitle:(NSString*)subTitle buttonTitle:(NSString *)btnTitle;

根据空数据原因类型获取空界面，返回空数据View

+ (SCEmptyView*)emptyViewWithType:(EmptyType)emptyType frame:(CGRect)frame;

ok 那就来看一下具体实现吧。.m

@implementation SCEmptyView

- (UIView *)initWithIcon:(NSString *)icon Title:(NSString *)title ButtonTitle:(NSString *)btnTitle OtherTitles:(NSArray *)titles
{
    if (self = [self init]) {
        self.frame = CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT);
        self.tag = 65535;
        CGFloat wh = 130;
        UIImageView *imgView=[[UIImageView alloc] initWithFrame:CGRectMake(kSCREEN_WIDTH*0.5-wh*0.5, 85, wh, wh)];
        if (icon != nil && ![icon isEqualToString:@""]) {
            [imgView setImage:[UIImage imageNamed:icon]];
        }
        [self addSubview:imgView];
        
        UILabel *textLabel=[[UILabel alloc] initWithFrame:CGRectMake(15, CGRectGetMaxY(imgView.frame) + 10, kSCREEN_WIDTH - 2*15, 18)];
        textLabel.textAlignment=NSTextAlignmentCenter;
        textLabel.textColor = [UIColor blackColor];
        textLabel.font = [UIFont systemFontOfSize:17];
        textLabel.numberOfLines = 0;
        textLabel.text = title;
        [textLabel sizeToFit];
        textLabel.center = CGPointMake(self.center.x, textLabel.center.y);
        
        [self addSubview:textLabel];
        
        if (titles.count > 0) {
            for (NSString *titleStr in titles) {
                
                textLabel=[[UILabel alloc] initWithFrame:CGRectMake(15, CGRectGetMaxY(textLabel.frame)+10 , kSCREEN_WIDTH - 2*15, 15)];
                textLabel.textAlignment=NSTextAlignmentCenter;
                textLabel.textColor = [UIColor blackColor];
                textLabel.font=[UIFont systemFontOfSize:14];
                textLabel.text = titleStr;
                textLabel.numberOfLines = 0;
                [textLabel sizeToFit];
                textLabel.center = CGPointMake(self.center.x, textLabel.center.y);
                [self addSubview:textLabel];
            }
        }
        
        if (btnTitle != nil && ![btnTitle isEqualToString:@""]) {
            UIButton *addNewBtn = [[UIButton alloc] initWithFrame:CGRectMake(kSCREEN_WIDTH*0.5-60, CGRectGetMaxY(textLabel.frame) + 5, 120, 38)];
            [addNewBtn setTitle:btnTitle forState:UIControlStateNormal];
            [addNewBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
            addNewBtn.titleLabel.font = [UIFont systemFontOfSize:17];
             
            [addNewBtn addTarget:self action:@selector(btnClicked) forControlEvents:UIControlEventTouchUpInside];
            [self addSubview:addNewBtn];
        }
        self.backgroundColor = [UIColor SCBackGroundColor];
    }
    return self;
}

初始化

- (id)init {
    self = [super init];
    if (self) {
        [self initViews];
    }
    return self;
}

- (void)initViews {
    _emptyImage = [[UIImageView alloc] init];
    [self addSubview:_emptyImage];
    
    _titleLab = [[UILabel alloc] init];
    _titleLab.textAlignment = NSTextAlignmentCenter;
    _titleLab.textColor = COLOR(124,121,122,1);
    _titleLab.font = [UIFont systemFontOfSize:17];
    [self addSubview:_titleLab];
    
    _subTitleLab = [[UILabel alloc] init];
    _subTitleLab.textAlignment = NSTextAlignmentCenter;
    _subTitleLab.textColor = [UIColor greenColor];
    _subTitleLab.font = [UIFont systemFontOfSize:14];
    [self addSubview:_subTitleLab];
    
    [_emptyImage mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.mas_centerX);
        make.top.equalTo(self.mas_top).with.offset(85);
        make.width.mas_equalTo(130);
        make.height.mas_equalTo(130);
    }];
    [_titleLab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_emptyImage.mas_bottom).with.offset(10);
        make.left.equalTo(self.mas_left).with.offset(15);
        make.right.equalTo(self.mas_right).with.offset(-15);
        make.height.mas_equalTo(18);
    }];
    [_subTitleLab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_titleLab.mas_bottom).with.offset(10);
        make.left.equalTo(self.mas_left).with.offset(15);
        make.right.equalTo(self.mas_right).with.offset(-15);
        make.height.mas_equalTo(15);
    }];
}

默认的空视图

+ (SCEmptyView*)defaultEmptyView {
    
    if ([[SCAppInitialize shareInstance] checkNetStatus] ==AFNetworkReachabilityStatusReachableViaWiFi || [[SCAppInitialize shareInstance] checkNetStatus] ==AFNetworkReachabilityStatusReachableViaWWAN || [[SCAppInitialize shareInstance] checkNetStatus] ==AFNetworkReachabilityStatusUnknown) {
        return [[SCEmptyView alloc] initWithIcon:@"ic_no_ticket" Title:@"暂无数据" ButtonTitle:nil OtherTitles:nil];
    }else{
        //无网络
        
        return [[SCEmptyView alloc] initWithIcon:@"" Title:@"网络无法连接" ButtonTitle:@"重试" OtherTitles:[NSArray arrayWithObjects:@"请检查你的手机是否连联网", nil]];
    }
    
}

+ (SCEmptyView*)emptyViewWithImage:(UIImage*)img title:(NSString*)title subTitle:(NSString*)subTitle {
    SCEmptyView *emptyView = [[SCEmptyView alloc] init];
    emptyView.emptyImage.image = img;
    emptyView.titleLab.text = title;
    emptyView.subTitleLab.text = subTitle;  
    return emptyView;
}

- (SCEmptyView*)initWithFrame:(CGRect)frame icon:(NSString*)icon title:(NSString*)title subTitle:(NSString*)subTitle buttonTitle:(NSString *)btnTitle;{
    self = [super initWithFrame:frame];
    if (self) {
        //空图标
        _emptyImage = [[UIImageView alloc] initWithFrame:CGRectMake((self.width-130)/2, 75, 130, 130)];
        _emptyImage.image = [UIImage imageNamed:icon];
        _emptyImage.contentMode = UIViewContentModeScaleAspectFit;
        [self addSubview:_emptyImage];
        
        //显示标题
        _titleLab = [[UILabel alloc] initWithFrame:CGRectMake(15, _emptyImage.bottom+10, self.width-2*15, 22)];
        _titleLab.textAlignment = NSTextAlignmentCenter;
        _titleLab.textColor = [UIColor blackColor];
        _titleLab.font = [UIFont systemFontOfSize:16];
        _titleLab.text = title;
        [self addSubview:_titleLab];
        
        //重试按钮的顶部位置
        CGFloat top = _titleLab.bottom;
        
        //显示副标题
        _subTitleLab = [[UILabel alloc] initWithFrame:CGRectMake(15, _titleLab.bottom+10, self.width-2*15, 0)];
        _subTitleLab.textAlignment = NSTextAlignmentCenter;
        _subTitleLab.textColor = [UIColor blackColor];
        _subTitleLab.font = [UIFont systemFontOfSize:12];
        [self addSubview:_subTitleLab];
        
        if (subTitle.length > 0) {
            _subTitleLab.text = subTitle;
            _subTitleLab.height = 16;
            top = _subTitleLab.bottom;
        }
        
        //重试按钮
        _retryBtn = [UIButton buttonWithType:UIButtonTypeSystem];
        _retryBtn.frame = CGRectMake((self.width-100)/2, top+15, 118, 30);
        [_retryBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [_retryBtn setBackgroundColor:[UIColor SCBlueColor]];
        _retryBtn.titleLabel.font = [UIFont systemFontOfSize:13];
        [_retryBtn addTarget:self action:@selector(btnClicked) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:_retryBtn];
        
        if (btnTitle.length > 0) {
            [_retryBtn setTitle:btnTitle forState:UIControlStateNormal];
        }else{
            _retryBtn.hidden = YES;
        }
        
    }
    return self;
}

一般我都会采用下面的方法来创建空视图

+ (SCEmptyView*)emptyViewWithType:(EmptyType)emptyType frame:(CGRect)frame{
    if (emptyType == NoneDataEmptyType) {
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"ic_no_ticket" title:@"您还没有工单哦" subTitle:@"" buttonTitle:@"返回"];
    }else if (emptyType == ErrorEmptyType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"" title:@"页面出错啦~" subTitle:@"" buttonTitle:@""];
    }else if (emptyType == NoNetWorkEmptyType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"" title:@"网络无法连接" subTitle:@"请检查你的手机是否联网" buttonTitle:@"重试"];
    }else if (emptyType == TimeOutEmptyType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"" title:@"网络请求超时" subTitle:@"" buttonTitle:@"重试"];
    }else if (emptyType == NoneSearchDataEmptyType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"" title:@"暂无搜索结果" subTitle:@"" buttonTitle:@""];
    }else if (emptyType == LocationErrorEmptyType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"" title:@"无法获取位置信息" subTitle:@"" buttonTitle:@"重试"];
    }else if(emptyType == NoInspectionTemplateType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"scInspectionEmptyIcon" title:@"" subTitle:@"目前暂无可以选择的设备及对应的巡检模板" buttonTitle:@""];
    }else if(emptyType == NoInspectionTaskType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"scInspectionEmptyTaskIcon" title:@"" subTitle:@"你还没有巡检任务" buttonTitle:@""];
    }else if(emptyType == NOOpenDoorDataType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"zanwumen" title:@"" subTitle:@"暂无您可通行的门" buttonTitle:@""];
    }else if(emptyType == NORepairRecordDataType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"NORepairRecordImage" title:@"" subTitle:@"暂无维修记录" buttonTitle:@""];
    }else if(emptyType == NoBlueToothDoor){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"bluetooth" title:@"暂无附近的门" subTitle:@"" buttonTitle:@""];
    }else if(emptyType == NOEMRecordDataType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"NOEMRecordImage" title:@"" subTitle:@"暂无保养记录" buttonTitle:@""];
    }else if(emptyType == NoDeviceSelect){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"sc_noDevices" title:@"目前暂无设备" subTitle:@"" buttonTitle:@""];
    }else if(emptyType == NoNoticeType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"NOEMRecordImage" title:@"暂无通知数据" subTitle:@"" buttonTitle:@""];
    }else if(emptyType == NoAnnounceType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"NOEMRecordImage" title:@"暂无公告数据" subTitle:@"" buttonTitle:@""];
    }else if(emptyType == NoPaymentType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"NOEMRecordImage" title:@"暂无收费数据" subTitle:@"" buttonTitle:@""];
    }else if(emptyType == NoTicketType){
        return [[SCEmptyView alloc] initWithFrame:frame icon:@"NOEMRecordImage" title:@"暂无工单待办数据" subTitle:@"" buttonTitle:@""];
    }
    return nil;
}

- (void)btnClicked
{
    if (_btnClick != nil) {
        self.btnClick();
    }
}

具体VC中加载空视图的使用方式如下：

-(SCEmptyView *)emptyView{
    if (!_emptyView) {
        _emptyView = [SCEmptyView emptyViewWithType:NoNoticeType frame:self.view.frame];
    }
    return _emptyView;
}

比如我在Tabelview上面加载一个空视图，就可以用上面的方式加载View。然后根据数据来管理是否隐藏和展示。

[self.tableView setBackgroundView:self.interactor.dataArrayM.count?[UIView new]:self.emptyView];

或者

第一步：
#pragma mark lazy loading
-(SCEmptyView *)emptyView{
    if(!_emptyView){
        _emptyView = [SCEmptyView emptyViewWithType:NoInspectionTaskType frame:CGRectMake(0, 50, kSCREEN_WIDTH, kSCREEN_HEIGHT)];
        _emptyView.hidden = YES;
    }
    return _emptyView;
}
第二步：
    [self.view addSubview:self.emptyView];
第三步：
    self.emptyView.hidden = self.interactor.dataArrayM.count?YES:NO;

以上就是针对项目中常用到的占位图做了一个简单的封装。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你...
    hw1212阅读 12,680评论 2赞 59
  • 越来越忙的我们该怎么去读书？
    今天谈一个大众化的问题，我们该怎么去读书，其实我是不敢谈这么大的话题的，因为我自己并没有多少经验，但是我想...
    乡本阅读 239评论 0赞 2
  • 我在简书上发现了这些有趣的现象
    时间过得很快，转眼我已在简书待了有一年多了。相比那些注册了两三年、码字几十万的「元老」，我还算是一名新人。但对于许...
    影像派阅读 346评论 2赞 7