前面
目前專案功能做的差不多了. 需要完善和打磨, 今天需要為所有的 TableView 列表頁沒有資料的時候展示一個友好的提示檢視, 一個一個改太麻煩了. 而且業務邏輯煩雜改起來也不容易. 所以花了點時間寫了一個小東西.在專案中按照專案的規範字首使用了AN, 自己提取出來還是按照自己的喜好將字首改為了XY.
Demo
優點
- 拖拽即可使用, 無需 import , 對原有程式碼無需進行任何修改
- 也可以選擇實現方法, 實現快捷的自定義和完全的自定義
感謝
今天搜尋到了這篇文章, 也是我的思路來源. UITableView沒資料時使用者提示如何做
原理
無入侵
使用 Runtime 交換方法實現對原有程式碼無入侵. 建立一個 TableView 的分類, 在 .m 中
#import <objc/runtime.h>
複製程式碼目前我想到的思路是在 reloadData 的時候進行實現, 所以定義一個
xy_reloadData 方法, 然後和原有的 reloadData 方法進行交換.
也就是說:
- 在程式碼中所有呼叫
reloadData的方法最終會呼叫我們自定義的xy_reloadData方法. - 我們
xy_reloadData方法中, 如果想呼叫系統的reloadData方法, 則需要呼叫xy_reloadData方法.
+ (void)load {
Method reloadData = class_getInstanceMethod(self, @selector(reloadData));
Method xy_reloadData = class_getInstanceMethod(self, @selector(xy_reloadData));
method_exchangeImplementations(reloadData, xy_reloadData);
}
複製程式碼對 load 方法的描述是
Invoked whenever a class or category is added to the Objective-C runtime; implement this method to perform class-specific behavior upon loading. 當一個 類 或 分類 新增到 Objective-C Runtime 時；實現這個方法來載入後執行特定類的行為。
所以可以實現無需 import 就可以實現載入.
獲取 TableView 的資料量
TableView 有可能有多個 Sections 每個 Section 都有可能有很多 Cell. 所以不能單單判斷第一個 Section 是否有資料. 所以要:
- 獲取 Section 的數量
- 獲取每一個 Section 當中 Cell 的數量
NSInteger numberOfSections = [self numberOfSections];
BOOL havingData = NO;
for (NSInteger i = 0; i < numberOfSections; i++) {
if ([self numberOfRowsInSection:i] > 0) {
havingData = YES;
break;
}
}
複製程式碼這樣這個布林值 havingData 即是是否有資料的標記.
如何實現 reloadData 完成之後再獲取數量.
因為 TableView 的 reloadData 方法具體實現是非同步的.想要獲取到載入完成的狀態有兩種方法
- 使用
layoutIfNeeded方法 - 獲取
主佇列非同步執行
第一種方法實現程式碼為:
[self xy_reloadData];
[self layoutIfNeeded];
//接下來的程式碼
複製程式碼這樣的話執行緒會一直阻塞, 當然我們不希望原來業務程式碼中的 reloadData 會阻塞, 直到載入完成之後再繼續執行程式碼.
所以我選擇第二種方法
[self xy_reloadData];
dispatch_async(dispatch_get_main_queue(), ^{
//接下來的程式碼
});
複製程式碼那麼我們 xy_reloadData 中的方法實現為:
- (void)xy_reloadData {
[self xy_reloadData];
// 重新整理完成之後檢測資料量
dispatch_async(dispatch_get_main_queue(), ^{
NSInteger numberOfSections = [self numberOfSections];
BOOL havingData = NO;
for (NSInteger i = 0; i < numberOfSections; i++) {
if ([self numberOfRowsInSection:i] > 0) {
havingData = YES;
break;
}
}
[self xy_havingData:havingData];
});
}
複製程式碼展示一個佔位檢視
TableView 有一個 backgroundView 的屬性可以很好的勝任這個需求 可以根據 havingData 的狀態來進行賦值
- (void)xy_havingData:(BOOL)havingData {
if (havingData) {
self.backgroundView = nil;
} else {
self.backgroundView = 自定義檢視;
}
}
複製程式碼如何讓控制器自定義檢視
當然我們不滿足於簡簡單單的檢視的需求, 我們希望對應的控制器可以根據自己的需求自定義自己的檢視.
我們最習慣的方法當然是在 TableView 的代理類(通常是控制器)中去處理 TableView 的一些邏輯
那麼假設我們希望代理類實現一個方法 xy_noDataView
if ([self.delegate respondsToSelector:@selector(xy_noDataView)]) {
self.backgroundView = [self.delegate performSelector:@selector(xy_noDataView)];
return ;
}
複製程式碼這個地方會有一個編譯警告, 我選擇在 .m 檔案中定義一個 protocol 來消除, 我還定義了一些其他的方法來更好的完成我的需求.
/**
消除警告
*/
@protocol XYTableViewDelegate <NSObject>
@optional
- (UIView *)xy_noDataView; // 完全自定義佔點陣圖
- (UIImage *)xy_noDataViewImage; // 使用預設佔點陣圖, 提供一張圖片, 可不提供, 預設不顯示
- (NSString *)xy_noDataViewMessage; // 使用預設佔點陣圖, 提供顯示文字, 可不提供, 預設為暫無資料
- (UIColor *)xy_noDataViewMessageColor; // 使用預設佔點陣圖, 提供顯示文字顏色, 可不提供, 預設為灰色
- (NSNumber *)xy_noDataViewCenterYOffset; // 使用預設佔點陣圖, CenterY 向下的偏移量
@end
複製程式碼之所以沒有在. h 中宣告, 然後要求控制器實現我們的代理, 然後在去實現方法是想盡可能的無侵入, 契約式程式設計, 按規則實現方法既可以生效.
我希望能實現 拖來即用, 想扔就扔
我還實現了一些簡單的功能. 詳細的可以檢視 Demo.
完整的xy_havingData方法如下:
- (void)xy_havingData:(BOOL)havingData {
// 不需要顯示佔點陣圖
if (havingData) {
self.backgroundView = nil;
return ;
}
// 不需要重複建立
if (self.backgroundView) {
return ;
}
// 自定義了佔點陣圖
if ([self.delegate respondsToSelector:@selector(xy_noDataView)]) {
self.backgroundView = [self.delegate performSelector:@selector(xy_noDataView)];
return ;
}
// 使用自帶的
UIImage *img = nil;
NSString *msg = @"暫無資料";
UIColor *color = [UIColor lightGrayColor];
CGFloat offset = 0;
// 獲取圖片
if ([self.delegate respondsToSelector:@selector(xy_noDataViewImage)]) {
img = [self.delegate performSelector:@selector(xy_noDataViewImage)];
}
// 獲取文字
if ([self.delegate respondsToSelector:@selector(xy_noDataViewMessage)]) {
msg = [self.delegate performSelector:@selector(xy_noDataViewMessage)];
}
// 獲取顏色
if ([self.delegate respondsToSelector:@selector(xy_noDataViewMessageColor)]) {
color = [self.delegate performSelector:@selector(xy_noDataViewMessageColor)];
}
// 獲取偏移量
if ([self.delegate respondsToSelector:@selector(xy_noDataViewCenterYOffset)]) {
offset = [[self.delegate performSelector:@selector(xy_noDataViewCenterYOffset)] floatValue];
}
// 建立佔點陣圖
self.backgroundView = [self xy_defaultNoDataViewWithImage :img message:msg color:color offsetY:offset];
}
複製程式碼實現了, 可以通過完全自定義 View 的方法實現完全自定義, 也可以使用自帶的一些樣式, 指定圖片, 文字, 文字顏色, 以及位置偏移量, 當然其中任何一個都是可以不指定的, 使用預設設定.
介面的一些程式碼
/**
預設的佔點陣圖
*/
- (UIView *)xy_defaultNoDataViewWithImage:(UIImage *)image message:(NSString *)message color:(UIColor *)color offsetY:(CGFloat)offset {
// 計算位置, 垂直居中, 圖片預設中心偏上.
CGFloat sW = self.bounds.size.width;
CGFloat cX = sW / 2;
CGFloat cY = self.bounds.size.height * (1 - 0.618) + offset;
CGFloat iW = image.size.width;
CGFloat iH = image.size.height;
// 圖片
UIImageView *imgView = [[UIImageView alloc] init];
imgView.frame = CGRectMake(cX - iW / 2, cY - iH / 2, iW, iH);
imgView.image = image;
// 文字
UILabel *label = [[UILabel alloc] init];
label.font = [UIFont systemFontOfSize:17];
label.textColor = color;
label.text = message;
label.textAlignment = NSTextAlignmentCenter;
label.frame = CGRectMake(0, CGRectGetMaxY(imgView.frame) + 24, sW, label.font.lineHeight);
// 檢視
XYNoDataView *view = [[XYNoDataView alloc] init];
[view addSubview:imgView];
[view addSubview:label];
// 實現跟隨 TableView 滾動
[view addObserver:self forKeyPath:kXYNoDataViewObserveKeyPath options:NSKeyValueObservingOptionNew context:nil];
return view;
}
複製程式碼細節優化
如何實現頁面載入的時候不展示佔點陣圖
在 TableView 顯示到介面上時, 相當於呼叫了 reloadData 方法, 所以按照我們目前的邏輯會先展示一個佔點陣圖, 然後資料載入完成後, 再次呼叫 reloadData 方法以隱藏佔點陣圖.
資料載入之前, 我們肯定不希望展示無資料的佔點陣圖, 因為很有可能是有資料的, 所以可以忽略掉第一次呼叫 reloadData 的處理, 在 xy_reloadData 方法中增加如下校驗在 [self xy_reloadData]; 之後, 如果沒有載入完成資料時, 我們預設當做有資料去處理, 即相當於佔點陣圖不顯示. 然後記錄一下, 資料已經載入完成了.
// 忽略第一次載入
if (![self isInitFinish]) {
[self xy_havingData:YES];
[self setIsInitFinish:YES];
return ;
}
複製程式碼為 TableView 繫結一個屬性用來記錄是否已經載入完
/**
設定已經載入完成資料了
*/
- (void)setIsInitFinish:(BOOL)finish {
objc_setAssociatedObject(self, @selector(isInitFinish), @(finish), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
/**
是否已經載入完成資料
*/
- (BOOL)isInitFinish {
id obj = objc_getAssociatedObject(self, _cmd);
return [obj boolValue];
}
複製程式碼滾動時如何讓佔點陣圖跟隨 TableView 的滾動而滾動.
因為我們的佔點陣圖是賦值在 TableView 的 backgroundView 屬性上的, 相當於增加到了 TableView 上, 通過除錯可以發現, 在 TableView 滾動 contentOffset 改變時, backgroundView 的frame.origin.y也是同步改變的, 所以我們看起來無論 TableView 怎麼滾動佔點陣圖都是無動於衷的, 如果我們想讓佔點陣圖跟隨滾動的話, 只要取消掉backgroundView 的 frame.origin.y 的同步更新就好了, 也就是說要保證 frame.origin.y 的值一直為0.
我這裡沒有找到更好的辦法, 暫時使用 KVO 來實現, 記得 View 銷燬的時候要移除 KVO 的監聽, 詳細實現可以看 Demo 啦...
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
if ([keyPath isEqualToString:kXYNoDataViewObserveKeyPath]) {
/**
在 TableView 滾動 ContentOffset 改變時, 會同步改變 backgroundView 的 frame.origin.y
可以實現, backgroundView 位置相對於 TableView 不動, 但是我們希望
backgroundView 跟隨 TableView 的滾動而滾動, 只能強制設定 frame.origin.y 永遠為 0
相容 MJRefresh
*/
CGRect frame = [[change objectForKey:NSKeyValueChangeNewKey] CGRectValue];
if (frame.origin.y != 0) {
frame.origin.y = 0;
self.backgroundView.frame = frame;
}
}
}
複製程式碼如果不想顯示佔點陣圖怎麼辦?
在對應的控制器實現如下方法即可
- (NSString *)xy_noDataViewMessage {
return @"";
}
複製程式碼關於分割線
在我上面提到的那篇文章中. 在修改 backgroundView 屬性的同時修改了 TableView 的 separatorStyle 屬性, 沒資料的時候將分割線取消掉, 有資料的時候在新增上, 可是我在專案中使用的 TableView 的分割線 separatorStyle 風格不一. 所以我沒有修改分割線屬性, 如果想讓 TableView 沒有資料的時候隱藏分割線, 可以看我的 Demo 在對應的控制器新增這樣一行程式碼即可.
self.tableView.tableFooterView = [UIView new];
複製程式碼最後
CollectionView 同理, 程式碼複製一遍, 將獲取資料量的地方, 獲取每個 Section 中 Cell 的數量的 numberOfRowsInSection 方法改為 numberOfItemsInSection 即可使用.
菜鳥一枚, 如果有大神不吝賜教, 必將感激不盡.