LYEmptyView
此框架是本人在5，6個月前，公司啟動新項(xiàng)目的時候，一起開始著手編寫的，經(jīng)過這個項(xiàng)目的驗(yàn)證與考驗(yàn)，不斷的進(jìn)行完善，在此特將這份框架分享出來供大家參考與學(xué)習(xí)。
github地址:https://github.com/dev-liyang/LYEmptyView
不需要遵循協(xié)議，不需要設(shè)置代理，不需要實(shí)現(xiàn)代理方法，只需這一句代碼，就可為一個UITableViwe/UICollectionView集成空白頁面占位圖。self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
目錄
- 一 效果展示
- 二 使用參考示例
- 1 一行代碼集成空內(nèi)容視圖
- 2 自由選擇空內(nèi)容元素
- 3 自定義空內(nèi)容元素
- 4 自定義元素的UI樣式
- 5 二次封裝
- 6 延遲顯示emptyView
- 7 特殊需求，手動控制emptyView的顯示隱藏
一 效果展示
二 使用參考示例
1 一行代碼集成空內(nèi)容視圖
//框架方法
self.tableView.ly_emptyView = [LYEmptyView emptyViewWithImageStr:@"noData"
titleStr:@"暫無數(shù)據(jù)，點(diǎn)擊重新加載"
detailStr:@""];
PS:可對框架進(jìn)行二次封裝，調(diào)用更簡潔（二次封裝方法在下面的示例5中會講到）
//二次封裝方法，調(diào)用簡潔
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
完全低耦合，在你的項(xiàng)目中加入這一行代碼就可集成
不管項(xiàng)目中是reloadData方法刷UI還是insert、delete等方式刷UI,不需做其他任何操作，只需這一行代碼就可實(shí)現(xiàn)以下效果
2 自由選擇空內(nèi)容元素
交互事件可選擇SEL或block方式
SEL交互事件:
self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
titleStr:@"無數(shù)據(jù)"
detailStr:@"請稍后再試!"
btnTitleStr:@"重新加載"
target:target
action:action];
block交互事件:
self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
titleStr:@""
detailStr:@""
btnTitleStr:@""
btnClickBlock:^{}];
// imageStr : 占位圖片
// titleStr : 標(biāo)題
// detailStr : 詳細(xì)描述
// btnTitleStr : 按鈕標(biāo)題
框架提供四個元素，傳入相應(yīng)元素的字符串即可顯示對應(yīng)元素（按鈕的顯示前提是傳入target，action或btnClickBlock）
可根據(jù)項(xiàng)目需求，自由進(jìn)行組合，如下只展示了部分組合效果
3 自定義空內(nèi)容元素
特殊情況下，如果空內(nèi)容狀態(tài)布局不滿足需求時，可進(jìn)行自定義
通過方法+ (instancetype)emptyViewWithCustomView:(UIView *)customView;
傳入一個View 即可創(chuàng)建一個自定義的emptyView
self.tableView.ly_emptyView = [LYEmptyView emptyViewWithCustomView:customView];
4 自定義元素的UI樣式
這里自定義UI樣式需要很多代碼，別擔(dān)心，在示例5中會講解二次封裝的方式，封裝后調(diào)用時就只需要一行代碼了 ^ _ ^
//初始化一個emptyView
LYEmptyView *emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
titleStr:@"無數(shù)據(jù)"
detailStr:@"請稍后再試!"
btnTitleStr:@"重新加載"
btnClickBlock:^{}];
//元素豎直方向的間距
emptyView.subViewMargin = 20.f;
//標(biāo)題顏色
emptyView.titleLabTextColor = MainColor(90, 180, 160);
//描述顏色
emptyView.detailLabTextColor = MainColor(180, 120, 90);
//按鈕背景色
emptyView.actionBtnBackGroundColor = MainColor(90, 180, 160);
//設(shè)置空內(nèi)容占位圖
self.tableView.ly_emptyView = emptyView;
這里只列舉了一些常用的屬性，更多屬性請到LYEmptyView.h查看
5 二次封裝
第4小節(jié)的示例代碼，修改emptyView的樣式需要一個個屬性單獨(dú)去改，如果項(xiàng)目中每個界面都這么寫就顯得很麻煩，而且不易維護(hù)
解決辦法是對庫進(jìn)行二次封裝，二次封裝后，對UI樣式單獨(dú)管理，方便維護(hù)
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];
}
操作上面的兩步就可實(shí)現(xiàn)對樣式的單獨(dú)管理
調(diào)用方法不變，只是調(diào)用的類變成了MYDiyEmpty
self.tableView.ly_emptyView = [MYDiyEmpty emptyActionViewWithImageStr:@"noData"
titleStr:@"暫無數(shù)據(jù)"
detailStr:@"請稍后再試!"
btnTitleStr:@"重新加載"
btnClickBlock:^{}];
3)進(jìn)一步封裝顯示的元素內(nèi)容，比如無數(shù)據(jù)狀態(tài)圖、無網(wǎng)絡(luò)狀態(tài)圖
在MYDiyEmpty.h定義方法+ (instancetype)diyNoDataEmpty;
在MYDiyEmpty.m實(shí)現(xiàn)方法
+ (instancetype)diyNoDataEmpty{
return [MyDIYEmpty emptyViewWithImageStr:@"noData"
titleStr:@"暫無數(shù)據(jù)"
detailStr:@"請稍后再試!"];
}
經(jīng)過3步封裝，自定義了UI樣式，使管理更方便，使調(diào)用更簡潔
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
下面的兩種示例，屬于特殊需求，需要四行代碼搞定，調(diào)用和MJRefrsh類似，需要先設(shè)置樣式，然后顯示和隱藏
6 延遲顯示emptyView
如示例1圖，框架自動根據(jù)DataSource計(jì)算是否顯示emptyView，在空頁面發(fā)起網(wǎng)絡(luò)請求時，DataSource肯定為空，會自動顯示emptyView，有的產(chǎn)品需求可能不希望這樣，希望發(fā)起請求時暫時隱藏emptyView。
本框架提供了兩個方法可實(shí)現(xiàn)此需求，兩個方法都是scrollView的分類，調(diào)用非常方便
/**
一般用于開始請求網(wǎng)絡(luò)時調(diào)用，ly_startLoading調(diào)用時會暫時隱藏emptyView
當(dāng)調(diào)用ly_endLoading方法時，ly_endLoading方法內(nèi)部會根據(jù)當(dāng)前的tableView/collectionView的
DataSource來自動判斷是否顯示emptyView
*/
- (void)ly_startLoading;
/**
在想要刷新emptyView狀態(tài)時調(diào)用
注意:ly_endLoading 的調(diào)用時機(jī)，有刷新UI的地方一定要等到刷新UI的方法之后調(diào)用，
因?yàn)橹挥兴⑿铝薝I，view的DataSource才會更新，故調(diào)用此方法才能正確判斷是否有內(nèi)容。
*/
- (void)ly_endLoading;
*注意點(diǎn):使用這兩個方法，請先將emptyView的autoShowEmptyView屬性置為NO，關(guān)閉自動顯隱
以下是調(diào)用示例（具體細(xì)節(jié)可參考demo中的demo2）
//1.先設(shè)置樣式
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
//2.關(guān)閉自動顯隱（此步可封裝進(jìn)自定義類中，相關(guān)調(diào)用就可省去這步）
self.tableView.ly_emptyView.autoShowEmptyView = NO;
//3.網(wǎng)絡(luò)請求時調(diào)用
[self.tableView ly_startLoading];
//4.刷新UI時調(diào)用（保證在刷新UI后調(diào)用）
[self.tableView ly_endLoading];
7 特殊需求，手動控制emptyView的顯示隱藏
在某些特殊界面下，有的tableView/collectionView有固定的一些死數(shù)據(jù)，其它的數(shù)據(jù)根據(jù)網(wǎng)絡(luò)加載，這時根據(jù)以上的示例方法可能達(dá)不到這需求。
本框架提供另外的兩個方法來解決這個問題。
/**
手動調(diào)用顯示emptyView
*/
- (void)ly_showEmptyView;
/**
手動調(diào)用隱藏emptyView
*/
- (void)ly_hideEmptyView;
*注意點(diǎn):使用這兩個方法，請先將emptyView的autoShowEmptyView屬性置為NO，關(guān)閉自動顯隱
以下是調(diào)用示例（具體細(xì)節(jié)可參考demo中的demo4）
//1.先設(shè)置樣式
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
//2.關(guān)閉自動顯隱（此步可封裝進(jìn)自定義類中，相關(guān)調(diào)用就可省去這步）
self.tableView.ly_emptyView.autoShowEmptyView = NO;
//3.顯示emptyView
[self.tableView ly_showEmptyView];
//4.隱藏emptyView
[self.tableView ly_hideEmptyView];
歡迎star
github地址:https://github.com/yangli-dev/LYEmptyView
