Help us understand the problem. What is going on with this article?

【swift】tableViewに何もなければ、吉岡里帆ちゃんが出現する

More than 1 year has passed since last update.

【swift】tableViewに何もなければ、吉岡里帆ちゃんが出現する

  • 今回は、UITabaleViewやUICollectionViewに表示する要素が0であれば、吉岡里帆さん が出現するようにします。
  • アプリ作りのときに毎回お世話になっているライブラリで dzenbot/DZNEmptyDataSet という、UITabaleViewやUICollectionViewに表示する要素が何もなければ任意の画像や文字を設定してくれます。

完成形はこんな感じです(要素が0のとき)

Simulator Screen Shot - iPhone 8 Plus - 2017-10-04 at 22.39.52.png

要素があれば普通にインデックスを表示します

Simulator Screen Shot - iPhone 8 Plus - 2017-10-04 at 22.41.58.png

実装してみる

cocoapodかcarthageでdzenbot/DZNEmptyDataSetを入れる

cocoapod

  pod 'DZNEmptyDataSet'
$ pod install

carthage

github "dzenbot/DZNEmptyDataSet"
$ carthage update --platform iOS

ソースコードはこれだけ

  • 画像はriho1Assets.xcassets に入れてあります。
  • numberOfRowsInSectionを0にすると吉岡里帆ちゃんが出現するはずです。
  • ポイントとして今回delegateの設定は、Storyboardだけで行います。
viewController.swift
import UIKit
import DZNEmptyDataSet

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = "\(indexPath.row)"
        return cell
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10 // <= ここを0にしたときに、吉岡里帆ちゃんが出現すれば成功
    }
}

extension ViewController: DZNEmptyDataSetSource, DZNEmptyDataSetDelegate {
    func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
        return UIImage(named: "riho1")
    }
}

Storyboardの設定

UITableViewとDZNEmptyDataSetのdelegateをStoryboardで設定する <- ポイント!!

  • referencing Outlets に

    • UITableViewDataSource
    • UITableViewDelagate
    • DZNEmptyDataSetSource
    • DZNEmptyDataSetDelegate が設定されています。
  • このとき、viewControllerにDZNEmptyDataSet がimportされていることと、StoryboardにviewControllerがcustom classに設定されていれば、設定できます。

  • 下図のように、tableViewをControllを押しながらViewControllerのところで離すと、delegateの設定ができます。ソースコードの中でいちいち ????.delegate = self としなくて良くなります。

Screen Shot 2017-10-04 at 22.53.48.png


Screen Shot 2017-10-04 at 22.36.56.png

完成形はこちら

yosidariho_full.gif

まとめ

  • DZNEmptyDataSetを使えば、tableViewやcolelctionView scrollViewに何もないときに画像やテキストをかんたんに表示することができます。
  • おすすめです!
okamu_
no plan inc. CEO 元フリーランスエンジニア/ iOS / サーバーサイド / 共同創業 / 福岡出身 https://qiita.com/organizations/noplan-inc
https://twitter.com/okamu_ro
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした