tableView空資料問題

一般專案中tableView若資料為空時會有一個提示示意圖

為了更好的管理這種提示示意圖，筆者利用extension進行了簡單的拓展

解決思路

利用swift面向協議的特點，使用協議來進行設定。

• 設計空檢視協議
• tableView設定空檢視代理
• 每次重繪tableView時判斷新增或移除空資料提示圖

具體實現

• 空檢視協議，遵守協議必須實現showEmtpy屬性

private let EmptyViewTag = 12345;

protocol EmptyViewProtocol: NSObjectProtocol {
    
    ///用以判斷是會否顯示空檢視
    var showEmtpy: Bool {get}
    
    ///配置空資料提示圖用於展示
    func configEmptyView() -> UIView?
}

extension EmptyViewProtocol {
    
    func configEmptyView() -> UIView? {
        return nil
    }
}
 

• tableView擴充套件配置，實現空資料示意圖展示判斷

DispatchQueue.once和BQTool.exchangeMethod是隻執行一次方法交換操作，具體實現可看原始碼

    func setEmtpyViewDelegate(target: EmptyViewProtocol) {
        self.emptyDelegate = target
        DispatchQueue.once(#function) {
            BQTool.exchangeMethod(cls: self.classForCoder, targetSel: #selector(self.layoutSubviews), newSel: #selector(self.re_layoutSubviews))
        }
    }

    @objc func re_layoutSubviews() {
        self.re_layoutSubviews()
        
        if self.emptyDelegate!.showEmtpy {
            
            guard let view = self.emptyDelegate?.configEmptyView() else {
                return;
            }
            
            view.tag = EmptyViewTag;
            self.addSubview(view)
            
        } else {
            
            guard let view = self.viewWithTag(EmptyViewTag) else {
                return;
            }
            view .removeFromSuperview()
        }
    }
    
//MARK:- ***** Associated Object *****
    private struct AssociatedKeys {
        static var emptyViewDelegate = "tableView_emptyViewDelegate"
    }
    
    private var emptyDelegate: EmptyViewProtocol? {
        get {
            return (objc_getAssociatedObject(self, &AssociatedKeys.emptyViewDelegate) as! EmptyViewProtocol)
        }
        set (newValue){
            objc_setAssociatedObject(self, &AssociatedKeys.emptyViewDelegate, newValue!, .OBJC_ASSOCIATION_RETAIN)
        }
    }
 

示例程式碼

//關鍵部分程式碼
class ViewController: UIViewController , EmptyViewProtocol {

    private var datas: Array<Dictionary<String, String>>?
    /// 空資料提示圖
    private var label: UILabel? 
    
    var showEmtpy: Bool {
        get {
            if let data = self.datas {
                return data.count == 0
            }
            return true
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let tableView: UITableView = ...
        tableView.setEmtpyViewDelegate(target: self)
        self.view.addSubview(tableView)
    }
    
    func configEmptyView() -> UIView? {
    
        if let view = self.label {
            return view
        }
        
        let lab = UILabel(frame: CGRect(x: 100, y: 300, width: 200, height: 30))
        lab.text = "this is a test"
        lab.textAlignment = .center
        self.label = lab
        
        return lab
    }
}
 

效果圖如下

最後

• 該設計較為簡單方便管理，若有不妥之處望指出