[iOS]一行代碼集成空白頁面占位圖(基于runtime+MJRefresh思想)

LYEmptyView

此框架是本人在5,6個月前裆站,公司啟動新項目的時候,一起開始著手編寫的黔夭,經(jīng)過這個項目的驗證與考驗宏胯,不斷的進行完善,在此特將這份框架分享出來供大家參考與學習本姥。
github地址:https://github.com/dev-liyang/LYEmptyView

不需要遵循協(xié)議肩袍,不需要設置代理,不需要實現(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的顯示隱藏

一 效果展示

show.gif
ImitateOtherApp.png

二 使用參考示例

1 一行代碼集成空內(nèi)容視圖

//框架方法
self.tableView.ly_emptyView = [LYEmptyView emptyViewWithImageStr:@"noData"
                                                        titleStr:@"暫無數(shù)據(jù)艰管,點擊重新加載"
                                                       detailStr:@""];

PS:可對框架進行二次封裝,調(diào)用更簡潔(二次封裝方法在下面的示例5中會講到)

//二次封裝方法蒋川,調(diào)用簡潔
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

完全低耦合牲芋,在你的項目中加入這一行代碼就可集成
不管項目中是reloadData方法刷UI還是insert、delete等方式刷UI,不需做其他任何操作,只需這一行代碼就可實現(xiàn)以下效果

example1.gif

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    : 標題
//    detailStr   : 詳細描述
//    btnTitleStr : 按鈕標題                                                         

框架提供四個元素缸浦,傳入相應元素的字符串即可顯示對應元素(按鈕的顯示前提是傳入target夕冲,action或btnClickBlock)
可根據(jù)項目需求,自由進行組合裂逐,如下只展示了部分組合效果

example2.png

3 自定義空內(nèi)容元素

特殊情況下歹鱼,如果空內(nèi)容狀態(tài)布局不滿足需求時,可進行自定義
通過方法+ (instancetype)emptyViewWithCustomView:(UIView *)customView;
傳入一個View 即可創(chuàng)建一個自定義的emptyView

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

4 自定義元素的UI樣式

這里自定義UI樣式需要很多代碼卜高,別擔心弥姻,在示例5中會講解二次封裝的方式,封裝后調(diào)用時就只需要一行代碼了 ^ _ ^

  //初始化一個emptyView
  LYEmptyView *emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
                                                           titleStr:@"無數(shù)據(jù)"
                                                          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);

  //設置空內(nèi)容占位圖
  self.tableView.ly_emptyView = emptyView;

這里只列舉了一些常用的屬性篙悯,更多屬性請到LYEmptyView.h查看

example4.png

5 二次封裝

第4小節(jié)的示例代碼蚁阳,修改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];
}

操作上面的兩步就可實現(xiàn)對樣式的單獨管理
調(diào)用方法不變诞外,只是調(diào)用的類變成了MYDiyEmpty

self.tableView.ly_emptyView = [MYDiyEmpty emptyActionViewWithImageStr:@"noData"
                                                             titleStr:@"暫無數(shù)據(jù)"
                                                            detailStr:@"請稍后再試!"
                                                          btnTitleStr:@"重新加載"
                                                        btnClickBlock:^{}];
3)進一步封裝顯示的元素內(nèi)容澜沟,比如無數(shù)據(jù)狀態(tài)圖、無網(wǎng)絡狀態(tài)圖

