iOS開發之 - DZNEmptyDataSet 空白頁占位圖

發現了一個很有用的第三方,DZNEmptyDataSet,用起來也極其方便,這里給大家分享下!先說下其用途:DZNEmptyDataSet 主要用于 UITableView 以及 UICollectionView 頁面空白時展示(據說也可以用于 UIScrollView, 有興趣的童鞋可以試試)。開發中之所以用占位圖,是為了提高用戶體驗;而為什么選 DZNEmptyDataSet 而不自行設計占位圖(做過占位圖的童鞋應該會覺得做占位圖并不難,但沒有對比就沒有傷害,你如果試用了 DZNEmptyDataSet ,就會頓悟自己做占位圖是多么地繁瑣)。坦白說,DZNEmptyDataSet 是一個為了讓開發人員“變懶”的第三方(貌似每個第三方都是這樣的“宗旨”),接下來我們就一起看下 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 發現有問題,還請不吝賜教!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容