zoukankan      html  css  js  c++  java
  • [iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想)

    2018年01月03日阅读 2472
     

    [iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想)

    LYEmptyView

    此框架是本人在5,6个月前,公司启动新项目的时候,一起开始着手编写的,经过这个项目的验证与考验,不断的进行完善,在此特将这份框架分享出来供大家参考与学习。github地址

    不需要遵循协议,不需要设置代理,不需要实现代理方法,只需这一句代码,就可为一个UITableViwe/UICollectionView集成空白页面占位图。self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

    目录

    • 一 效果展示
    • 二 使用参考示例
      • 1 一行代码集成空内容视图
      • 2 自由选择空内容元素
      • 3 自定义空内容元素
      • 4 自定义元素的UI样式
      • 5 二次封装
      • 6 延迟显示emptyView
      • 7 特殊需求,手动控制emptyView的显示隐藏

    一 效果展示

    show.gif ImitateOtherApp.png

    二 使用参考示例

    1 一行代码集成空内容视图

    //框架方法
    self.tableView.ly_emptyView = [LYEmptyView emptyViewWithImageStr:@"noData"
                                                            titleStr:@"暂无数据,点击重新加载"
                                                           detailStr:@""];

    PS:可对框架进行二次封装,调用更简洁(二次封装方法在下面的示例5中会讲到)

    //二次封装方法,调用简洁
    self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

    完全低耦合,在你的项目中加入这一行代码就可集成 不管项目中是reloadData方法刷UI还是insert、delete等方式刷UI,不需做其他任何操作,只需这一行代码就可实现以下效果

    example1.gif

    2 自由选择空内容元素

    交互事件可选择SEL或block方式
    SEL交互事件:
    self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
                                                                  titleStr:@"无数据"
                                                                 detailStr:@"请稍后再试!"
                                                               btnTitleStr:@"重新加载"
                                                                    target:target
                                                                    action:action];
    block交互事件:
    self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
                                                                  titleStr:@""
                                                                 detailStr:@""
                                                               btnTitleStr:@""
                                                             btnClickBlock:^{}];
    //    imageStr    : 占位图片
    //    titleStr    : 标题
    //    detailStr   : 详细描述
    //    btnTitleStr : 按钮标题                                                         

    框架提供四个元素,传入相应元素的字符串即可显示对应元素(按钮的显示前提是传入target,action或btnClickBlock) 可根据项目需求,自由进行组合,如下只展示了部分组合效果

    example2.png

    3 自定义空内容元素

    特殊情况下,如果空内容状态布局不满足需求时,可进行自定义 通过方法+ (instancetype)emptyViewWithCustomView:(UIView *)customView; 传入一个View 即可创建一个自定义的emptyView

    self.tableView.ly_emptyView = [LYEmptyView emptyViewWithCustomView:customView];
    example3.png

    4 自定义元素的UI样式

    这里自定义UI样式需要很多代码,别担心,在示例5中会讲解二次封装的方式,封装后调用时就只需要一行代码了 ^ _ ^

      //初始化一个emptyView
      LYEmptyView *emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
                                                               titleStr:@"无数据"
                                                              detailStr:@"请稍后再试!"
                                                            btnTitleStr:@"重新加载"
                                                          btnClickBlock:^{}];
      //元素竖直方向的间距
      emptyView.subViewMargin = 20.f;
      //标题颜色
      emptyView.titleLabTextColor = MainColor(90, 180, 160);
      //描述颜色
      emptyView.detailLabTextColor = MainColor(180, 120, 90);
      //按钮背景色
      emptyView.actionBtnBackGroundColor = MainColor(90, 180, 160);

      //设置空内容占位图
      self.tableView.ly_emptyView = emptyView;

    这里只列举了一些常用的属性,更多属性请到LYEmptyView.h查看

    example4.png

    5 二次封装

    第4小节的示例代码,修改emptyView的样式需要一个个属性单独去改,如果项目中每个界面都这么写就显得很麻烦,而且不易维护 解决办法是对库进行二次封装,二次封装后,对UI样式单独管理,方便维护

    1)新建一个类继承自LYEmptyView,例如demo中的MyDIYEmpty
    2)重写- (void)prepare 方法,并修改想要改变的元素的UI样式
    - (void)prepare{
        [super prepare];
        
        self.titleLabFont = [UIFont systemFontOfSize:25];
        self.titleLabTextColor = MainColor(90, 180, 160);
        
        self.detailLabFont = [UIFont systemFontOfSize:17];
        self.detailLabTextColor = MainColor(180, 120, 90);
        self.detailLabMaxLines = 5;
        
        self.actionBtnBackGroundColor = MainColor(90, 180, 160);
        self.actionBtnTitleColor = [UIColor whiteColor];
    }

    操作上面的两步就可实现对样式的单独管理 调用方法不变,只是调用的类变成了MYDiyEmpty

    self.tableView.ly_emptyView = [MYDiyEmpty emptyActionViewWithImageStr:@"noData"
                                                                 titleStr:@"暂无数据"
                                                                detailStr:@"请稍后再试!"
                                                              btnTitleStr:@"重新加载"
                                                            btnClickBlock:^{}];
    3)进一步封装显示的元素内容,比如无数据状态图、无网络状态图

    在MYDiyEmpty.h定义方法+ (instancetype)diyNoDataEmpty; 在MYDiyEmpty.m实现方法

    + (instancetype)diyNoDataEmpty{
        return [MyDIYEmpty emptyViewWithImageStr:@"noData"
                                        titleStr:@"暂无数据"
                                       detailStr:@"请稍后再试!"];
    }

    经过3步封装,自定义了UI样式,使管理更方便,使调用更简洁 self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];


    下面的两种示例,属于特殊需求,需要四行代码搞定,调用和MJRefrsh类似,需要先设置样式,然后显示和隐藏

    6 延迟显示emptyView

    如示例1图,框架自动根据DataSource计算是否显示emptyView,在空页面发起网络请求时,DataSource肯定为空,会自动显示emptyView,有的产品需求可能不希望这样,希望发起请求时暂时隐藏emptyView。 本框架提供了两个方法可实现此需求,两个方法都是scrollView的分类,调用非常方便

     /**
       一般用于开始请求网络时调用,ly_startLoading调用时会暂时隐藏emptyView
       当调用ly_endLoading方法时,ly_endLoading方法内部会根据当前的tableView/collectionView的
       DataSource来自动判断是否显示emptyView
     */
    - (void)ly_startLoading;

     /**
       在想要刷新emptyView状态时调用
       注意:ly_endLoading 的调用时机,有刷新UI的地方一定要等到刷新UI的方法之后调用,
       因为只有刷新了UI,view的DataSource才会更新,故调用此方法才能正确判断是否有内容。
     */
    - (void)ly_endLoading;

    *注意点:使用这两个方法,请先将emptyView的autoShowEmptyView属性置为NO,关闭自动显隐

    以下是调用示例(具体细节可参考demo中的demo2)

    //1.先设置样式
    self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
    //2.关闭自动显隐(此步可封装进自定义类中,相关调用就可省去这步)
    self.tableView.ly_emptyView.autoShowEmptyView = NO;
    //3.网络请求时调用
    [self.tableView ly_startLoading];
    //4.刷新UI时调用(保证在刷新UI后调用)
    [self.tableView ly_endLoading];
    example6.gif

    7 特殊需求,手动控制emptyView的显示隐藏

    在某些特殊界面下,有的tableView/collectionView有固定的一些死数据,其它的数据根据网络加载,这时根据以上的示例方法可能达不到这需求。 本框架提供另外的两个方法来解决这个问题。

    /**
     手动调用显示emptyView
     */
    - (void)ly_showEmptyView;

    /**
     手动调用隐藏emptyView
     */
    - (void)ly_hideEmptyView;

    *注意点:使用这两个方法,请先将emptyView的autoShowEmptyView属性置为NO,关闭自动显隐

    以下是调用示例(具体细节可参考demo中的demo4)

    //1.先设置样式
    self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
    //2.关闭自动显隐(此步可封装进自定义类中,相关调用就可省去这步)
    self.tableView.ly_emptyView.autoShowEmptyView = NO;
    //3.显示emptyView
    [self.tableView ly_showEmptyView];
    //4.隐藏emptyView
    [self.tableView ly_hideEmptyView];
    example7.gif

    github欢迎star 地址

  • 相关阅读:
    pyqt笔记1模块 信号和插槽
    pyqt5 eric6 pyqt5-tools
    转入Python3.5
    ARM伪指令
    ARM MOV PC加8
    所有JTAG集成电路都应该支持菊花链
    冯诺依曼存储子系统的改进
    [分享]Active-HDL 9.2 安装
    运行python脚本后台执行
    scala实验 模拟图形绘制
  • 原文地址:https://www.cnblogs.com/sundaysgarden/p/9248444.html
Copyright © 2011-2022 走看看