Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
23
Help us understand the problem. What is going on with this article?
@mironal

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

More than 5 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 を使うと非常にお手軽にできるのでおすすめです。

23
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mironal
✩*⋆¸¸.•*¨*꒰⁎˃ ॢꇴ ॢ˂⁎꒱*¨*•.¸¸⋆*✩
covelline
もっと楽しい明日をつくる

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
23
Help us understand the problem. What is going on with this article?