iOS 一行代码实现tableView、collectionView的占位图设置

空页面占位图在我们平时开发过程中十分常见，往往为了实现各个页面的占位图都会在业务代码里添加很多数据源判断和样式，如何更优雅滴实现这个功能呢？话不多说，项目里引入库MJPlaceholderView即可。

先看效果

menu.gif

引入

pod引入

pod 'MJPlaceholderView'

实现原理

通过监控tableView和collectionView的数据源方法来控制我们的占位图是否展示，组件里使用了Aspects来分别监听tableView和collectionView的数据源更新方法，tableView相关的核心代码：

objc_setAssociatedObject(self, &placeholderViewKey, placeholderView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
SEL selectors[4] = {
    @selector(deleteSections:),
    @selector(reloadData),
    @selector(deleteRowsAtIndexPaths:withRowAnimation:),
    @selector(deleteItemsAtIndexPaths:)
};
for (NSInteger i = 0; i < 4; i ++) {
    SEL selector = selectors[i];
    [self aspect_hookSelector:selector withOptions:AspectPositionAfter usingBlock:^{
        [self mj_logicalProcessing];
    } error:nil];
}
[self mj_logicalProcessing];

collectionView相关的核心代码：

objc_setAssociatedObject(self, &placeholderViewKey, placeholderView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
SEL selectors[3] = {
    @selector(deleteSections:),
    @selector(reloadData),
    @selector(deleteItemsAtIndexPaths:)
};
for (NSInteger i = 0; i < 3; i ++) {
    SEL selector = selectors[i];
    [self aspect_hookSelector:selector withOptions:AspectPositionAfter usingBlock:^{
        [self mj_logicalProcessing];
    } error:nil];
}
[self mj_logicalProcessing];

mj_logicalProcessing方法则控制MJPlaceholderView的显示隐藏即可：

- (void)mj_logicalProcessing {
    NSUInteger sections = [self numberOfSectionsInScrollView];
    if (sections == 0) {
        [self addPlaceholderView];
    }else if (sections == 1) {
        NSUInteger rows = [self numberOfRowsInSection0];
        if (rows == 0) {
            [self addPlaceholderView];
        }else {
            [self removePlaceholderView];
        }
    }else {
        [self removePlaceholderView];
    }
}

使用

全局配置通用样式

项目引入CTMediator来进行全局配置，主项目引入Target_PlacehoderConfiger.h和Target_PlacehoderConfiger.m文件，在Action_titleLabel、Action_subTitleLabel等方法中配置样式即可。有了全局配置的样式之后，在有需要的地方只需1行代码就可以完成占位图的设置：

self.collectionView.placeholderView = [MJPlaceholderView placeholder];

局部配置

在个别的地方需要单独设置不同的图片和和文字的可以通过字典的方式传入配置信息：

self.tableView.placeholderView = [MJPlaceholderView placeholder];
UIImage *image = [UIImage imageNamed:@"goods_detail_no_comments_icon"];
self.tableView.placeholderView.noDataPlacehoderParam = @{@"title":@"该商品当前暂无评论",
                                                         @"image":image?image:[UIImage new]
                                                         };

依赖

使用前，先确定愿不愿意加入依赖，不愿意的话，自行修改代码就好了！

为了布局方便依赖了:Masonry

为了方便配置全局视图样式，依赖了:CTMediator

为了监测网络请求状态引入了：AFNetworking

为了加载动图引入了：YYImage

实现思路：交换了tableView和collectionView的reloadData方法，另外还加入了没有网络情况的占位图和页面加载中的占位图！

写在最后

有任何建议或者批评都可以评论留言哦~

最后编辑于：2020.06.16 12:48:53