Objective-C
iOS
CocoaPods
UITableView
UICollectionView

iOS の UITableView や UICollectionView で表示するデータが無い時の画面を簡単に作る方法

More than 3 years have passed since last update.

TL;DR: DZNEmptyDataSet を使おう。


iOS で UITableView や UICollectionView を使うときは多いと思います。

表示するデータがある場合がほとんどだと思いますが、状況によっては表示するデータが存在しないこともあります。

例えば、検索した結果が0件の場合や通信に失敗してデータが取れなかった時、アプリをインストールした直後でまだデータが無いときなどです。

こちらの記事ではそのような状況をエンプティーステートと呼んでいます。

そのような何も表示するものがない状態の時に空の View を表示するだけではユーザーは何がどうなっているのかよく分からなくて混乱してしまいます。

例えば以下の様な画面がいきなり出てくるとびっくりします(ツイートを検索した結果が0件だった場合)。

Simulator_Screen_Shot_2015_11_16_21_13_58.png

こういう場合には「何も表示するものがないよ!」 と表示してあげるだけでもかなり UX が向上します。

しかし表示するものが無いときの為に View を作ったり条件分岐するのは面倒です。

そんな面倒さを解決するのが DZNEmptyDataSet です。

リポジトリの README.md のサンプルコードやスクリーンショットを見ていただくとどういうものなのか分かると思います。

弊社で開発している iOS のツイッタークライアントの feather も以前は表示するツイートが0件のときは先ほど貼ったスクリーンショットの様に何も表示していない寂しい画面でした。

現在は DZNEmptyDataSet を使って簡単ではありますが、 No Tweets と表示しています。

Simulator_Screen_Shot_2015_11_16_21_09_16.png

非常に些細な事ですがこれだけで UX が上がりました。

また、API へリクエスト中はエンプティーステートとして扱わないと言った制御は - (BOOL)emptyDataSetShouldDisplay:(UIScrollView *)scrollView で制御することができるので、データを取得した結果が0件だったのか、まだ取得が完了していないから0件なのかなどの制御も簡単に行うことができます。

delegate のメソッドがたくさん用意してあるので場面に合わせて細かい制御ができるのも嬉しいです。

面倒で後回しにしがちなエンプティーステートの表示ですが、DZNEmptyDataSet を使うと非常にお手軽にできるのでおすすめです。