TableViewが空の状態の時、説明画像を表示しよう！

メリット・実際の活用例

ユーザーエクスペリエンスを高める！　
・初めてユーザーがアプリを使用する際、ユーザーを誘導することができる。
今回は、左画像のようなごほうびリストに追加がない際に、右のような画像を表示する方法を説明します！

その他の活用例として、インターネット通信を行うアプリで、インターネット接続がうまくいかなかった際にユーザーに知らせる画像を表示させることによく使用されます。

TableViewが空の状態の時、画像を表示する方法

1.下記のようなTableViewの上の階層にUIViewを追加する!

2.UIViewの追加する場所に注意する！赤枠のように追加！
3.UIViewの制約：UIViewをSafeAreaに対して上下左右全て0で制約する！

4.先ほど作成したUIViewの中にUIImageViewを追加！
5.UIImageViewの制約：　UIImageViewを先ほど作成したUIViewに対して上下左右全て0で制約する！

6.表示したいImageを選択する

7.コントロールを押しながらViewControllerにOutlet制約を行う！

8.　セルの行数を表す下記のtableView(_:numberOfRowsInSection:)内にコードを追加する！

RewardViewController

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return RewardList.count
    }

9.リストの追加がなく、cellが0件の際に、先ほど作成したemptyViewを表示し、画像を画面に表示する。cellが1件以上追加された場合、emptyViewを非表示にすることで、画像を隠す！

RewardViewController

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if RewardList.count == 0 {
            emptyView.isHidden = false
        }
        else {
            emptyView.isHidden = true
        }
        return RewardList.count
    }

10.TableViewが空の状態の時、画像を表示することに成功しました！

参考文献