發現了一個很有用的第三方，DZNEmptyDataSet，用起來也極其方便，這里給大家分享下！先說下其用途：
DZNEmptyDataSet主要用于UITableView以及UICollectionView頁面空白時展示（據說也可以用于UIScrollView， 有興趣的童鞋可以試試）。開發中之所以用占位圖，是為了提高用戶體驗；而為什么選DZNEmptyDataSet而不自行設計占位圖（做過占位圖的童鞋應該會覺得做占位圖并不難，但沒有對比就沒有傷害，你如果試用了DZNEmptyDataSet，就會頓悟自己做占位圖是多么地繁瑣）。坦白說，DZNEmptyDataSet是一個為了讓開發人員“變懶”的第三方（貌似每個第三方都是這樣的“宗旨”），接下來我們就一起看下DZNEmptyDataSet吧！
一、先來認識一下 DZNEmptyDataSet
- GitHub 地址：DZNEmptyDataSet
- DZNEmptyDataSet 效果圖
DZNEmptyDataSet效果圖1
DZNEmptyDataSet效果圖2
二、用 DZNEmptyDataSet 實現占位圖效果
不得不說，其使用方法極其簡單，用 cocoapods 導入可以，直接拖進項目也行。。。接著~~~
- 導入頭文件
#import "UIScrollView+EmptyDataSet.h"
- 添加代理協議
@interface NNViewController ()<UITableViewDataSource, DZNEmptyDataSetSource, DZNEmptyDataSetDelegate>
- 設置代理協議
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, NNSCREENWIDTH, NNSCREENHEIGHT) style:UITableViewStylePlain];
[self.view addSubview:self.tableView];
self.tableView.dataSource = self;
self.tableView.emptyDataSetSource = self;
self.tableView.emptyDataSetDelegate = self;
self.tableView.tableFooterView = [[UIView alloc] init];
- 設置空白頁展示圖片
#pragma mark - DZNEmptyDataSetSource
// 返回圖片
- (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView{
return [UIImage imageNamed:@"Screenshot_Slack"];
}
到這里簡單的占位圖已經做好了，是不是覺得 so 輕松 so easy！下面是效果圖：
效果圖
三、接下來是 DZNEmptyDataSet 的其它使用方法
DZNEmptyDataSet 框架擴展性極強，可以在占位圖上添加圖片、標題文字、詳情文字等等一堆東西，總有一款適合你！下邊是一些具體用法及效果圖。
3.1 添加標題文字
// 返回標題文字
- (NSAttributedString *)titleForEmptyDataSet:(UIScrollView *)scrollView {
NSString *text = @"這是一張空白頁";
NSDictionary *attribute = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:18.0f], NSForegroundColorAttributeName: [UIColor darkGrayColor]};
return [[NSAttributedString alloc] initWithString:text attributes:attribute];
}
返回標題文字
3.2 添加詳情文字
// 返回詳情文字
- (NSAttributedString *)descriptionForEmptyDataSet:(UIScrollView *)scrollView { NSString *text = @"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈";
NSMutableParagraphStyle *paragraph = [NSMutableParagraphStyle new];
paragraph.lineBreakMode = NSLineBreakByWordWrapping;
paragraph.alignment = NSTextAlignmentCenter;
NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:14.0f], NSForegroundColorAttributeName: [UIColor lightGrayColor], NSParagraphStyleAttributeName: paragraph};
return [[NSAttributedString alloc] initWithString:text attributes:attribute];
}
詳情文字
3.3 添加可以點擊的按鈕 上面帶文字
// 返回可以點擊的按鈕 上面帶文字
- (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
NSDictionary *attribute = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:17.0f]};
return [[NSAttributedString alloc] initWithString:@"哈嘍" attributes:attribute];
}
//#pragma mark - DZNEmptyDataSetDelegate
// 處理按鈕的點擊事件
- (void)emptyDataSet:(UIScrollView *)scrollView didTapButton:(UIButton *)button {
NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"https://www.baidu.com"]];
if ([[UIApplication sharedApplication] canOpenURL:url]) {
[[UIApplication sharedApplication] openURL:url];
}
}
可以點擊的按鈕
3.4 空白區域點擊事件
// 空白區域點擊事件
- (void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view {
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"哈哈" message:@"最近咋樣" delegate:nil cancelButtonTitle:@"別點我" otherButtonTitles:@"點我干啥", nil];
[alert show];
}
空白區域點擊事件
3.5 改變標題文字與詳情文字的距離
// 標題文字與詳情文字的距離
- (CGFloat)spaceHeightForEmptyDataSet:(UIScrollView *)scrollView {
return 100;
}
標題文字與詳情文字的距離
3.6 空白區域的顏色自定義
// 返回空白區域的顏色自定義
- (UIColor *)backgroundColorForEmptyDataSet:(UIScrollView *)scrollView {
return [UIColor cyanColor];
}
空白區域的顏色自定義
3.7 標題文字與詳情文字同時調整垂直偏移量
// 標題文字與詳情文字同時調整垂直偏移量
- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView {
return -100;
}
標題文字與詳情文字同時調整垂直偏移量
3.8 添加動畫效果
#pragma mark - DZNEmptyDataSetSource
// 返回圖片
- (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView{
return [UIImage imageNamed:@"icon_wwdc"];
}
- (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;
}
#pragma mark - DZNEmptyDataSetDelegate
// 圖片是否要動畫效果，默認NO
- (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView {
return YES;
}
動畫效果
3.9 其它方法
#pragma mark - DZNEmptyDataSetSource
// 返回圖片的 tintColor
- (UIColor *)imageTintColorForEmptyDataSet:(UIScrollView *)scrollView {
return [UIColor yellowColor];
}
// 返回可點擊按鈕的 image
- (UIImage *)buttonImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
return [UIImage imageNamed:@"icon_wwdc"];
}
// 返回可點擊按鈕的 backgroundImage
- (UIImage *)buttonBackgroundImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
return [UIImage imageNamed:@"icon_wwdc"];
}
// 返回自定義 view
- (UIView *)customViewForEmptyDataSet:(UIScrollView *)scrollView {
return nil;
}
#pragma mark - DZNEmptyDataSetDelegate
// 是否顯示空白頁，默認YES
- (BOOL)emptyDataSetShouldDisplay:(UIScrollView *)scrollView {
return YES;
}
// 是否允許點擊，默認YES
- (BOOL)emptyDataSetShouldAllowTouch:(UIScrollView *)scrollView {
return YES;
}
// 是否允許滾動，默認NO
- (BOOL)emptyDataSetShouldAllowScroll:(UIScrollView *)scrollView {
return YES;
}
// 圖片是否要動畫效果，默認NO
- (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView {
return YES;
}
// 空白頁將要出現
- (void)emptyDataSetWillAppear:(UIScrollView *)scrollView {
}
// 空白頁已經出現
- (void)emptyDataSetDidAppear:(UIScrollView *)scrollView {
}
// 空白頁將要消失
- (void)emptyDataSetWillDisappear:(UIScrollView *)scrollView {
}
// 空白頁已經消失
- (void)emptyDataSetDidDisappear:(UIScrollView *)scrollView {
}
------------------華麗的分割線------------------
小結：本小白只在 UITableView 上試用了 DZNEmptyDataSet 框架。。。公司要求年前再迭代一個版本，時間不太充裕因此沒逐一去試。。。哪位大神如果試了 UICollectionView 或 UIScrollView 發現有問題，還請不吝賜教！
