tableview伏乞数据再次来到前显示占位cell,空白数

前端时间在有的使用中(facebook,支付宝,简书等)日常会看出类似下图的典范,在tableview列表乞请数据时显得的一对默许单元格,看起来本身感觉还不易,于是想自个儿写多少个比较通用一点的。

近些日子因为有这么几个供给,正是当页面数据为空时要来得一个基础页面,指引顾客打开刷新,故找到DZNEmptyDataSet作为我们的基础框架使用,在此处跟大家介绍下它的粗略用法,招待交换,喜欢的同班记得点赞哦。

app 展现列表内容时, 在某不平日时可能数量为空(等待网络伏乞/网络央求退步)等, 增多三个空白提示页将实惠消除客商或许产生的忧虑或混乱. 并得以帮忙客户管理难点.

市道淑节经有点成熟的空白页框架,最优良的正是利用DZNEmptyDataSet.

可是其使用DZNEmptyDataSetDelegate,DZNEmptyDataSetSource来定制空白页元素,使用时较为繁琐.

作者借鉴其原理的根底上,制作了对标框架EmptyPage来简化常常项目开辟.

EmptyPage 历时1年, 在作者司项目中安静应用迭代6个本子,算是相比较牢固.

支持UICollectionView & UITableView.

ps: 如今阶段只提供 swift 版本.

  • GitHub地址:DZNEmptyDataSet
  • star:9000

图片 1ep.png笔者的主见是伸手从前,在tableViewdataSource协议numberOfRowsInSection:中回到固定的个数,诉求之后在回去数据源的个数;同理在cellForTableView:其一公约中也是一致。

写在后边

DZNEmptyDataSet是一个下拉式的UITableView/UICollectionView父类,在列表没有内容要显得时利用Empty DataSet格局。
举个例子说:大许多应用程序都会显示内容列表(datasets),不过有些情状下可能会是空的,非常是新客商的账户音信。一旦发生错误或bug,空白显示器会使客户吸引,不精晓要做什么,所以Empty DataSet格局能够给客户提醒相关音讯。

image image
 ⭐️⭐️⭐️ 以下内容来源于官方源码、 README 文档、测试 Demo 以及个人使用总结 !

而是那样做起来相对相比较麻烦,要是须要上有非常多列表页都要这么的遵循,那将要各样页面都要拓宽判断,花费比较高。

一:概述

该主题部分 作为二个单身的子库 达成, 可使用 以下格局单独引用.

pod 'EmptyPage/Core'

切实代码可查阅 Github Link, 一级轻便.

[TOC]

后来作者想,比不上直接将上海体育场面那么些视图当作tableview的空白页来展现,然后通过委托格局来给受委托者来处理。那样一来,对于这种意义,就幸免了每一遍都要实行决断,也必定水准上贯彻了代码的解耦。

作用

- 精简开发人员处理列表为空的操作
- 提高应用中出现列表空白的交互体验
  1. ##### 为UIScrollView添加emptyView对象作为空白页实例:

    public extension UIScrollView { public var emptyView: UIView?}
    
  2. ##### Method Swizzling方法替换掉UITableView UICollectionView 中部分相关函数.以下拿UITableView 举例:

    // DZNEmptyDataSet 对 autolayout 项目不太友好. (也可能本人没深度使用...)// EmptyPage // UITableView frame 变化相关函数open func layoutSubviews()open func layoutIfNeeded()// 数据源增减相关函数open func insertRows(at indexPaths: [IndexPath], with animation: UITableView.RowAnimation)open func deleteRows(at indexPaths: [IndexPath], with animation: UITableView.RowAnimation)open func insertSections(_ sections: IndexSet, with animation: UITableView.RowAnimation)open func deleteSections(_ sections: IndexSet, with animation: UITableView.RowAnimation)open func reloadData()
    
  3. ##### 在数据/frame变化时剖断空白页呈现与遮掩.

    func setEmptyView ->  { oldEmptyView?.removeFromSuperview guard bounds.width != 0, bounds.height != 0 else { return } var isHasRows = false let sectionCount = dataSource?.numberOfSections? ?? numberOfSections for index in 0..<sectionCount { if numberOfRows(inSection: index) > 0 { isHasRows = true break } } isScrollEnabled = isHasRows if isHasRows { emptyView?.removeFromSuperview() return } guard let view = emptyView else{ return } view.frame = bounds addSubview sendSubview(toBack: view) }
    
  4. 使用

    UITableView().emptyView = CustomView()UICollectionView().emptyView = CustomView()
    

    UITableView().emptyView 第一遍被赋值时才会开展 Method Swizzling 相关函数.