在MYDiyEmpty.h定義方法+ (instancetype)diyNoDataEmpty;
在MYDiyEmpty.m實現(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類似啥纸,需要先設置樣式号杏,然后顯示和隱藏

6 延遲顯示emptyView

如示例1圖,框架自動根據(jù)DataSource計算是否顯示emptyView斯棒,在空頁面發(fā)起網(wǎng)絡請求時盾致,DataSource肯定為空,會自動顯示emptyView荣暮,有的產(chǎn)品需求可能不希望這樣庭惜,希望發(fā)起請求時暫時隱藏emptyView。
本框架提供了兩個方法可實現(xiàn)此需求渠驼,兩個方法都是scrollView的分類蜈块,調(diào)用非常方便

 /**
   一般用于開始請求網(wǎng)絡時調(diào)用鉴腻,ly_startLoading調(diào)用時會暫時隱藏emptyView
   當調(diào)用ly_endLoading方法時,ly_endLoading方法內(nèi)部會根據(jù)當前的tableView/collectionView的
   DataSource來自動判斷是否顯示emptyView
 */
- (void)ly_startLoading;

 /**
   在想要刷新emptyView狀態(tài)時調(diào)用
   注意:ly_endLoading 的調(diào)用時機百揭,有刷新UI的地方一定要等到刷新UI的方法之后調(diào)用爽哎,
   因為只有刷新了UI,view的DataSource才會更新器一,故調(diào)用此方法才能正確判斷是否有內(nèi)容课锌。
 */
- (void)ly_endLoading;

*注意點:使用這兩個方法,請先將emptyView的autoShowEmptyView屬性置為NO祈秕,關閉自動顯隱

以下是調(diào)用示例(具體細節(jié)可參考demo中的demo2)

//1.先設置樣式
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
//2.關閉自動顯隱(此步可封裝進自定義類中渺贤,相關調(diào)用就可省去這步)
self.tableView.ly_emptyView.autoShowEmptyView = NO;
//3.網(wǎng)絡請求時調(diào)用
[self.tableView ly_startLoading];
//4.刷新UI時調(diào)用(保證在刷新UI后調(diào)用)
[self.tableView ly_endLoading];
example6.gif

7 特殊需求,手動控制emptyView的顯示隱藏

在某些特殊界面下请毛,有的tableView/collectionView有固定的一些死數(shù)據(jù)志鞍,其它的數(shù)據(jù)根據(jù)網(wǎng)絡加載,這時根據(jù)以上的示例方法可能達不到這需求方仿。
本框架提供另外的兩個方法來解決這個問題固棚。

/**
 手動調(diào)用顯示emptyView
 */
- (void)ly_showEmptyView;

/**
 手動調(diào)用隱藏emptyView
 */
- (void)ly_hideEmptyView;

*注意點:使用這兩個方法,請先將emptyView的autoShowEmptyView屬性置為NO仙蚜,關閉自動顯隱

以下是調(diào)用示例(具體細節(jié)可參考demo中的demo4)

//1.先設置樣式
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
//2.關閉自動顯隱(此步可封裝進自定義類中此洲,相關調(diào)用就可省去這步)
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

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市委粉,隨后出現(xiàn)的幾起案子呜师,更是在濱河造成了極大的恐慌,老刑警劉巖贾节,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汁汗,死亡現(xiàn)場離奇詭異,居然都是意外死亡栗涂,警方通過查閱死者的電腦和手機碰酝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戴差,“玉大人,你說我怎么就攤上這事铛嘱∨停” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵墨吓,是天一觀的道長球匕。 經(jīng)常有香客問我,道長帖烘,這世上最難降的妖魔是什么亮曹? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上照卦,老公的妹妹穿的比我還像新娘式矫。我一直安慰自己,他們只是感情好役耕,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布采转。 她就那樣靜靜地躺著,像睡著了一般瞬痘。 火紅的嫁衣襯著肌膚如雪故慈。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天框全,我揣著相機與錄音察绷,去河邊找鬼。 笑死津辩,一個胖子當著我的面吹牛拆撼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播丹泉,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼情萤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了摹恨?” 一聲冷哼從身側(cè)響起筋岛,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎晒哄,沒想到半個月后睁宰,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡寝凌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年柒傻,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片较木。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡红符,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伐债,到底是詐尸還是另有隱情预侯,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布峰锁,位于F島的核電站萎馅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏虹蒋。R本人自食惡果不足惜糜芳,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一飒货、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧峭竣,春花似錦塘辅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至毅访,卻和暖如春沮榜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背喻粹。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工蟆融, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人守呜。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓型酥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親查乒。 傳聞我的和親對象是個殘疾皇子弥喉,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容