UITableView实现空数据占位图实现方案

先来看一张效果图


在界面没有数据的情况下,占位展示一些图片文字,会使得界面显得更加美观,提高用户体验。
一开始想到的方法是使用一个UIView,在网络请求结束之后,判断数据,数据未空就把这个UIView贴在当前控制器的view上面。写着写着,发现这个实现太繁琐了不说,代码还很重复跟耦合很高。后来看了下UITableView的API,它有一个backgroundView属性,那为何不直接把这个UIView贴在backgroundView。于是思考了下,决定采用类别Category方式,给UITableView增加一个展示空白占位图的方法。

@interface UITableView (YTPlaceholder)

//展示空数据
- (void)showEmptyDataView;
- (void)showEmptyDataViewWithTitle:(NSString *)title;

//清空占位图
- (void)clearPlaceholderView;

@end
@implementation UITableView (YTPlaceholder)

- (void)showEmptyDataViewWithTitle
{
    [self showEmptyDataViewWithTitle:@"暂无数据"];
}

- (void)showEmptyDataViewWithTitle:(NSString *)title
{
    UIView *backView = [[UIView alloc]initWithFrame:self.bounds];
    backView.backgroundColor = [UIColor viewBackgroundGrayColor];
    
    UIImage *image = [UIImage imageNamed:@"wildtoDefaulte"];
    
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = image;
    imageView.frame = CGRectMake((self.ab_width - image.size.width) / 2, 120, image.size.width, image.size.height);
    [backView addSubview:imageView];
    
    CGSize title_size = [title sizeWithFont:[UIFont systemFontOfSize:14.0] maxW:self.ab_width - 100];
    
    UILabel *label = [[UILabel alloc] init];
    label.ab_x = 50;
    label.ab_y = CGRectGetMaxY(imageView.frame) + 25;
    label.ab_width = self.ab_width - label.ab_x * 2;
    label.ab_height = title_size.height;
    label.textColor = [UIColor colorWithRed:153.0/255.0 green:153.0/255.0 blue:153.0/255.0 alpha:1.0];
    label.numberOfLines = 0;
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont systemFontOfSize:14.0];
    label.backgroundColor = [UIColor clearColor];
    label.text = title;
    [backView addSubview:label];
    
    self.backgroundView = backView;
}

//清空占位图
- (void)clearPlaceholderView
{
    self.backgroundView = nil;
}

采用Category的方式来实现空白占位图,不仅是代码更加清爽,调用方式也简单,达到了非常解耦的目的。
使用方式也简单,如下的例子:

[ABHttpTool ab_GET:YT_APP_SERVER_USER params:params success:^(BOOL result, id responseObject, NSString *responseMessage) {
        [MBProgressHUD hideHUD];
        if (result) {
            NSArray *array = responseObject;
            if (array.count) {
                [self.tableView reloadData];
            }
            else {
               [self.tableView showEmptyDataViewWithTitle:YTLocalizedString(@"暂无订单消息")];
            }
        }
    } failure:^(NSError *error) {
        [MBProgressHUD hideHUD];
    }];

你可能感兴趣的:(UITableView实现空数据占位图实现方案)