DZNEmptyDataSet 是基于 UITableViewUICollectionView 的范畴/扩充类,它能够在空白页面上展现提示消息。

1.装置空白代理

功能

- 应用列表出错或无数据时显示提示
- 可自定义列表空白时显示的背景颜色、视图及垂直和水平对齐
- 可自定义布局外观
- 可自定义动画
- 支持点击手势(按钮或视图)

DZNEmptyDataSet 的打响离不开其可中度定制化的模版视图.但其繁琐的 delegate apis 远不及自定义视图来的有利, 其对自定义视图的援救也并不友善.

EmptyPage 优先协理 自定义视图,并附赠 3 套能够凑合看的沙盘视图(援助一级高自定义调整,但究竟UI大家说了不算...)

利用 以下方式 则含有该部分剧情:

pod 'EmptyPage'

那是 iOS 内建的正统,用于拍卖空表和汇集视图。暗许情状下,假若您的表视图是空的,显示器上如何也不会来得,它给客户的经验不是很好。

- setupTableView { _tableView.dataSource = self; _tableView.delegate = self; _tableView.emptyCellDataSource = self; _tableView.emptyCellDelegate = self; [_tableView reloadData]; [_tableView reloadEmptyDataSource];}

优点

- 避免白屏,告诉用户屏幕为何为空;
- 提示用户下一步的操作;
- 避免其它中断机制,比如显示错误提醒;
- 保持连续性,改善用户体验;
- 展示品牌标示。
  1. ##### 自定义视图

    • 仅帮衬autolayout布局方式

      不使用 autolayout 模式:

      1. pod 'EmptyPage/Core'

      2. UITableView().emptyView = CustomView()

    • 自定义视图须求autolayout实现自适应高

      能够参考 内置的几套模板视图的牢笼完毕.

    • 添加 EmptyPageContentViewProtocol 协议

      该左券暗许达成了将自定义视图居中约束至三个backgroundView上.

      通用性思量: backgroundView.frame 与 tableView.frame 一样

      示例:

      class CustomView: EmptyPageContentViewProtocol{ ...}let customView = CustomView()UITableView().emptyView = customView.mix()
      

      不增加该公约,可选择以下措施:

      UITableView().emptyView = EmptyPageView.mix(view: customView)

    • 视图关系

      图片 2视图关系

  2. ##### 内置模板视图

    **特性: **

    1. 支撑链式调用.
    2. 要素援救中度自定义.
    3. 一律服从自定义视图的标准完成.

    ps: 完全等同提前写好的自定义模板视图.

    • 近些日子得以选择3套基本的模版视图.

      • 文字模板(EmptyPageView.ContentView.onlyText)

      • 图形模板(EmptyPageView.ContentView.onlyImage)

      • 混合模板(EmptyPageView.ContentView.standard)

    文字模板 图片模板 混合模板

选用这一个库,你只须求达成部分说道,iOS 就能够很好地管理集结视图,然后合理美观地展现出客户音讯。

2.兑现合同方式

兼容

- UITableView
- UICollectionView
- UISearchDisplayController
- UIScrollView

