美文网首页iOS常用
UITableView实现空数据占位图实现方案

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

作者: SAW_ | 来源:发表于2018-08-08 10:49 被阅读245次

    先来看一张效果图


    在界面没有数据的情况下,占位展示一些图片文字,会使得界面显得更加美观,提高用户体验。
    一开始想到的方法是使用一个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实现空数据占位图实现方案

        本文链接:https://www.haomeiwen.com/subject/yjjtbftx.html