iOS 面向協議方式封裝空白頁功能

LinXunFeng發表於2019-03-04
iOS協議封裝

為了良好的互動體驗，相信大家在對待scrollView無資料時的提示頁都會使用一些第三方來定製，最典型的就是使用DZNEmptyDataSet。但是每個介面都寫一堆與DZNEmptyDataSetDelegate，DZNEmptyDataSetSource相關的程式碼就不太好，那一般情況下自然的就會採用繼承的方式來避免。而Swift除了可以物件導向程式設計，它還可以面向協議程式設計。那可不可以也用協議來解決情況呢？嘿嘿，這個可以有，那我們接下來就來試試怎麼通過協議的方式來避免上述情況，並且實現一行程式碼新增空白頁功能

前言

ps: 目前 LXFProtocolTool 已更新多次，程式碼實現已有較大差別，有興趣的同學可以在閱讀完本文後再看看具體的程式碼實現 EmptyDataSetable

如果對面向協議有疑問的同學可以看下我之前的兩篇文章

iOS – Swift 面向協議程式設計（一）

iOS – Swift 面向協議程式設計（二）

之前的文章中提到了，協議除了起規範作用，還有別一個用處，就是賦予能力。我們現在的目的就是讓目標控制器或者目標檢視在遵守我們的協議後，就可以有實現空白頁的功能。

一、基本實現

1、建立協議

// MARK:- 空檢視佔位協議
public protocol LXFEmptyDataSetable {
    
}
複製程式碼

2、確定面向類

確定我們面向的類，一般tableView或者collectionView都是寫在控制器裡，那我們面向的類就規定為UIViewController，或許也有人寫在UIView裡，不過這裡先按UIViewController來寫吧

// MARK:- UIViewController - 空檢視佔位協議
public extension LXFEmptyDataSetable where Self : UIViewController {
    // 3、的實現的方法寫在這裡
}
複製程式碼

3、定義功能方法

將scrollView傳遞進來，讓我們定義的方法來暗地裡做些操作

func lxf_EmptyDataSet(_ scrollView: UIScrollView) {
    scrollView.emptyDataSetDelegate = self
    scrollView.emptyDataSetSource = self
}
複製程式碼

4、設定資料來源和代理

在3、定義功能方法中將delegate和source設定為了self ，而協議是無法遵守再次遵守其它協議的，那讓什麼來遵守對應的協議呢？要明白這裡的self指的是UIViewController,考慮到UIView的可能，這裡我就讓萬物物件之父NSObject來遵守，並實現對應的資料來源方法和代理方法

extension NSObject : DZNEmptyDataSetDelegate, DZNEmptyDataSetSource {
    public func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
        // 返回提示圖片
    }
    public func title(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
        // 設定富文字標題
    }
    public func verticalOffset(forEmptyDataSet scrollView: UIScrollView!) -> CGFloat {
        // 設定縱向偏移
    }
}
複製程式碼

二、定製空白頁

通過上述步驟後，只要讓UIViewController遵守我們的協議，再呼叫一下lxf_EmptyDataSet方法就可以實現資料空白頁了。但是，這樣直接寫死的方式很不好，有時候一些場景是需要我們做出定製的，那怎麼實現定製呢？協議又不能有自己的變數來存放我們的定製。

這裡先做出一個限定，我們要使用過載方法來完成該功能，實現即可高定製，又可使用預設定製。

回到剛剛的話題，使用UserDefaults來實現可以嗎？可以，但是比較麻煩，因為UserDefaults是單例，整個程式共用這一份資源，如果你當前controller遵守了我們的協議LXFEmptyDataSetable並做出了定製，那麼當下一個controller在遵守協議後使用了預設定製時，那你要怎麼辦？還要區分scrollView，那就得儲存當前scrollView，在退出當前controller後還要把對應的東西置空。好咯好咯，那你說到底要怎麼搞才最合適？

解決方案：擴充UIScrollView！！！有沒有發現？，非常地恰巧，我們定義的方法lxf_EmptyDataSet需要外界將UIScrollView傳遞進來，在DZNEmptyDataSet的資料來源方法和代理方法也有scrollView。那讓UIScrollView來攜帶我們的定製就好啦。

