在此处添加您的项目到列表,并提供(320px 宽)的结果渲染。
也称之空状态(Empty State)或空白页(Blank Slate)。
大多数应用都会显示内容列表(数据集),其中很多最终会为空,特别是对于新用户和空白账户来说。空白屏幕会因为不清楚发生什么,是否有错误/故障,或者用户是否需要在您的应用中执行某些操作才能消费内容而导致困惑。
请阅读关于 为空状态设计 的非常有意思的文章。
空数据集很有帮助
本库的设计方式不需要你扩展UITableView或UICollectionView类。即使在使用UITableViewController或UICollectionViewController时,它也能正常工作。通过实现DZNEmptyDataSetSource和DZNEmptyDataSetDelegate协议,你可以完全自定义应用中空状态的内容和外观。
可在CocoaPods中使用
pod 'DZNEmptyDataSet'
若想使用Carthage将DZNEmptyDataSet集成到你的Xcode项目中,请在你的Cartfile
中指定它
github "dzenbot/DZNEmptyDataSet"
要查看完整文档,请访问CocoaPods自动生成的文档
#import "UIScrollView+EmptyDataSet.h"
除非你以框架的形式导入,否则请执行以下操作
#import "<DZNEmptyDataSet/UIScrollView+EmptyDataSet.h>"
实现dataSource和/或delegate。
@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"];
}
图片视图动画
- (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;
}
空状态标题的attritedString
- (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];
}
空状态描述的attritedString
- (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];
}
特定按钮状态的attritedString所使用的字符串
- (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;
}
此外,你还可以调整内容视图的垂直对齐方式(即:在tableHeaderView可见时非常有用)
- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView
{
return -self.tableView.tableHeaderView.frame.size.height/2.0f;
}
最后,你可以将组件分开(默认间隔为11点)
- (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;
}
在dataset视图被点击时通知
- (void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view
{
// Do something
}
在dataset的操作按钮被点击时通知
- (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加载的世界国家列表。它使用NSFetchedResultsController进行搜索过滤。当搜索时没有匹配的内容,会显示简单的空状态。看看如何在使用典型的CoreData栈的同时,在UITableViewDataSource和DZNEmptyDataSetSource协议之间进行交互。
此项目是一个简单的示例,说明此库在Storyboards的使用下,如何与UICollectionView和UISearchDisplayController一起工作。
欢迎自由协作,提出想法、问题或拉取请求。
(MIT许可)
版权所有(c)2016 Ignacio Romero Zurbuchen [email protected]
根据以下条件,任何人都可以不收取费用获得本软件和相关文档文件的副本(“软件”),使用该软件不受限制,包括无限制地使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本,并允许向提供软件的个人授权进行此类操作:
上述版权声明和许可声明应包含在软件的副本或主要部分的副本中。
软件按“原样”提供,不提供任何形式的明示或暗示保证,包括但不限于对适销性、特定用途的适用性和非侵权的保证。在任何情况下,作者或版权所有者不应对任何索赔、损害或其他责任承担责任,无论该责任是根据合同、侵权还是其他方式产生的,只要与软件或其使用或其他操作有关。