- storyBoard
- iOS 6 ~
- iPhone,iPad,苹果电视
  • 使用

    • 示例:

      UITableView().emptyView = EmptyPageView.ContentView.standard .change(hspace: .button, value: 80) .change(height: .button, value: 60) .change(hspace: .image, value: 15) .config(button: {  in item.backgroundColor = UIColor.blue item.contentEdgeInsets = UIEdgeInsets(top: 8, left: 20, bottom: 8, right: 20) }) .set(image: UIImage(named: "empty-1002")!) .set(title: "Connection failure", color: UIColor.black, font: UIFont.boldSystemFont(ofSize: 24)) .set(text: "Something has gone wrong with the internet connection. Let's give it another shot.", color: UIColor.black, font: UIFont.systemFont(ofSize: 15)) .set(buttonTitle: "TRY AGAIN") .set(tap: { // 点击事件 }) .mix()
      
  • Apis

    模板视图中计算起来唯有三种配备函数:

    • 自律配置函数: func change -> Self

      封锁函数具体可配备项应用枚举的样式限定.(以防改变/抵触自适应高度相关约束)

      enum HSpaceType { } // 修改视图水平方向上的距离

      enum VSpaceType { } // 修改视图垂直方向上的区间

      enum HeightType { } // 修改视图具体高度

      例如:

      standardView.change(hspace: .button, value: 80) .change(height: .button, value: 60)
      
    • 控件配置函数: func set -> Self

      提供了简便的文本/字体/图片/颜色配置.比如:

      standardView.set(title: "Connection failure", color: UIColor.black, font: UIFont.boldSystemFont(ofSize: 24))
      
    • 控件自定义配置函数: func config(element: { in ... }) -> Self

      重临七个安然无事的控件,可供深度配置. 例如:

      standardView.config(button: {  in item.backgroundColor = UIColor.blue item.contentEdgeInsets = UIEdgeInsets(top: 8, left: 20, bottom: 8, right: 20) })
      
    • 视图混合函数func mix():

      该函数由 EmptyPageContentViewProtocol 左券暗许落成.

      功效: 将视图约束至 backgroundView 上

      ps: 别忘了...

图片 3图片 4图片 5支付宝-查询本身的挂号记录

#pragma mark - UITableViewEmptyCellDataSource -- (NSInteger)tableView:(UITableView *)tableView numberOfUITableViewEmptyCellInSection:(NSInteger)section { return floor(self.view.bounds.size.height/70.0);}- (UITableViewCell * _Nonnull)cellForTableView:(UITableView *)tableView { return [EmptyCell cellWithTableView:tableView];}#pragma mark - UITableViewEmptyCellDelegate -- heightForEmptyCellAtIndexPath:(NSIndexPath *)indexPath { return 70.0;}

可行性

在ios开采中,tableview和collectionview是非日常用的控件,在开采中为了拉长交互体验,大家会对列表为空或数额央求错误的时候显得二个视图以提示客商。假设在controller中通过代码调控提示视图的体现和掩盖,会呈现混乱不佳调节,可爱抚性低。该库通过磋商代理格局把提醒视图的逻辑提炼出来,轻易易用,可定制性高,升高了代码的维护性和可读性。

花色开源链接: Github/EmptyPage

其余职能图参谋

  • pttrns - Empty States
  • calltoidea - Empty Page
  • Mobile Patterns - Empty Data Sets

将您的品种拉长到列表中 而且提供一张的效果与利益图。

也被叫作 Empty state 可能 Blank Slate。

绝大大多施用程序会呈现内容列表、数据集(在 iOS 程序员眼里,这里平时指的是 UITableViewUICollectionView。),但有一点时候这么些页面或然是赤贫如洗的,极其是对此这多少个刚创制空账户的新客商来讲。 空白分界面会对客商产生不亮堂怎么样进展下一步操作的迷离,因为顾客不明白显示器空白的缘由是错误/Bug、网络非常,还是客户应该团结新建内容以回复应用程式的例行状态。

请阅读那篇十分有意思的小说 Designing For The Empty States。

在 iOS 9人机分界面指南 1.4.2 中也谈到过类似的指导:

若是运用中有所的效应当前都不可用,那么相应展现一些内容来解释当前的气象,并建议客商怎么样进展三番两次操作。那有的内容予以了客户以报告,使客户相信您的选拔以后没难题。同有时间这也足以稳固客商心境,让他们调控是或不是要运用校对措施,继续选择使用,依然切换来另一个运用。

图片 6

Empty Data Sets 有助于:

  • 制止选拔空白荧屏,并向客户传达显示器空白的原故。
  • 客户教导(特别是当做教导页面)。
  • 防止任何中断机制,如出示错误警报。
  • 一致性和革新客商体验。
  • 传递品牌价值。
  • 兼容 UITableViewUICollectionView 。 也兼容 UISearchDisplayControllerUIScrollView
  • 通过突显图片、标题、详细文本、按键,提供布局外观的有余大概性。
  • 使用 NSAttributedString 类提供更易于定制的外观。
  • 使用 Auto Layout 以自行将内容集中到表格视图,并扶助自动旋转。 也承受自定义垂直和程度对齐。
  • 自定义背景颜色。
  • 允许在总体表格矩形上轻敲手势(有利于扬弃首个响应者或近乎操作)。
  • 提供越来越高端的定制,允许自定义视图。
  • 兼容 Storyboard
  • 包容iOS 6,tvOS 9或越来越高版本。
  • 兼容iPhone,iPad和Apple TV。
  • 支持 App Store 。

本条库已经被规划为无需通过扩展 UITableViewUICollectionView 类的不二等秘书诀来完毕了。 使用 UITableViewControllerUICollectionViewController 类还是能够奏效。 只要经过遵循 DZNEmptyDataSetSourceDZNEmptyDataSetDelegate 协议,您将能够统统自定义应用程序的空状态的原委和外观。

支持 CocoaPods 导入

pod 'DZNEmptyDataSet'

一体化文档参照他事他说加以考察:CocoaPods 自动生成文书档案

3.获取数据时刷新空白页

主意简单介绍

个人博客链接: 四方田

导入

#import "UIScrollView EmptyDataSet.h"

作为框架导入:

#import <DZNEmptyDataSet/UIScrollView EmptyDataSet.h>
- fetchData { [self.datasource removeAllObjects]; [self.view addSubview:self.activityIndicatorView]; [_activityIndicatorView startAnimating]; for (int i=0; i<22; i  ) { [self.datasource addObject:@]; } dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [_activityIndicatorView stopAnimating]; [_activityIndicatorView removeFromSuperview]; [_tableView reloadData]; [_tableView reloadEmptyDataSource]; });}
DataSource:数据源方法

