[Swift]DZNEmptyDataSetをCarthageで導入する[UICollectionView]

## DZNEmptyDataSetとは
UITableViewやUICollectionViewで表示するデータがない時に表示するViewを手軽に設定できるライブラリです。

ライセンスは、MIT License

### ライブラリ無しの場合
<img width="246" alt="スクリーンショット 2019-04-29 22.40.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54170/f25fac14-a1f8-eb6c-7489-de3402f3207a.png">
CollectionViewであれば上に空の時用のViewを乗せて表示・非表示を切り替えれば実現はできるのですが、よりシンプルに実現することができます。
（TableViewではそもそもこの方法は使えませんでした）

## CarthageでDZNEmptyDataSetを導入する
### Cartfileの編集
```:Cartfile
github "dzenbot/DZNEmptyDataSet"
```

Carthageでのライブラリ追加が初めてであればCartfileを新規作成、２つ目以降であれば追記しましょう

## ターミナルでコマンドを実行して導入
```
carthage update --platform ios
```
iOSだけであれば、上記のコマンドを実行してDZNEmptyDataSetをビルドします。

### 結果
```
*** Cloning DZNEmptyDataSet
*** Checking out DZNEmptyDataSet at "v1.8.1"
*** xcodebuild output can be found in /var/folders/cs/7ybpxylx1gj6hb3dyyf90hpc0000gn/T/carthage-xcodebuild.b6EHQz.log
*** Building scheme "DZNEmptyDataSet" in DZNEmptyDataSet.xcodeproj
```
こんな感じでログが出れば成功です。

## TargetのGeneralでフレームワークを追加
<img width="992" alt="スクリーンショット 2019-04-29 22.01.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54170/7ccf6942-85e4-36dd-54d5-b930fd7ede7d.png">
Xcodeから、アプリのTarget -> GeneralのLinked Frameworks and LibrariesにDZNEmptyDataSetを追加します。

## Build Phases の編集
<img width="664" alt="スクリーンショット 2019-04-29 22.00.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54170/681dfcad-74b1-9d59-28b2-ee4b5da77c2a.png">

### Run scriptのShellに1行追加
Carthageの仕様が初めてであれば以下を追加

```
/usr/local/bin/carthage copy-frameworks
```
Input Filesに以下を追加

```
$(SRCROOT)/Carthage/Build/iOS/DZNEmptyDataSet.framework
```

## ViewControllerへの実装例
```swift:ViewController.swift
import DZNEmptyDataSet
```
まずは、使いたいファイルでライブラリをインポートしましょう。
DZNEmptyDataSetはObjective-Cで書かれたフレームワークですが、ブリッジングファイルなどは必要ありません。

以下、CollectionView想定で実装していきますが、TableViewの場合は適宜置き換えてください。
###　DataSourceに準拠
```swift:ViewController.swift
extension ViewController: DZNEmptyDataSetSource {

    /// データが空の状態の時に表示したい画像
    func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
       return  #imageLiteral(resourceName: "emailFlatIcon")
    }

    /// データが空の状態の時に表示したい属性付きタイトル文字列
    func title(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
        let text = "タイトル"
        let attributes: [NSAttributedString.Key: Any]
            = [.font: UIFont.boldSystemFont(ofSize: 19),
               .foregroundColor: UIColor.blue]
        
        return NSAttributedString(string: text, attributes: attributes)
    }

    /// データが空の状態の時に表示したい属性付き説明文字列
    func description(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
        let text = """
        説明文
        説明文
        説明文
        """
        
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .natural
        paragraphStyle.lineBreakMode = .byWordWrapping
        let attributes: [NSAttributedString.Key: Any]
            = [.font: UIFont.boldSystemFont(ofSize: 19),
               .foregroundColor: UIColor.green,
               .paragraphStyle: paragraphStyle]
        
        return NSAttributedString(string: text, attributes: attributes)
    }
    
    /// ボタンの状態に使用される属性付き文字列
    func buttonTitle(forEmptyDataSet scrollView: UIScrollView!, for state: UIControl.State) -> NSAttributedString! {
        let text = "ボタン"
        let attributes: [NSAttributedString.Key: Any]
            = [.font: UIFont.boldSystemFont(ofSize: 19),
               .foregroundColor: UIColor.red]
        
        return NSAttributedString(string: text, attributes: attributes)

    }
    
    /// 背景色
    func backgroundColor(forEmptyDataSet scrollView: UIScrollView!) -> UIColor! {
        return .gray
    }
}
```
###　Delegateに準拠
```swift:ViewController.swift
extension ViewController: DZNEmptyDataSetDelegate {
    /// EmptyDataSetViewがタップされた時の動作
    func emptyDataSet(_ scrollView: UIScrollView!, didTap view: UIView!) {
        // 何かの動作
    }
}
```
などなどがあります。

### 実装例
<img width="375" alt="Simulator Screen Shot - iPhone Xs - 2019-04-30 at 08.44.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54170/b9ecb72e-b580-6181-e274-92e97e3b9a32.png">

## もっと自由なレイアウトにしたい場合は？
もっと凝ったデザインにしたい場合はカスタムビューを追加する必要があります。
それはまた次回以降に書きたいと思います。