• GitHub地址:DZNEmptyDataSet
  • DZNEmptyDataSet

    DZNEmptyDataSet 是基于 UITableViewUICollectionView 的范畴/扩展(category)类,它可以在空白页面上显示提示信息。

    这是 iOS 内建的标准,用于处理空表和集合视图。默认情况下,如果你的表视图是空的,屏幕上什么也不会显示,它给用户的体验不是很好。

    使用这个库,你只需要实现一些协议,iOS 就会很好地处理集合视图,然后合理美观地显示出用户信息。

    支付宝-查询我的挂号记录

    其他效果图参考

    使用该框架的项目

    将你的项目添加到列表中 并且提供一张(320px)的效果图。

    空数据设计模式(The Empty Data Set Pattern)

    也被称为 Empty state 或者 Blank Slate

    大多数应用程序会显示内容列表、数据集(在 iOS 程序猿眼里,这里通常指的是 UITableViewUICollectionView。),但有些时候这些页面可能是空白的,特别是对于那些刚创建空账户的新用户来说。 空白界面会对用户造成不知道如何进行下一步操作的困惑,因为用户不知道屏幕空白的原因是错误/Bug、网络异常,还是用户应该自己新建内容以恢复APP的正常状态。

    请阅读这篇非常有趣的文章 Designing For The Empty States

    iOS 9人机界面指南 1.4.2 中也提及过类似的指引:

    如果应用中所有的功能当前都不可用,那么应该显示一些内容来解释当前的情形,并建议用户如何进行后续操作。这部分内容给予了用户以反馈,使用户相信你的应用现在没问题。同时这也可以稳定用户情绪,让他们决定是否要采取纠正措施,继续使用应用,还是切换到另一个应用。

    Empty Data Sets 有助于:

    • 避免使用空白屏幕,并向用户传达屏幕空白的原因。
    • 用户指引(特别是作为引导页面)。
    • 避免其他中断机制,如显示错误警报。
    • 一致性和改善用户体验。
    • 传递品牌价值。

    特性

    • 兼容 UITableViewUICollectionView 。 也兼容 UISearchDisplayControllerUIScrollView
    • 通过显示图片、标题、详细文本、按钮,提供布局外观的多种可能性。
    • 使用 NSAttributedString 类提供更容易定制的外观。
    • 使用 Auto Layout 以自动将内容集中到表格视图,并支持自动旋转。 也接受自定义垂直和水平对齐。
    • 自定义背景颜色。
    • 允许在整个表格矩形上轻敲手势(有助于放弃第一个响应者或类似操作)。
    • 提供更高级的定制,允许自定义视图。
    • 兼容 Storyboard
    • 兼容iOS 6,tvOS 9或更高版本。
    • 兼容iPhone,iPad和Apple TV。
    • 支持 App Store 。

    这个库已经被设计为不需要通过扩展(extend) UITableViewUICollectionView 类的方式来实现了。 使用 UITableViewControllerUICollectionViewController 类仍然可以奏效。 只要通过遵循 DZNEmptyDataSetSourceDZNEmptyDataSetDelegate 协议,您将能够完全自定义应用程序的空状态的内容和外观。

    安装

    支持 CocoaPods 导入

    支持 CocoaPods 导入
    pod 'DZNEmptyDataSet'
    导入
    #import "UIScrollView+EmptyDataSet.h"
    作为框架导入:
    #import <DZNEmptyDataSet/UIScrollView+EmptyDataSet.h>
    遵循协议
    // 遵守 DZNEmptyDataSetSource 、DZNEmptyDataSetDelegate 协议
    @interface MainViewController : UITableViewController <DZNEmptyDataSetSource, DZNEmptyDataSetDelegate> - (void)viewDidLoad
    {
    [super viewDidLoad]; self.tableView.emptyDataSetSource = self;
    self.tableView.emptyDataSetDelegate = self; // 删除单元格分隔线的一个小技巧
    self.tableView.tableFooterView = [UIView new];
    }

    实现数据源协议

    DZNEmptyDataSetSource ——实现该协议,可以设置你想要在空白页面显示的内容,并且充分利用 NSAttributedString 功能来自定义文本外观。

  • 空白页显示图片
    • - (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView {
      return [UIImage imageNamed:@"lion"];
      }

      效果图:

      空白页显示标题
    • - (NSAttributedString *)titleForEmptyDataSet:(UIScrollView *)scrollView {
      NSString *title = @"狮子王";
      NSDictionary *attributes = @{
      NSFontAttributeName:[UIFont boldSystemFontOfSize:18.0f],
      NSForegroundColorAttributeName:[UIColor darkGrayColor]
      };
      return [[NSAttributedString alloc] initWithString:title attributes:attributes];
      }

      效果图:

      空白页显示详细描述

      - (NSAttributedString *)descriptionForEmptyDataSet:(UIScrollView *)scrollView {
      NSString *text = @"你好,我的名字叫辛巴,大草原是我的家!"; 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];
      }

      空白页显示按钮:示例1

      • - (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
        // 设置按钮标题
        NSString *buttonTitle = @"喜欢我就点点点点我";
        NSDictionary *attributes = @{
        NSFontAttributeName:[UIFont boldSystemFontOfSize:17.0f]
        };
        return [[NSAttributedString alloc] initWithString:buttonTitle attributes:attributes];
        • 按钮点击高亮效果

        - (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
        NSString *text = @"Learn more";
        UIFont *font = [UIFont systemFontOfSize:15.0];
        // 设置默认状态、点击高亮状态下的按钮字体颜色
        UIColor *textColor = [UIColor colorWithHex:(state == UIControlStateNormal) ? @"007ee5" : @"48a1ea"]; NSMutableDictionary *attributes = [NSMutableDictionary new];
        [attributes setObject:font forKey:NSFontAttributeName];
        [attributes setObject:textColor forKey:NSForegroundColorAttributeName]; return [[NSAttributedString alloc] initWithString:text attributes:attributes];
        }

        按钮标题中 点击重试 四个字加粗:

        #pragma mark - DZNEmptyDataSetSource
        
        - (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView {
        return [UIImage imageNamed:@"placeholder_No_Network"];
        } - (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
        NSString *text = @"网络不给力,请点击重试哦~"; NSMutableAttributedString *attStr = [[NSMutableAttributedString alloc] initWithString:text];
        // 设置所有字体大小为 #15
        [attStr addAttribute:NSFontAttributeName
        value:[UIFont systemFontOfSize:15.0]
        range:NSMakeRange(, text.length)];
        // 设置所有字体颜色为浅灰色
        [attStr addAttribute:NSForegroundColorAttributeName
        value:[UIColor lightGrayColor]
        range:NSMakeRange(, text.length)];
        // 设置指定4个字体为蓝色
        [attStr addAttribute:NSForegroundColorAttributeName
        value:HexColor(@"#007EE5")
        range:NSMakeRange(, )];
        return attStr;
        } - (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 [UIImage imageNamed:@"placeholder_return"];
        } - (void)emptyDataSet:(UIScrollView *)scrollView didTapButton:(UIButton *)button {
        [self.navigationController popViewControllerAnimated:YES];
        } 设置按钮的背景颜色
        - (nullable UIImage *)buttonBackgroundImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state;
        设置按钮图片
        - (UIImage *)buttonImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
        return [UIImage imageNamed:@"Image"];
        }
        - (UIColor *)imageTintColorForEmptyDataSet:(UIScrollView *)scrollView {
        return [UIColor yellowColor];
        }

        效果图:就是设置图片颜色,脑补中。。。


        • 设置空白页面的背景色
                • - (UIColor *)backgroundColorForEmptyDataSet:(UIScrollView *)scrollView {
            UIColor *appleGreenColor = [UIColor colorWithRed:199/255.0 green:237/255.0 blue:204/255.0 alpha:1.0];
        return appleGreenColor;
        }

        效果图:


        • 如果你需要设置更复杂的布局,也可以返回自定义视图
        - (UIView *)customViewForEmptyDataSet:(UIScrollView *)scrollView {
        UIActivityIndicatorView *activityView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
        [activityView startAnimating];
        return activityView;
        }

        效果图:


        • 设置图片动画
        #pragma mark - DZNEmptyDataSetSource
        #pragma mark 设置空白页图片
        - (nullable UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView {
        return [UIImage imageNamed:@"lion"];
        } #pragma mark 设置图片动画: 旋转
        - (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。
        // 确保从 imageAnimationForEmptyDataSet 返回有效的CAAnimation对象:
        - (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView {
        return YES;
        }

        效果图:

        • 图像视图动画:缩放
        #pragma mark - DZNEmptyDataSetSource
        #pragma mark 设置空白页图片
        - (nullable UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView {
        return [UIImage imageNamed:@"computer"];
        } #pragma mark 设置图片动画
        - (CAAnimation *)imageAnimationForEmptyDataSet:(UIScrollView *)scrollView
        {
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
        animation.duration = 1.25;
        animation.cumulative = NO;
        animation.repeatCount = MAXFLOAT;
        animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 45, 45)]; return animation;
        } #pragma mark - DZNEmptyDataSetDelegate
        - (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView {
        return YES;
        }

        效果图:


        • 我们发现在官方的 Applications Demo 应用中的空白视图中的动画是这样的:

        空白视图默认情况下显示一张【静态图片】,当用户点击【静态图片】以后,该图片会被替换成【加载转圈】。

        通过阅读源码,可以发现它是这样工作的:

        1. 首先在遵循协议的.m文件中声明了一个 BOOL 类型的变量,用来记录空白页面当前的加载状态:
        @property (nonatomic, getter=isLoading) BOOL loading;
        1. 然后为该属性设置 setter 方法,重新加载空数据集视图:
        - (void)setLoading:(BOOL)loading
        {
        if (self.isLoading == loading) {
        return;
        } _loading = loading;
        // 每次 loading 状态被修改,就刷新空白页面。
        [self.tableView reloadEmptyDataSet];
        }
        1. 接下来要实现几个关联协议

          #pragma mark - DZNEmptyDataSetSource
          #pragma mark 设置空白页图片
          - (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView {
          if (self.isLoading) {
          // 圆形加载图片
          return [UIImage imageNamed:@"loading_imgBlue_78x78"];
          }else {
          // 默认静态图片
          return [UIImage imageNamed:@"staticImage"];
          }
          } #pragma mark 图片旋转动画
          - (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
          #pragma mark 是否开启动画
          - (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView {
          return self.isLoading;
          } #pragma mark 空白页面被点击时刷新页面
          - (void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view {
          // 空白页面被点击时开启动画,reloadEmptyDataSet
          self.loading = YES;
          // 执行加载任务...
          dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
          // 任务加载完成后关闭动画,reloadEmptyDataSet
          self.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 {
        return 25.0f;
        }

        效果图:


        实现代理协议

        DZNEmptyDataSetDelegate ——实现该协议,可以设置你期望从空白页面返回的的行为,并接收用户交互事件。

        • 设置是否 渲染和显示空白页面(默认为YES):
        - (BOOL)emptyDataSetShouldDisplay:(UIScrollView *)scrollView {
        return YES;
        }
        • 设置是否 以淡入方式显示空白页面 。 (默认值为YES)
        - (BOOL)emptyDataSetShouldFadeIn:(UIScrollView *)scrollView {
        return YES;
        }
        • 强制显示空数据集:当项目数量大于0时,请求代理是否仍应显示空数据集。(默认值为NO
        - (BOOL)emptyDataSetShouldBeForcedToDisplay:(UIScrollView *)scrollView;
        • 获取交互权限:是否接收用户点击事件(默认为YES):
        - (BOOL)emptyDataSetShouldAllowTouch:(UIScrollView *)scrollView {
        // 如果正在加载中,则不响应用户交互。
        return !self.isLoading;
        }
        • 获取滚动权限(默认值为NO):
        - (BOOL)emptyDataSetShouldAllowScroll:(UIScrollView *)scrollView;
        • 获取图像动画权限:是否开启图片动画(默认值为NO):
        - (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView {
        return YES;
        }
        • 空白数据集 视图被点击 时触发该方法:
        - (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] 是刷新内容的唯一方法。

          • 设置图片的 tintColor

DZNEmptyDataSet——空白数据集显示框架的更多相关文章

  1. excel2013 打开为灰色空白 左下角显示就绪 要把文件拖进去才能打开!

    最近电脑excel2013 打开总是为灰色空白 左下角显示就绪 要把文件拖进去或者在此再打开一个才能打开! 在网上搜了一下,我是使用下面这个方法解决的: 步骤一:请您在“开始”菜单的搜索框中输入“re ...

  2. 基于OpenCV之视频读取,处理和显示框架的搭建(一)

    主要包括以下内容: 1.使用的主要函数的说明. 2.两个实例:视频读取和显示.搭建视频读取和处理框架,调用canny函数提取边缘并显示. 3.一些注意事项和代码说明. 一.使用的主要函数 1.延时函数 ...

  3. 织梦dedecms出现系统基本参数空白或显示Call to undefined function make_hash()

    织梦dedecms出现系统基本参数空白或显示Call to undefined function make_hash() 最新的织梦版本(2018-01-09)修改了include文件夹中的commo ...

  4. QT显示框架嵌入Vs控制台工程

      一.一些准备工作: 1.安装Qt for VS 的插件: 安装Qt for VS 的插件 下载地址:http://download.qt.io/official_releases/vsaddin/ ...

  5. 可变卷积Deforable ConvNet 迁移训练自己的数据集 MXNet框架 GPU版

    [引言] 最近在用可变卷积的rfcn 模型迁移训练自己的数据集, MSRA官方使用的MXNet框架 环境搭建及配置:http://www.cnblogs.com/andre-ma/p/8867031. ...

  6. win7及以上系统打开chm空白或显示"无法打开"的2个解决方案

    1:在文件上右键单击属性.选择解锁. 2:确保文件路径中没有特殊字符.比如"#".如果路径中存在特殊字符,chm文件可能找不到路径而无法显示.如 d:\资料\c#\***.chm. ...

  7. Android显示框架:自定义View实践之绘制篇

    文章目录 一 View 二 Paint 2.1 颜色处理 2.2 文字处理 2.3 特殊处理 三 Canvas 3.1 界面绘制 3.2 范围裁切 3.3 集合变换 四 Path 4.1 添加图形 4 ...

  8. 使用torchvision下载数据集显示没有模板

    配置: Anaconda+Windows+py3.7 一:首先先卸载开始的torchvision:pip uninstall torchvision 二:找到官网:https://pypi.org/p ...

  9. vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

    1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...

随机推荐

  1. java Comparator比较器排序法

    注意:排序的字段不为空,否则抛出空指针异常! 第一步:先编写一个比较器类 如下: 第二步:此集合的对象 EO 必须重写 此equals 方法 如图: 第三步:调用使用此比较器 如图:

  2. LeetCode求能够装得最多的水

    费了半天劲还是没想出来,然后跑到网上找答案,明白了是怎么回事儿了,就是不知道为啥自己没有想出来. 明天再搞~~~ 国庆快乐~~~ 一年了~~~~~ 明年今日~~我会在哪儿 =====2017.9.30 ...

  3. gdb调试段错误及使用

    在编程调试中,经常出现段错误,此时可用gdb调试.具体方法为注册段错误信号处理函数,在处理函数中启动gdb.具体代码如下: void segv_handler(int no) { ]; ]; FILE ...

  4. UVA 11888 - Abnormal 89&#39;s(Manachar)

    UVA 11888 - Abnormal 89's option=com_onlinejudge&Itemid=8&page=show_problem&category=524 ...

  5. iOS开发之NewsstandKit.framework的使用

    本文转载至 http://mobile.51cto.com/iphone-423385.htm   系统提供NewsstandKit.framework来支持newsstand类型的程序,就是在spr ...

  6. ElasticSearch(二)核心概念

    elasticsearch核心概念 (1)Near Realtime(NRT):近实时,两个意思,从写入数据到数据可以被搜索到有一个小延迟(大概1秒):基于es执行搜索和分析可以达到秒级 (2)Clu ...

  7. Qt JSON解析生成笔记

    对于这样一段json { "name": "布衣食", "gender": "Male", "age" ...

  8. AndroidDragAndDrop.java

    以下代码使用ApiDemos-debug.apk进行测试 package com.saucelabs.appium; import io.appium.java_client.AppiumDriver ...

  9. emWin 移植 - 基于红牛开发板

    一直想利用所学的东西自己设计一个精致一些的作品,手头正好有一块红牛开发板,就先用它来写一些软件,熟悉一下过程和一些想法的可行性.首先当然是选择一个操作系统了,对比了几种之后选择了emWin.那就移植一 ...

  10. Linux-VMware三种网络模式

    虚拟机网络模式 对于VMware虚拟软件来说,有三种网络模式 1.桥接 2.NAT 3.Host-only 桥接 桥接网络是指本地物理网卡和虚拟网卡通过VMnet0虚拟交换机进行桥接,因此物理网卡和虚 ...