manbetx官方网站

[iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想)Swift基础框架的包装。

十月 15th, 2018  |  买球网站manbetx

LYEmptyView

斯框架是自身在5,6独月前,公司启动新路之时节,一起开下手编写的,经过这个类型之求证和考验,不断的开展宏观,在此特将及时卖框架分享出来供大家参考和习。
github地址:https://github.com/yangli-dev/LYEmptyView

匪欲以协议,不欲安装代理,不待贯彻代理方,只需要立即同一句代码,就只是也一个UITableViwe/UICollectionView集成空白页面占各类图。self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

       
 最近闲来无事,就自学了swift编程语言,并且根据前OC的更,封装了Swift版本的基本功框架,一些常用之底方式,常用的类库和老三正在,都打包到了联合,方便以后新类型的利用,在此地,分享给大家,欢迎大家下载应用,丰富功能:https://github.com/CherishSmile/ZYBase

目录

  • 相同 效果亮
  • 老二 使用参考示例
    • 1 一行代码集成空内容视图
    • 2 自由选择空内容元素
    • 3 自定义空内容元素
    • 4 自定义元素的UI样式
    • 5 二涂鸦封装
    • 6 延缓显示emptyView
    • 7 突出需要,手动控制emptyView的显示隐藏

        接下去,就优先简单介绍下,现阶段据框架封装的中坚内容:

无异于 效果亮

show.gif

ImitateOtherApp.png

相同、框架代码有

       
 封装的swift框架的名是:ZYBase,主要不外乎BaseSet、ThirdLib、Tools三大部分(如图所示):

图片 1

1、BaseSet是针对系统的道进行了简便的卷入处理,常用的措施还在此地,直接调用即可,其中BaseSetting是本着一些常用之不二法门进行的简包装,BaseUI是指向常用之UI控件进行的略包装,BaseWebView是针对WKWebView进行的简约包装,具体的得参照GitHub上的Demo

2、ThirdLib是一些常用的老三方库,主要有Alamofire、Kingfisher、LBXScan、SnapKit、SwfityJson等

3、Tools是对准ThirdLib里之老三在进行的大概包装,以及自己平常的包裹,主要就是是网要求库的包装和自定义弹出框的卷入,自当非常正确的,哈哈

次 使用参考示例

仲、demo示例有(具体样式见demo)

1、badgeNumber示例

图片 2

2、自定义alert示例(有四种动画,你还得于定义样式)

图片 3

图片 4

图片 5

3、扫一扫示例(有微信,QQ,支付宝三栽体制,还可以由定义样式)

图片 6

图片 7

图片 8

4、TableView自动计算行高示例(只待来简单句话,就能够自动计算行高,是免是坏强劲,具体看demo)

图片 9

5、Alamofire和Kingfisher示例(对网络要求库的粗略包装,可以将json数据直接转接为model,直接上代码)

图片 10

图片 11

6、WKWebView示例(带有进度久)

图片 12

图片 13

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

其三、浏览器功能

导航右上比的挺按钮,点击后入浏览器,如果您免小心上了,我是不会见报您手指滑动导航会回来哦

图片 14

终极为大家推荐一个json处理工具,JSONExport,可以一直拿json数据转发为各种编程语言需要的数据模型:https://github.com/Ahmed-Ali/JSONExport

欢迎大家利用、分享、改进。

微信扫一扫或者搜索臆涵醉关注公众号,里面有过多君不意的资源哦

图片 15

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

欢迎star
github地址:https://github.com/yangli-dev/LYEmptyView

相关文章

标签:, ,

Your Comments

近期评论

    功能


    网站地图xml地图