UITableView-Placeholder

最近写项目遇到一个无数据展示的时候展示一张图片和文字的需求

刚开始为了偷懒去找了UI小姐姐让小姐姐直接切个带文字的背景图

但是,被无情地拒绝了

那么思路如下

直接上代码

首先创建个工具类-不知道是什么自行百度

UITableView-Placeholder_第1张图片
5181528462915_.pic.jpg

.h 文件中给他搞个方法

/**
 placeholder

 @param message 占位文字
 @param rowCount cell
 @param image 占位图片
 @param offset 偏移量
 @param messageColor 占位文字颜色
 @param font 占位文字frame
 */
- (void)tableviewDisplayWithMessage:(NSString *)message ifNecessaryForRowCount:(NSUInteger)rowCount ifNecessaryForImage:(UIImage *)image offsetY:(CGFloat)offset messageColor:(UIColor *)messageColor font:(UIFont *)font;

注释这么清楚,看不懂就去撞个南墙吧!!!

.m 文件中实现搞出来的那个方法

-(void)tableviewDisplayWithMessage:(NSString* )message ifNecessaryForRowCount:(NSUInteger)rowCount ifNecessaryForImage:(UIImage *)image offsetY:(CGFloat)offset messageColor:(UIColor *)messageColor font:(UIFont *)font
{
    为什么是空的,别急,看下面
}

首先,你要判断一下rowCount数据是否为空
为什么判断
你不判断,控制器鬼知道你什么时候需要加那个占位图和文字

if (rowCount == 0){
写条件就行了
图片啊文字啊乱七八糟通通丢这里就行了
}else
{

}

先计算下位置
没有位置就在屏幕外孤独终老吧

//        计算位置,垂直居中,图片默认中心偏上
        CGFloat sw = self.bounds.size.width; /* <获得当前view的宽度> */
        CGFloat cX = sw / 2;
        CGFloat cY = self.bounds.size.height * (1 - 0.618) + offset; /*  */
        CGFloat iW = image.size.width;
        CGFloat iH = image.size.height;

设置个image

        UIImageView *imgView = [[UIImageView alloc] init];
        imgView.frame = CGRectMake(cX - iW / 2, cY - iH, iW, iH);
        imgView.image = image;

设置个label

        UILabel *messageLabel = [[UILabel alloc] init];
        messageLabel.textAlignment = NSTextAlignmentCenter;
        messageLabel.frame = CGRectMake(0, CGRectGetMaxY(imgView.frame) - 40, sw, messageLabel.font.lineHeight);
        messageLabel.text = message;

label的font

        messageLabel.font = font;

label的color

        messageLabel.font = font;

搞个view展示他们

        UIView *view = [[UIView alloc] init];
        [view addSubview:imgView];
        [view addSubview:messageLabel];

注意展示的先后顺序不要搞错了,不然你会先看到他儿子找不到他爸

最后展示上面这些乱七八糟的东西就行了

         self.backgroundView = view;

还有别忘了取消分割线显示

         self.separatorStyle = UITableViewCellSeparatorStyleNone;

有数据的时候就这样

         self.backgroundView = nil;
         self.separatorStyle = UITableViewCellSeparatorStyleSingleLine;

都写完了,你真的以为这样就完了么?
控制器调用一下才算结束啊

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    
         [tableView tableviewDisplayWithMessage:@"我是个占位文字" ifNecessaryForRowCount:0 ifNecessaryForImage:simaier_img offsetY:50 messageColor:[UIColor grayColor] font:[UIFont systemFontOfSize:20.0]];
    
    return 0;
}

别忘了头文件添加一下哈

看完了吧
给你个传送门
Demo- https://github.com/simaier/UITableView-Placeholder

用力点下去

有占位图的模拟器长这样


UITableView-Placeholder_第2张图片
5191528463838_.pic.jpg

没有占位图的模拟器长这样


UITableView-Placeholder_第3张图片
5201528464022_.pic.jpg
好啦,真的要下班了

这条路不好走
我也有经常看不清前方迷茫的时候
坚持下去
记住了
死磕
死磕就对了
UITableView-Placeholder_第4张图片
5211528464167_.pic_hd.jpg

你可能感兴趣的:(UITableView-Placeholder)