空白页的标题

注:
1:该标题并不是页面的标题,是提示视图的标题
2:必须返回富文本(可设置其颜色,字号,风格等。或:nil)
   如:
   NSString * title = [NSString stringWithFormat:@"洪荒之力"];
   return [[NSAttributedString alloc] initWithString:title attributes:nil];

- (NSAttributedString *)titleForEmptyDataSet:(UIScrollView *)scrollView;

空白页正文

注:
必须返回富文本(可设置其颜色,字号,风格等。或:nil,方法同上)
- (NSAttributedString *)descriptionForEmptyDataSet:(UIScrollView *)scrollView;

空白页图片

注:
如果直接返回图片,显示的图片会是图片原本的尺寸。可以在该方法中重置图片大小再return。
- (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView;

空白页图片的色彩

注:
该方法一般不用,默认为nil
- (UIColor *)imageTintColorForEmptyDataSet:(UIScrollView *)scrollView;

空白页图片(视图)动画

注:
该方法是设置图片或视图的动画,可设置动画组CAAnimationGroup
- (CAAnimation *) imageAnimationForEmptyDataSet:(UIScrollView *) scrollView;

空白页中开关上文本

注:
1:该方法设置按钮上的文字
2:必须返回富文本
3:state:按钮点击状态。UIControlState中按需选择
4:该方法只是返回按钮文字,可结合一下方法设置按钮背景样式
   - (UIImage *)buttonImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state;
   - (UIImage *)buttonBackgroundImageForEmptyDataSet:(UIScrollView *)scrollView forState: (UIControlState)state;

- (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state;

设置按键前景图

注:
该方法设置的是按钮的前景图,所以,图片将会覆盖(buttonTitleForEmptyDataSet)方法返回的文本。源码中:先判断是否有前景图,如果没有,才设置文本。
- (UIImage *)buttonImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state;

安装按键背景图

注:
1:state:按钮点击状态。UIControlState中按需选择
- (UIImage *)buttonBackgroundImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state;

安装空白页背景颜色

注:
1:默认为clear,无色,即会显示所在controller背景色
- (UIColor *)backgroundColorForEmptyDataSet:(UIScrollView *)scrollView;

自定义空白页视图

注:
1:定义视图显示而不是默认的视图,如标签,imageview和按钮。默认是nil
2:返回一个自定义视图将忽略-offsetForEmptyDataSet和-spaceHeightForEmptyDataSet配置。
- (UIView *)customViewForEmptyDataSet:(UIScrollView *)scrollView;

安装视图偏移量

注:
默认是CGPointZero:即controller视图的左上角
- (CGPoint)offsetForEmptyDataSet:(UIScrollView *)scrollView DZNEmptyDataSetDeprecated(-verticalOffsetForEmptyDataSet:);
- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView;

安装空白页title、description、button等的竖直间隔

注:
1:默认是11 pts
2:该方法设置的是两两之间的间隔,所以是统一的。如果想要在视觉上设置某两控件间隔,可自定义视图
- (CGFloat)spaceHeightForEmptyDataSet:(UIScrollView *)scrollView;

安份守己左券

// 遵守 DZNEmptyDataSetSource 、DZNEmptyDataSetDelegate 协议@interface MainViewController : UITableViewController <DZNEmptyDataSetSource, DZNEmptyDataSetDelegate>- viewDidLoad{ [super viewDidLoad]; self.tableView.emptyDataSetSource = self; self.tableView.emptyDataSetDelegate = self; // 删除单元格分隔线的一个小技巧 self.tableView.tableFooterView = [UIView new];}

代码恐怕还会有比很多不周全的地方,希望多多提意见。若是对于这种功用有越来越好的主见的,希望能留言分享下,哥哥不甚谢谢。Bend姆o地址:

Delegate:代理方法

是否要淡入

注:
1:默认是yes
2:在视觉效果上yes/no没有看到什么区别。
- (BOOL)emptyDataSetShouldFadeIn:(UIScrollView *)scrollView;

空白页是还是不是要强制展现(爱抚如若您的背景视图是scrollView)

注:
1:该方法在源码中为 ‘或’ 判断条件中的后者,所以,该方法一般用在数据不为空,强制性显示空白页视图。所以,可适当的在该方法中添加判断逻辑,
2:if (([self dzn_shouldDisplay] && [self dzn_itemsCount] == 0) || [self dzn_shouldBeForcedToDisplay])。 此为源码中设置空白页的判断条件,scrollview时,items肯定为0.所以,该方法的返回值就起到了强制作用。
   如:在scrollview中,假如网络请求成功,可返回yes,如果失败返回no。
- (BOOL)emptyDataSetShouldBeForcedToDisplay:(UIScrollView *)scrollView;

设置显示空白页

注:
1:默认是yes
- (BOOL)emptyDataSetShouldDisplay:(UIScrollView *)scrollView;

是或不是同意触控空白页

注:
1:默认为yes
2:源码是通过该方法的返回值去设置空白页返回视图的‘用户交互’userInteractionEnabled
- (BOOL)emptyDataSetShouldAllowTouch:(UIScrollView *)scrollView;

是不是同意空白页滚动

注:
1:默认是no
- (BOOL)emptyDataSetShouldAllowScroll:(UIScrollView *)scrollView;

是或不是同意动画运维

注:
1:默认no
2:如果不写该方法,或该方法返回值为no。那imageAnimationForEmptyDataSet设置的动画不显示
- (BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView;

点击空白页图片事件

-(void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view

点击空白页按钮事件
注:
1:想要触发该方法,前提是安装的按键要出示出来,所以,设置的图样不能够盖着该开关
-(void)emptyDataSet:(UIScrollView *)scrollView didTapButton:(UIButton *)button

空白页证明周期

- (void)emptyDataSetWillAppear:(UIScrollView *)scrollView;
- (void)emptyDataSetDidAppear:(UIScrollView *)scrollView;
- (void)emptyDataSetWillDisappear:(UIScrollView *)scrollView;
- (void)emptyDataSetDidDisappear:(UIScrollView *)scrollView;

福衢寿车数据源公约

二:使用

DZNEmptyDataSetSource ——实现该左券,可以设置你想要在空白页面呈现的内容,况且丰硕利用 NSAttributedString 作用来自定义文本外观。

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

效果图:

图片 7

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

效果图:

图片 8

  • 空白页展现详细描述
- (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];}

效果图:

图片 9

  • 空白页展现开关:示例1
- (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state { // 设置按钮标题 NSString *buttonTitle = @"喜欢我就点点点点我"; NSDictionary *attributes = @{ NSFontAttributeName:[UIFont boldSystemFontOfSize:17.0f] }; return [[NSAttributedString alloc] initWithString:buttonTitle attributes:attributes];}

效果图:

图片 10

  • 空白页展现按键:示例2

按键点击高亮效果

- (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];}

效果图:

图片 11

  • 空白页突显按键:示例3

开关标题中 点击重试 多个字加粗:

#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(0, text.length)]; // 设置所有字体颜色为浅灰色 [attStr addAttribute:NSForegroundColorAttributeName value:[UIColor lightGrayColor] range:NSMakeRange(0, text.length)]; // 设置指定4个字体为蓝色 [attStr addAttribute:NSForegroundColorAttributeName value:HexColor(@"#007EE5") range:NSMakeRange]; return attStr;}- verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView { return -70.0f;}#pragma mark - DZNEmptyDataSetDelegate- emptyDataSet:(UIScrollView *)scrollView didTapButton:(UIButton *)button { // button clicked...}- emptyDataSetWillAppear:(UIScrollView *)scrollView { self.tableView.contentOffset = CGPointZero;}

效果图

图片 12

  • 空白页突显开关:示例4
// 空白页显示返回按钮图片- (UIImage *)buttonImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state { return [UIImage imageNamed:@"placeholder_return"];}- 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"];}

效果图:

图片 13

  • 设置图片的 tintColor
- (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;}

效果图:

图片 14

  • 一旦您须要设置更复杂的布局,也能够归来自定义视图
- customViewForEmptyDataSet:(UIScrollView *)scrollView { UIActivityIndicatorView *activityView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]; [activityView startAnimating]; return activityView;}

效果图:

图片 15

  • 安装图片动画
#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对象:- emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView { return YES;}

效果图:

图片 16

  • 图像视图动画:缩放
#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- emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView { return YES;}

效果图:

图片 17

  • 我们开采在官方的 Applications 德姆o 应用中的空白视图中的动画是这么的:图片 18

一贫如洗视图私下认可情形下显得一张,当客商点击以往,该图片会被替换到。

由此翻阅源码,可以发掘它是那样工作的:

  1. 先是在依据左券的.m文件中声称了三个 BOOL 类型的变量,用来记录空白页面当前的加载状态:
@property (nonatomic, getter=isLoading) BOOL loading;
  1. 下一场为该属性设置 setter 方法,重新加载空数据集视图:
- setLoading: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 是否开启动画- emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView { return self.isLoading;}#pragma mark 空白页面被点击时刷新页面- emptyDataSet:(UIScrollView *)scrollView didTapView:view { // 空白页面被点击时开启动画,reloadEmptyDataSet self.loading = YES; // 执行加载任务... dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 任务加载完成后关闭动画,reloadEmptyDataSet self.loading = NO; });}
    
  • 除此以外,你还可以调动内容视图的笔直对齐方式:
// 向上偏移量为表头视图高度/2- verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView { return -self.tableView.tableHeaderView.frame.size.height/2.0f;}// 或者,返回固定值- verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView { return -64;}

效果图:

图片 19

  • 末尾,你也得以安装富有组件互相之间的左右间距(暗中认可间距为11 pt):
- spaceHeightForEmptyDataSet:(UIScrollView *)scrollView { return 25.0f;}

效果图:

图片 20

1 :接入

统一管理工具:[CocoaPods](http://cocoapods.org/?q=DZNEmptyDataSet)

或

github上下载该库
解压,将 Source中 .h  .m文件拖入工程

兑当代理左券

2 :引用

DZNEmptyDataSetDelegate ——达成该左券,能够设置你期望从一贫如洗页面再次来到的的一言一行,并摄取客商交互事件。

  • 安装是不是 渲染和显示空白页面(默认为YES):
- emptyDataSetShouldDisplay:(UIScrollView *)scrollView { return YES;}
  • 安装是或不是 以淡入方式体现空白页面 。 (默许值为YES)
- emptyDataSetShouldFadeIn:(UIScrollView *)scrollView { return YES;}
  • 强制展现空数据集:当项目数目超越0时,须求代理是不是仍应显示空数据集。(暗中同意值为NO
- emptyDataSetShouldBeForcedToDisplay:(UIScrollView *)scrollView;
  • 获得交互权限:是还是不是收到客户点击事件(默以为YES):
- emptyDataSetShouldAllowTouch:(UIScrollView *)scrollView { // 如果正在加载中,则不响应用户交互。 return !self.isLoading;}
  • 收获滚动权限(暗中认可值为NO):
- emptyDataSetShouldAllowScroll:(UIScrollView *)scrollView;
  • 获得图像动画权限:是不是打开图片动画(暗中同意值为NO):
- emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView { return YES;}
  • 空域数据集 视图被点击 时触发该措施:
- emptyDataSet:(UIScrollView *)scrollView didTapView:view { // 处理视图点击事件...}
  • 一贫如洗数据集 开关被点击时 触发该情势:
- emptyDataSet:(UIScrollView *)scrollView didTapButton:(UIButton *)button { // 处理按钮点击事件...}
  • 空白页就要出现
- emptyDataSetWillAppear:(UIScrollView *)scrollView { // 如果你的空白占位图与需求向左,发生偏移,可如下设置: self.tableView.contentOffset = CGPointZero;}
  • 空白页已经冒出
- emptyDataSetDidAppear:(UIScrollView *)scrollView;
  • 空白页就要消失
- emptyDataSetWillDisappear:(UIScrollView *)scrollView;
  • 空白页已经断线风筝
- emptyDataSetDidDisappear:(UIScrollView *)scrollView;
1)引进头文件
#import "UIScrollView EmptyDataSet.h"

或

#import <DZNEmptyDataSet/UIScrollView EmptyDataSet.h>

刷新布局

假诺你须求刷新空白页面布局,只需调用:

[self.tableView reloadData];

或者

[self.collectionView reloadData];

那有赖于你用的是哪贰个。

2)听从协议
<DZNEmptyDataSetSource, DZNEmptyDataSetDelegate>

强制布局更新

您还足以调用 [self.tableView reloadEmptyDataSet] 以使当前空白页面布局无效,并触及布局更新,绕过 -reloadData。 要是您的数据源上有比很多逻辑管理,当你无需依旧想防止调用 -reloadData 时那说不定很有用。 当使用 UIScrollView 时, [self.scrollView reloadEmptyDataSet] 是刷新内容的独一情势。

  • 27 款 iOS 开源库,让您的耗费溜到飞起
  • iOS开拓之 - DZNEmptyDataSet 空白页占位图
  • DZNEmptyDataSet的使用
3)设置数据源、代理
self.tableView.emptyDataSetSource   = self;
self.tableView.emptyDataSetDelegate = self;

或

self.collection.emptyDataSetSource   = self;
self.collection.emptyDataSetDelegate = self;

或

self.webView.scrollView.emptyDataSetSource = self;
self.webView.scrollView.emptyDataSetDelegate = self;

或

self.scrollView.emptyDataSetSource   = self;
self.scrollView.emptyDataSetDelegate = self;
self.searchDisplayController.searchResultsTableView.emptyDataSetSource = self;
self.searchDisplayController.searchResultsTableView.emptyDataSetDelegate = self;

三:实现

1:数据源方法:

列表空白时:展现的图片
- (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView
{
    return [UIImage imageNamed:@"empty_placeholder"];
}
可自定义的卡通(平移、缩放、旋转、3D等)
- (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;
}

图片 21

空白页自定义动画效果

空白页展现内容的标题
- (NSAttributedString *)titleForEmptyDataSet:(UIScrollView *)scrollView
{
NSString *text = @"这里就是显示的标题";

NSDictionary *attributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:28.0f],
                             NSForegroundColorAttributeName: [UIColor darkGrayColor]};

return [[NSAttributedString alloc] initWithString:text attributes:attributes];
}

图片 22

空白页显示内容的标题

自定义空白页突显的视图
- (UIView *)customViewForEmptyDataSet:(UIScrollView *)scrollView
{
UIActivityIndicatorView *activityView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
[activityView startAnimating];
return activityView;
}

图片 23

自定义视图

2:代理方法:

空白页是或不是出示:暗中认可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;
}
空白页上view点击事件
- (void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view
{
// Do something
}
空白页上Btn点击事件
- (void)emptyDataSet:(UIScrollView *)scrollView didTapButton:(UIButton *)button
{
// Do something
}

3:刷新:

[self.tableView reloadData];

或

[self.collectionView reloadData];

或:强制刷新 》显示空白页(scrollview)

[self.tableView reloadEmptyDataSet]

四:注意

1:针对scrollview。刷新时候从不reloadData方法。需[self.scr reloadEmptyDataSet]。

五:效果

图片 24

empty.gif

拓展

1:该框架实现步骤:

1、在调用tableView.emptyDataSetSource = self 时,调用setEmptyDataSetSource方法。


2、setEmptyDataSetSource方法中,将table的reloadData方法替换为:dzn_reloadEmptyDataSet方法。


3、在table调用reloadData方法,实际调用的是dzn_reloadEmptyDataSet方法,其中调用dzn_itemsCount方法判断table是否有数据。无数据则显示无数据页面。


4、dzn_itemsCount中通过调用table view的numberOfRowsInSection方法取得当前table是否有数据。

2:要点:关联对象

1)简介
Associated Objects是Objective-C 2.0中Runtime的特性之一。最早开始使用是在OS X Snow Leopard和iOS 4中。在<objc/runtime.h>中定义的三个方法,也是我们深入探究Associated Objects的突破口:
2)作用
使用关联对象为已经存在的类中添加属性
3)方法
objc_setAssociatedObject
objc_getAssociatedObject
objc_removeAssociatedObjects

例:

// NSObject AssociatedObject.h

@interface NSObject (AssociatedObject)
@property (nonatomic, strong) id associatedObject;
@end



// NSObject AssociatedObject.m

@implementation NSObject (AssociatedObject)
@dynamic associatedObject;

- (void)setAssociatedObject:(id)object {
 objc_setAssociatedObject(self, @selector(associatedObject), object, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (id)associatedObject {
return objc_getAssociatedObject(self, @selector(associatedObject));
}

3:要点:Method Swizzling

1)简介
Method Swizzling是改变一个selector的实际实现的技术。通过这一技术,我们可以在运行时通过修改类的分发表中selector对应的函数,来修改方法的实现。
2)作用
理解为:在程序运行期间动态的给两个方法互换实现

例:(该框架源码)

// Swizzle by injecting additional implementation
Method method = class_getInstanceMethod([self class], selector);
IMP dzn_newImplementation = method_setImplementation(method, (IMP)dzn_original_implementation);

// Store the new implementation in the lookup table
NSDictionary *swizzledInfo = @{DZNSwizzleInfoOwnerKey: [self class],
                               DZNSwizzleInfoSelectorKey: NSStringFromSelector(selector),
                               DZNSwizzleInfoPointerKey: [NSValue valueWithPointer:dzn_newImplementation]};

粗略写法:

//获取这个类的viewDidLoad方法,它的类型是一个objc_moethod结构体的指针
Method viewDidLoad = class_getInstanceMethod(self, @selector(viewDidLoad));

//获取自定义的方法
Method viewDidLoaded = class_getInstanceMethod(self, @selector(viewDidUnload));

//互换两个方法实现
method_exchangeImplementations(viewDidLoad, viewDidLoaded);

当在列表中调用reloadData刷新列表的时候。实际运作的点子为:dzn_original_implementation 。源码通过该方法,去根据列表的实在意况设置空白页是还是不是出示。

参谋文书档案

  • github库地址
  • runtime 完整计算
  • Runtime 运维时之一:类与指标

本文由星彩网app下载发布于计算机编程,转载请注明出处:tableview伏乞数据再次来到前显示占位cell,空白数

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。