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

【Swift】TableViewCellにImageViewを追加してURLで指定された画像を表示する

概要

 この記事は初心者の自分がRESTful なAPIとswiftでiPhone向けのクーポン配信サービスを開発した手順を順番に記事にしています。技術要素を1つずつ調べながら実装したため、とても遠回りな実装となっています。

前回の でクーポンの画像も配信するAPIを作りました。
アプリ側もAPI側から取得した画像を画面に表示できるように改造します。

参考

環境

Mac OS 10.15
Swift5
Xcode11.1

手順

  • TableViewCellにUIImageViewを追加する
  • 追加したUIImageViewでとりあえず画像を表示させる
  • jsonで取得したURLを使って画像を表示させる
  • 動作確認

TableViewCellにUIImageViewを追加する

 Xcodeを開いてMain.storyboardでTableVIewCellにUIImageViewを追加します。合わせてデザインを修正してこれまでのクーポンの文字情報の下に画像を表示するようにします。

TableViewCellの Row Height を200pxから400pxに変更して縦を長くします。そして長くした部分にUIImageViewを追加します。Autoresizingで四隅を固定します。そして追加したUIImageViewに tag を付けます(重要)。Labelで4番まで使っているので、5番を割り当てました。

custum-tableviewcell.png

 次にViewController.swiftを開いて、tableViewの高さを指定しているtableView.rowHeight = [数字] の部分を Main.storyboardで指定したTableViewCellの Row Height の値に変更します。

tableView.rowHeight = 400 // Row Heightで指定した長さに変更

追加したUIImageViewでとりあえず画像を表示させる

 ViewController.swift の tableView にUIImageViewへ画像を表示する処理を追加します。下記の通り追加しました。基本はLabelに値を設定する方法を同じです。

 上で作った画像保存用のフォルダにサンプル画像を格納し、画像ファイルのフルパスをとりあえずベタ書きで指定しました。

// クーポン画像を表示
        let couponImageView = cell.viewWithTag(5) as! UIImageView
        let imageFileUrl = "/Users/XXXXX/workspace/amiApp/images/coupon-image-001.png"
        couponImageView.image = UIImage(named: imageFileUrl)

 変更を保存してXcodeでアプリを実行すると、クーポン情報の下に画像が表示されました!
check-app-view-001.png

画像ファイルのパスをベタ書きしているので、全てのクーポンに同じ画像が表示されていると思います。また、少しレイアウトが崩れているので後で修正しようと思います。

レスポンスのjsonで取得したURLを使って画像を表示させる

 TableViewCell や UIImageView の書き方は問題無いことが分かったので、ローカルフォルダのパスではなくAPIのレスポンスで取得した画像ファイルのURLを使って画像を取得するように変更します。

URLの取得から表示までのコードはこちらのようになります。

        // URLで指定されたクーポン画像を表示
        let couponImageView = cell.viewWithTag(5) as! UIImageView
        if let urlString = coupon["image"] as? String {
            let url = URL(string: urlString)

            do{
                let imageData = try Data(contentsOf: url!)
                couponImageView.image = UIImage(data: imageData)
            } catch {
                print("Error : Cat't get image")
            }
        } else {
            couponImageView.image = UIImage(named: "no-coupon-image.png") //nilの場合は固定画像表示
        }
        return cell
    }

 ポイントが幾つかあります。

 1つ目はif let urlString = coupon["image"] as? String { 〜の部分です。レスポンスに画像ファイルのURLが指定されていない場合に NULL参照でアプリが落ちるのを防ぐため、as?を使ったキャストとオプショナルバインディングを組み合わせて、画像ファイルのURLが指定されていない場合は代わりの画像を表示するようにしています。

as?はキャストする際、指定した型ならそのオプショナル型(nilが含まれるかもしれない)を返し、指定した型以外なら nilを返します。

オプショナルバインディングは下記のような書式となり、[オプショナル型の変数]が nilで無い場合に限り任意の処理を実行される事が出来ます。elseと組み合わせる事で、nilかnilで無いかで処理を分ける事も出来ます。

If let [任意の定数] = [オプショナル型の変数] {
    オプショナル型の変数がnilじゃなかった場合に実施したい処理
} 

 ポイントの2つ目はlet imageData = try Data(contentsOf: url!)の部分です。URLを使って画像を取ってくる処理です。画像を取得出来た場合はcouponImageView.image = UIImage(data: imageData)でImageViewに画像を表示させています。

動作確認

 変更を保存してXcodeでアプリを実行すると、クーポン情報の下に画像が表示されました! URLを設定していない2枚目のクーポンからはアプリ側で持たせた仮の画像が表示されています。また、シミュレータを iPhone 11 Pro Max から iPhone 11 Pro にしたらレイアウトがピッタリはまりました。

check-app-view-002.png

これで一通りクーポンアプリの実装ができたので。次は作ったAPIをクラウドのサーバで公開させようと思います。

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
ユーザーは見つかりませんでした