1、定義定製相關的列舉

這裡我定義了常用的定製相關的列舉

public enum LXFEmptyDataSetAttributeKeyType {
    /// 縱向偏移(-50)  CGFloat
    case verticalOffset
    /// 提示語(暫無資料)  String
    case tipStr
    /// 提示語的font(system15)  UIFont
    case tipFont
    /// 提示語顏色(D2D2D2)  UIColor
    case tipColor
    /// 提示圖(LXFEmptyDataPic) UIImage
    case tipImage
    /// 允許滾動(true) Bool
    case allowScroll
}
複製程式碼

2、擴充UIScrollView

為UIScrollView定義一個定製相關的屬性字典

extension UIScrollView {
    private struct AssociatedKeys {
        static var lxf_emptyAttributeDict:[LXFEmptyDataSetAttributeKeyType : Any]?
    }
    /// 屬性字典
    var lxf_emptyAttributeDict: [LXFEmptyDataSetAttributeKeyType : Any]? {
        get {
            return objc_getAssociatedObject(self, &AssociatedKeys.lxf_emptyAttributeDict) as? [LXFEmptyDataSetAttributeKeyType : Any]
        }
        set {
            objc_setAssociatedObject(self, &AssociatedKeys.lxf_emptyAttributeDict, newValue as [LXFEmptyDataSetAttributeKeyType : Any]?, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
    }
}
複製程式碼

3、完善lxf_EmptyDataSet方法

這裡我們讓外界通過閉包的方式來定製自己的空白頁

// MARK:- UIViewController - 空檢視佔位協議
public extension LXFEmptyDataSetable where Self : UIViewController {
    func lxf_EmptyDataSet(_ scrollView: UIScrollView, attributeBlock: (()->([LXFEmptyDataSetAttributeKeyType : Any]))? = nil) {
        scrollView.lxf_emptyAttributeDict = attributeBlock != nil ? attributeBlock!() : nil
        scrollView.emptyDataSetDelegate = self
        scrollView.emptyDataSetSource = self
    }
}
複製程式碼

4、使用定製屬性字典

這裡以返回提示圖片的方法為例吧

public func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
    guard let tipImg = scrollView.lxf_emptyAttributeDict?[.tipImage] as? UIImage else {
        return UIImage(named: "LXFEmptyDataPic")
    }
    return tipImg
}
複製程式碼

5、外界的使用姿勢

class LXFEmptyDemoController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        initUI()
    }
}

extension LXFEmptyDemoController: LXFEmptyDataSetable {
    fileprivate func initUI() {
        let tableView = UITableView()
        // ...
        
        // 高定製
        self.lxf_EmptyDataSet(tableView) { () -> ([LXFEmptyDataSetAttributeKeyType : Any]) in
            return [
                .tipStr:"喲喲喲",
                .verticalOffset:-150,
                .allowScroll: false
            ]
        }
        
        // 預設定製
        // self.lxf_EmptyDataSet(tableView)
    }
}
複製程式碼
大功告成

三、開源庫

我對這個過程進行一次整理，並做成一個名為 LXFProtocolTool 的庫並上傳至gitHub。可以使用Cocoapods的方式來安裝使用

pod `LXFProtocolTool`
複製程式碼

我也將 iOS – Swift 面向協議程式設計（二） 中提及的通過協議便捷載入xib的功能也整合了進來。大家可以根據自己的需要在Podfile寫明要安裝的功能

  • Xib載入
pod `LXFProtocolTool/LXFNibloadable`
複製程式碼
  • 空白檢視
pod `LXFProtocolTool/LXFEmptyDataSetable`
複製程式碼

建立這個庫的目的是為了通過協議的方式來方便快捷地實現一些的實用功能，目前功能不多，不過往後會逐漸增加，或許你有什麼想實現的功能也可以提出來，喜歡的就給個Star鼓勵下我吧 ? ? ?

相關文章