[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的顯示隱藏

一 效果展現

二 使用參考示例

1 一行代碼集成空內容視圖

//框架方法
self.tableView.ly_emptyView = [LYEmptyView emptyViewWithImageStr:@"noData"
                                                        titleStr:@"暫無數據，點擊從新加載"
                                                       detailStr:@""];
複製代碼

PS:可對框架進行二次封裝，調用更簡潔（二次封裝方法在下面的示例5中會講到）

//二次封裝方法，調用簡潔
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
複製代碼

徹底低耦合，在你的項目中加入這一行代碼就可集成 無論項目中是reloadData方法刷UI仍是insert、delete等方式刷UI,不需作其餘任何操做，只需這一行代碼就可實現如下效果

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） 可根據項目需求，自由進行組合，以下只展現了部分組合效果

3 自定義空內容元素

特殊狀況下，若是空內容狀態佈局不知足需求時，可進行自定義 經過方法+ (instancetype)emptyViewWithCustomView:(UIView *)customView; 傳入一個View 便可建立一個自定義的emptyView

self.tableView.ly_emptyView = [LYEmptyView emptyViewWithCustomView:customView];
複製代碼

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查看

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];
複製代碼

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];
複製代碼

github歡迎star 地址