【Swift】UITableViewが空だったらメッセージを表示するライブラリ「DZNEmptyDataSet」

UITableView でデータを一覧表示させる際、場合によってはデータが 1件もないことがあるかと思います。
その時、デフォルトだと真っ白な画面が表示されるのですが、それだけだとちょっと不親切なので、メッセージを表示させる方法についてです。

導入したライブラリは「DZNEmptyDataSet」です。
サンプルコードだと、エラー画像を表示できるとのことでしたが、テキストのみもOKでした。

GitHub のページはこちら。

GitHub – dzenbot/DZNEmptyDataSet: A drop-in UITableView/UICollectionView superclass category for showing empty datasets whenever the view has no content to display
https://github.com/dzenbot/DZNEmptyDataSet

 

まず、ライブラリをインストールします。
今回も CocoaPods を使ったので、Podfile に下記を追加します。

pod 'DZNEmptyDataSet'

で、iTerm などのコマンドラインツールで pod install を実行します。

インストールが完了したら、UITableView を表示している Controller にコードを追加していきます。
まず、DZNEmptyDataSetSource と DZNEmptyDataSetDelegate を Controller に追加します。
具体的には下記のサンプルコードのようにします。

class ListController: UITableViewController, DZNEmptyDataSetSource, DZNEmptyDataSetDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.emptyDataSetDelegate = self
        self.tableView.emptyDataSetSource = self
    }
}

また、viewDidLoad 内に、5、6行目のコードも追加してください。

こちらを追加したら、下記のコードも追加します。

func title(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
    return NSAttributedString(string: "データがありません")
}

上記のコードで、TableView が空だった時のメッセージを定義しています。
返り値は NSAttributedString なので、フォントを変更するなど、文字を装飾することも可能です。

なお、画像を表示させたい場合は下記のように指定してください。

func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
    return UIImage(named: "画像名")
}

画像は Images.xcassets から取得していますが、もちろん UIImage であれば他の方法でもOKです。

追加するコードは以上です。
あとは実際に実行して結果を確認してください。
デフォルトの設定だと、メッセージの文字色がグレーなので、特に変更しなくても良さそうです。
ただ、ちょっとフォントサイズは大きいように感じるので、こちらについては調整します。

 

以上、Swift で UITableView が空だったときにメッセージを表示するライブラリ「DZNEmptyDataSet」のご紹介でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG