DZNEmptyDataSet——空白数据集显示框架
GitHub地址：DZNEmptyDataSet
star:9000+
⭐️⭐️⭐️
以下内容来源于官方源码、 README 文档、测试 Demo 以及个人使用总结 ！
[TOC]
DZNEmptyDataSet
DZNEmptyDataSet 是基于 UITableView／UICollectionView 的范畴/扩展（category）类，它可以在空白页面上显示提示信息。
这是 iOS 内建的标准，用于处理空表和集合视图。默认情况下，如果你的表视图是空的，屏幕上什么也不会显示，它给用户的体验不是很好。
使用这个库，你只需要实现一些协议，iOS 就会很好地处理集合视图，然后合理美观地显示出用户信息。
支付宝-查询我的挂号记录
其他效果图参考
Mobile Patterns - Empty Data Sets
使用该框架的项目
将你的项目添加到列表中 并且提供一张（320px）的效果图。
空数据设计模式（The Empty Data Set Pattern）
也被称为 Empty state 或者 Blank Slate。
大多数应用程序会显示内容列表、数据集（在 iOS 程序猿眼里，这里通常指的是 UITableView、UICollectionView。），但有些时候这些页面可能是空白的，特别是对于那些刚创建空账户的新用户来说。 空白界面会对用户造成不知道如何进行下一步操作的困惑，因为用户不知道屏幕空白的原因是错误/Bug、网络异常，还是用户应该自己新建内容以恢复APP的正常状态。
请阅读这篇非常有趣的文章 Designing For The Empty States。
在 iOS 9人机界面指南 1.4.2 中也提及过类似的指引：
如果应用中所有的功能当前都不可用，那么应该显示一些内容来解释当前的情形，并建议用户如何进行后续操作。这部分内容给予了用户以反馈，使用户相信你的应用现在没问题。同时这也可以稳定用户情绪，让他们决定是否要采取纠正措施，继续使用应用，还是切换到另一个应用。
Empty Data Sets 有助于：
避免使用空白屏幕，并向用户传达屏幕空白的原因。
用户指引（特别是作为引导页面）。
避免其他中断机制，如显示错误警报。
一致性和改善用户体验。
传递品牌价值。
特性
兼容 UITableView 和 UICollectionView 。 也兼容 UISearchDisplayController 和 UIScrollView 。
通过显示图片、标题、详细文本、按钮，提供布局外观的多种可能性。
使用 NSAttributedString 类提供更容易定制的外观。
使用 Auto Layout 以自动将内容集中到表格视图，并支持自动旋转。 也接受自定义垂直和水平对齐。
自定义背景颜色。
允许在整个表格矩形上轻敲手势（有助于放弃第一个响应者或类似操作）。
提供更高级的定制，允许自定义视图。
兼容 Storyboard。
兼容iOS 6，tvOS 9或更高版本。
兼容iPhone，iPad和Apple TV。
支持 App Store 。
这个库已经被设计为不需要通过扩展（extend） UITableView 或 UICollectionView 类的方式来实现了。 使用 UITableViewController 或 UICollectionViewController 类仍然可以奏效。 只要通过遵循 DZNEmptyDataSetSource 和 DZNEmptyDataSetDelegate 协议，您将能够完全自定义应用程序的空状态的内容和外观。
安装
支持 CocoaPods 导入
pod'DZNEmptyDataSet'
使用
完整文档参考：CocoaPods 自动生成文档
导入
#import"UIScrollView+EmptyDataSet.h"
作为框架导入：
#import
遵循协议
// 遵守 DZNEmptyDataSetSource 、DZNEmptyDataSetDelegate 协议@interfaceMainViewController:UITableViewController- (void)viewDidLoad{ [superviewDidLoad];self.tableView.emptyDataSetSource =self;self.tableView.emptyDataSetDelegate =self;// 删除单元格分隔线的一个小技巧self.tableView.tableFooterView = [UIViewnew];}
实现数据源协议
DZNEmptyDataSetSource ——实现该协议，可以设置你想要在空白页面显示的内容，并且充分利用 NSAttributedString 功能来自定义文本外观。
空白页显示图片
- (UIImage*)imageForEmptyDataSet:(UIScrollView*)scrollView {return[UIImageimageNamed:@"lion"];}
效果图：
空白页显示标题
- (NSAttributedString*)titleForEmptyDataSet:(UIScrollView*)scrollView {NSString*title =@"狮子王";NSDictionary*attributes = @{NSFontAttributeName:[UIFontboldSystemFontOfSize:18.0f],NSForegroundColorAttributeName:[UIColordarkGrayColor] };return[[NSAttributedStringalloc] initWithString:title attributes:attributes];}
效果图：
空白页显示详细描述
- (NSAttributedString*)descriptionForEmptyDataSet:(UIScrollView*)scrollView {NSString*text =@"你好，我的名字叫辛巴，大草原是我的家！";NSMutableParagraphStyle*paragraph = [NSMutableParagraphStylenew]; paragraph.lineBreakMode =NSLineBreakByWordWrapping; paragraph.alignment =NSTextAlignmentCenter;NSDictionary*attributes = @{NSFontAttributeName:[UIFontsystemFontOfSize:14.0f],NSForegroundColorAttributeName:[UIColorlightGrayColor],NSParagraphStyleAttributeName:paragraph };return[[NSAttributedStringalloc] initWithString:text attributes:attributes];}
效果图：
空白页显示按钮：示例1
- (NSAttributedString*)buttonTitleForEmptyDataSet:(UIScrollView*)scrollView forState:(UIControlState)state {// 设置按钮标题NSString*buttonTitle =@"喜欢我就点点点点我";NSDictionary*attributes = @{NSFontAttributeName:[UIFontboldSystemFontOfSize:17.0f] };return[[NSAttributedStringalloc] initWithString:buttonTitle attributes:attributes];}
效果图：
空白页显示按钮：示例2
按钮点击高亮效果
- (NSAttributedString*)buttonTitleForEmptyDataSet:(UIScrollView*)scrollView forState:(UIControlState)state {NSString*text =@"Learn more";UIFont*font = [UIFontsystemFontOfSize:15.0];// 设置默认状态、点击高亮状态下的按钮字体颜色UIColor*textColor = [UIColorcolorWithHex:(state ==UIControlStateNormal) ?@"007ee5":@"48a1ea"];NSMutableDictionary*attributes = [NSMutableDictionarynew]; [attributes setObject:font forKey:NSFontAttributeName]; [attributes setObject:textColor forKey:NSForegroundColorAttributeName];return[[NSAttributedStringalloc] initWithString:text attributes:attributes];}
效果图：
空白页显示按钮：示例3
按钮标题中 点击重试 四个字加粗：
#pragma mark - DZNEmptyDataSetSource- (UIImage*)imageForEmptyDataSet:(UIScrollView*)scrollView {return[UIImageimageNamed:@"placeholder_No_Network"];}- (NSAttributedString*)buttonTitleForEmptyDataSet:(UIScrollView*)scrollView forState:(UIControlState)state {NSString*text =@"网络不给力，请点击重试哦~";NSMutableAttributedString*attStr = [[NSMutableAttributedStringalloc] initWithString:text];// 设置所有字体大小为 #15[attStr addAttribute:NSFontAttributeNamevalue:[UIFontsystemFontOfSize:15.0] range:NSMakeRange(0, text.length)];// 设置所有字体颜色为浅灰色[attStr addAttribute:NSForegroundColorAttributeNamevalue:[UIColorlightGrayColor] range:NSMakeRange(0, text.length)];// 设置指定4个字体为蓝色[attStr addAttribute:NSForegroundColorAttributeNamevalue:HexColor(@"#007EE5") range:NSMakeRange(7,4)];returnattStr;}- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView*)scrollView {return-70.0f;}#pragma mark - DZNEmptyDataSetDelegate- (void)emptyDataSet:(UIScrollView*)scrollView didTapButton:(UIButton*)button {// button clicked...}- (void)emptyDataSetWillAppear:(UIScrollView*)scrollView {self.tableView.contentOffset =CGPointZero;}
效果图
空白页显示按钮：示例4
// 空白页显示返回按钮图片- (UIImage*)buttonImageForEmptyDataSet:(UIScrollView*)scrollView forState:(UIControlState)state {return[UIImageimageNamed:@"placeholder_return"];}- (void)emptyDataSet:(UIScrollView*)scrollView didTapButton:(UIButton*)button { [self.navigationController popViewControllerAnimated:YES];}
设置按钮的背景颜色
- (nullableUIImage*)buttonBackgroundImageForEmptyDataSet:(UIScrollView*)scrollView forState:(UIControlState)state;
设置按钮图片
- (UIImage*)buttonImageForEmptyDataSet:(UIScrollView*)scrollView forState:(UIControlState)state {return[UIImageimageNamed:@"Image"];}
效果图：
设置图片的 tintColor
- (UIColor*)imageTintColorForEmptyDataSet:(UIScrollView*)scrollView {return[UIColoryellowColor];}
效果图：就是设置图片颜色，脑补中。。。
设置空白页面的背景色
- (UIColor*)backgroundColorForEmptyDataSet:(UIScrollView*)scrollView {UIColor*appleGreenColor = [UIColorcolorWithRed:199/255.0green:237/255.0blue:204/255.0alpha:1.0];returnappleGreenColor;}
效果图：
如果你需要设置更复杂的布局，也可以返回自定义视图：
- (UIView*)customViewForEmptyDataSet:(UIScrollView*)scrollView {UIActivityIndicatorView*activityView = [[UIActivityIndicatorViewalloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]; [activityView startAnimating];returnactivityView;}
效果图：
设置图片动画
#pragma mark - DZNEmptyDataSetSource#pragma mark 设置空白页图片- (nullableUIImage*)imageForEmptyDataSet:(UIScrollView*)scrollView {return[UIImageimageNamed:@"lion"];}#pragma mark 设置图片动画: 旋转- (CAAnimation*)imageAnimationForEmptyDataSet:(UIScrollView*)scrollView {CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"transform"]; animation.fromValue = [NSValuevalueWithCATransform3D:CATransform3DIdentity]; animation.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI_2,0.0,0.0,1.0)]; animation.duration =0.25; animation.cumulative =YES; animation.repeatCount = MAXFLOAT;returnanimation;}#pragma mark - DZNEmptyDataSetDelegate// 向代理请求图像视图动画权限。 默认值为NO。// 确保从 imageAnimationForEmptyDataSet 返回有效的CAAnimation对象：- (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView*)scrollView {returnYES;}
效果图：
图像视图动画：缩放
#pragma mark - DZNEmptyDataSetSource#pragma mark 设置空白页图片- (nullableUIImage*)imageForEmptyDataSet:(UIScrollView*)scrollView {return[UIImageimageNamed:@"computer"];}#pragma mark 设置图片动画- (CAAnimation*)imageAnimationForEmptyDataSet:(UIScrollView*)scrollView{CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"bounds"]; animation.duration =1.25; animation.cumulative =NO; animation.repeatCount = MAXFLOAT; animation.toValue = [NSValuevalueWithCGRect:CGRectMake(0,0,45,45)];returnanimation;}#pragma mark - DZNEmptyDataSetDelegate- (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView*)scrollView {returnYES;}
效果图：
我们发现在官方的 Applications Demo 应用中的空白视图中的动画是这样的：
空白视图默认情况下显示一张【静态图片】，当用户点击【静态图片】以后，该图片会被替换成【加载转圈】。
通过阅读源码，可以发现它是这样工作的：
首先在遵循协议的.m文件中声明了一个 BOOL 类型的变量，用来记录空白页面当前的加载状态：
@property(nonatomic,getter=isLoading)BOOLloading;
然后为该属性设置 setter 方法，重新加载空数据集视图：
- (void)setLoading:(BOOL)loading{if(self.isLoading == loading) {return; } _loading = loading;// 每次 loading 状态被修改，就刷新空白页面。[self.tableView reloadEmptyDataSet];}
接下来要实现几个关联协议
#pragma mark - DZNEmptyDataSetSource#pragma mark 设置空白页图片- (UIImage*)imageForEmptyDataSet:(UIScrollView*)scrollView {if(self.isLoading) {// 圆形加载图片return[UIImageimageNamed:@"loading_imgBlue_78x78"]; }else{// 默认静态图片return[UIImageimageNamed:@"staticImage"]; }}#pragma mark 图片旋转动画- (CAAnimation*)imageAnimationForEmptyDataSet:(UIScrollView*)scrollView{CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"transform"]; animation.fromValue = [NSValuevalueWithCATransform3D:CATransform3DIdentity]; animation.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI_2,0.0,0.0,1.0) ]; animation.duration =0.25; animation.cumulative =YES; animation.repeatCount = MAXFLOAT;returnanimation;}#pragma mark - DZNEmptyDataSetDelegate#pragma mark 是否开启动画- (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView*)scrollView {returnself.isLoading;}#pragma mark 空白页面被点击时刷新页面- (void)emptyDataSet:(UIScrollView*)scrollView didTapView:(UIView*)view {// 空白页面被点击时开启动画，reloadEmptyDataSetself.loading =YES;// 执行加载任务...dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0*NSEC_PER_SEC)), dispatch_get_main_queue(), ^{// 任务加载完成后关闭动画，reloadEmptyDataSetself.loading =NO; });}
此外，你还可以调整内容视图的垂直对齐（垂直偏移量）方式：
// 向上偏移量为表头视图高度/2- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView*)scrollView {return-self.tableView.tableHeaderView.frame.size.height/2.0f;}// 或者，返回固定值- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView*)scrollView {return-64;}
效果图：
最后，你也可以设置所有组件彼此之间的上下间距（默认间距为11 pt）：
- (CGFloat)spaceHeightForEmptyDataSet:(UIScrollView*)scrollView {return25.0f;}
效果图：
实现代理协议
DZNEmptyDataSetDelegate ——实现该协议，可以设置你期望从空白页面返回的的行为，并接收用户交互事件。
设置是否 渲染和显示空白页面（默认为YES）：
- (BOOL)emptyDataSetShouldDisplay:(UIScrollView*)scrollView {returnYES;}
设置是否 以淡入方式显示空白页面 。 (默认值为YES)
- (BOOL)emptyDataSetShouldFadeIn:(UIScrollView*)scrollView {returnYES;}
强制显示空数据集：当项目数量大于0时，请求代理是否仍应显示空数据集。（默认值为NO）
- (BOOL)emptyDataSetShouldBeForcedToDisplay:(UIScrollView*)scrollView;
获取交互权限:是否接收用户点击事件（默认为YES）：
- (BOOL)emptyDataSetShouldAllowTouch:(UIScrollView*)scrollView {// 如果正在加载中，则不响应用户交互。return!self.isLoading;}
获取滚动权限（默认值为NO）：
- (BOOL)emptyDataSetShouldAllowScroll:(UIScrollView*)scrollView;
获取图像动画权限：是否开启图片动画（默认值为NO）：
- (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView*)scrollView {returnYES;}
空白数据集 视图被点击 时触发该方法：
- (void)emptyDataSet:(UIScrollView*)scrollView didTapView:(UIView*)view {// 处理视图点击事件...}
空白数据集 按钮被点击时 触发该方法：
- (void)emptyDataSet:(UIScrollView*)scrollView didTapButton:(UIButton*)button {// 处理按钮点击事件...}
空白页将要出现
- (void)emptyDataSetWillAppear:(UIScrollView*)scrollView {// 如果你的空白占位图与需求向左，发生偏移，可如下设置：self.tableView.contentOffset =CGPointZero;}
空白页已经出现
- (void)emptyDataSetDidAppear:(UIScrollView*)scrollView;
空白页将要消失
- (void)emptyDataSetWillDisappear:(UIScrollView*)scrollView;
空白页已经消失
- (void)emptyDataSetDidDisappear:(UIScrollView*)scrollView;
刷新布局
如果你需要刷新空白页面布局，只需调用：
[self.tableView reloadData];
或者
[self.collectionView reloadData];
这取决于你用的是哪一个。
强制布局更新
你还可以调用 [self.tableView reloadEmptyDataSet] 以使当前空白页面布局无效，并触发布局更新，绕过 -reloadData。 如果你的数据源上有很多逻辑处理，当你不需要或者想避免调用 -reloadData 时这可能很有用。 当使用 UIScrollView 时， [self.scrollView reloadEmptyDataSet] 是刷新内容的唯一方法。
参考文章
