在此处将您的项目添加到列表中并提供结果的 (320px 宽) 渲染图。
大多数应用程序显示内容列表(数据集),但在某些时候可能会为空,特别是对于拥有空白帐户的新用户。 空白屏幕会造成混淆,因为不清楚发生了什么,是否存在错误/bug,或者用户是否应该在您的应用程序中执行某些操作才能使用内容。
请阅读这篇非常有趣的文章,关于为空状态进行设计。
(这些是真实示例,可在 v2-Swift 分支的“应用程序”示例项目中找到)
空数据集有助于
这个库的设计方式使得您无需扩展 UITableView 或 UICollectionView 类。 当使用 UITableViewController 或 UICollectionViewController 时,它仍然可以工作。 只需遵循 DZNEmptyDataSetSource & DZNEmptyDataSetDelegate,您就可以完全自定义应用程序空状态的内容和外观。
可在 CocoaPods 中找到
pod 'DZNEmptyDataSet'
要使用 Carthage 将 DZNEmptyDataSet 集成到您的 Xcode 项目中,请在您的 Cartfile
中指定它
github "dzenbot/DZNEmptyDataSet"
要使用 SPM 将 DZNEmptyDataSet 集成到您的 Xcode 项目中,请在您的 Package.swift
中指定它
.package(
url: "https://github.com/dzenbot/DZNEmptyDataSet",
.branch("master")
)
对于现有项目,转到“文件导航器” -> “选择项目” -> “项目名称” -> “Swift Packages” -> “+” -> 粘贴“https://github.com/dzenbot/DZNEmptyDataSet”并继续选择您的目标。
有关完整的文档,请访问 CocoaPods 的自动生成文档
#import "UIScrollView+EmptyDataSet.h"
除非您作为框架导入,否则请执行
#import <DZNEmptyDataSet/UIScrollView+EmptyDataSet.h>
符合数据源和/或委托。
@interface MainViewController : UITableViewController <DZNEmptyDataSetSource, DZNEmptyDataSetDelegate>
- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView.emptyDataSetSource = self;
self.tableView.emptyDataSetDelegate = self;
// A little trick for removing the cell separators
self.tableView.tableFooterView = [UIView new];
}
返回您希望在空状态下显示的内容,并利用 NSAttributedString 的功能来定制文本外观。
空状态的图像
- (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView
{
return [UIImage imageNamed:@"empty_placeholder"];
}
空状态标题的属性字符串
- (NSAttributedString *)titleForEmptyDataSet:(UIScrollView *)scrollView
{
NSString *text = @"Please Allow Photo Access";
NSDictionary *attributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:18.0f],
NSForegroundColorAttributeName: [UIColor darkGrayColor]};
return [[NSAttributedString alloc] initWithString:text attributes:attributes];
}
空状态描述的属性字符串
- (NSAttributedString *)descriptionForEmptyDataSet:(UIScrollView *)scrollView
{
NSString *text = @"This allows you to share photos from your library and save photos to your camera roll.";
NSMutableParagraphStyle *paragraph = [NSMutableParagraphStyle new];
paragraph.lineBreakMode = NSLineBreakByWordWrapping;
paragraph.alignment = NSTextAlignmentCenter;
NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:14.0f],
NSForegroundColorAttributeName: [UIColor lightGrayColor],
NSParagraphStyleAttributeName: paragraph};
return [[NSAttributedString alloc] initWithString:text attributes:attributes];
}
用于指定按钮状态的属性字符串
- (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state
{
NSDictionary *attributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:17.0f]};
return [[NSAttributedString alloc] initWithString:@"Continue" attributes:attributes];
}
或用于指定按钮状态的图像
- (UIImage *)buttonImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state
{
return [UIImage imageNamed:@"button_image"];
}
空状态的背景颜色
- (UIColor *)backgroundColorForEmptyDataSet:(UIScrollView *)scrollView
{
return [UIColor whiteColor];
}
如果您需要更复杂的布局,您可以返回一个自定义视图来代替
- (UIView *)customViewForEmptyDataSet:(UIScrollView *)scrollView
{
UIActivityIndicatorView *activityView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
[activityView startAnimating];
return activityView;
}
图像视图动画
- (CAAnimation *)imageAnimationForEmptyDataSet:(UIScrollView *)scrollView
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath: @"transform"];
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 1.0)];
animation.duration = 0.25;
animation.cumulative = YES;
animation.repeatCount = MAXFLOAT;
return animation;
}
此外,您还可以调整内容视图的垂直对齐方式(例如:当 tableHeaderView 可见时非常有用)
- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView
{
return -self.tableView.tableHeaderView.frame.size.height/2.0f;
}
最后,您可以将组件彼此分开(默认间隔为 11 pts)
- (CGFloat)spaceHeightForEmptyDataSet:(UIScrollView *)scrollView
{
return 20.0f;
}
返回您期望从空状态获得的行为,并接收用户事件。
询问是否应该渲染和显示空状态(默认为 YES)
- (BOOL)emptyDataSetShouldDisplay:(UIScrollView *)scrollView
{
return YES;
}
询问交互权限(默认为 YES)
- (BOOL)emptyDataSetShouldAllowTouch:(UIScrollView *)scrollView
{
return YES;
}
询问滚动权限(默认为 NO)
- (BOOL)emptyDataSetShouldAllowScroll:(UIScrollView *)scrollView
{
return YES;
}
询问图像视图动画权限(默认为 NO)
- (BOOL) emptyDataSetShouldAllowImageViewAnimate:(UIScrollView *)scrollView
{
return YES;
}
通知何时点击了数据集视图
- (void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view
{
// Do something
}
通知何时点击了数据集操作按钮
- (void)emptyDataSet:(UIScrollView *)scrollView didTapButton:(UIButton *)button
{
// Do something
}
如果您需要刷新空状态布局,只需调用
[self.tableView reloadData];
或
[self.collectionView reloadData];
取决于您正在使用哪一个。
您还可以调用 [self.tableView reloadEmptyDataSet]
以使当前的空状态布局无效并触发布局更新,从而绕过 -reloadData
。 如果您的数据源中有很多逻辑想要避免调用(在不需要时),这可能很有用。 [self.scrollView reloadEmptyDataSet]
是在使用 UIScrollView 时刷新内容的唯一方法。
该项目使用它们的精确内容和外观复制了几个流行的应用程序的空状态 (~20),例如 Airbnb、Dropbox、Facebook、Foursquare 以及许多其他应用程序。 了解自定义空状态外观的简易性和灵活性。 您还可以使用此项目作为试验场来测试内容。
该项目显示了从 CoreData 加载的世界国家/地区的列表。 它使用 NSFecthedResultController 进行过滤搜索。 当搜索时没有匹配的内容时,将显示一个简单的空状态。 了解如何在 UITableViewDataSource 和 DZNEmptyDataSetSource 协议之间进行交互,同时使用典型的 CoreData 堆栈。
该项目是一个简单的示例,说明了该库如何在 UICollectionView 和 UISearchDisplayController 中工作,同时使用 Storyboard。
欢迎随时提供想法、问题和/或拉取请求进行协作。
(MIT 许可证)
版权所有 (c) 2016 Ignacio Romero Zurbuchen iromero@dzen.cl
特此授予任何获得本软件及相关文档文件副本(“软件”)的人员免费许可,以无限制地处理本软件,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售本软件的副本,并允许向其提供本软件的人员遵守以下条件
上述版权声明和本许可声明应包含在本软件的所有副本或实质性部分中。
本软件按“原样”提供,不提供任何形式的明示或暗示保证,包括但不限于适销性、特定用途适用性和非侵权性的保证。 无论在任何情况下,作者或版权持有人均不对任何索赔、损害或其他责任负责,无论是在合同诉讼、侵权诉讼或其他诉讼中,无论是由本软件引起或与之相关,还是由本软件的使用或其他交易引起。