iOS向けアプリで画像を画面に表示

はじめに

単純に、用意した画像を画面に表示するだけのアプリを作ります。

作業の手順としては、こんな感じになります。

ストーリーボードでImage Viewを設置
ストーリーボードでImage Viewとソースコードと接続
画像をプロジェクトに追加
画像を読み込み
Image Viewに画像を設定

See_Ku / DisplayImage — Bitbucket
https://bitbucket.org/See_Ku/displayimage/overview

動作環境

環境	情報
Xcode	7.3.1 (7D1014)
iOS	9.0
Swift	2.2
Date	2016/7/2

1. ストーリーボードでImage Viewを設置

まず、適当に新しいプロジェクトを作成します。テンプレートは何でも良いんですけど、とりあえず今回は Single View Applicationを使ってます。

ストーリーボードを開いて、画像を表示するために使うImage Viewを設置します。

f:id:see_ku:20160702160658p:plain

出来れば、ついでに位置を調整してオートレイアウトも設定しておくのが良いでしょう。

2. ストーリーボードでImage Viewとソースコードと接続

ストーリーボードで設置したImage Viewを、ソースコードと接続します。

f:id:see_ku:20160702160713p:plain

接続するプロパティの名前を入力します。ここでは imageView としておきます。

f:id:see_ku:20160702160725p:plain

3. 画像をプロジェクトに追加

実際に表示する画像ファイルをXcodeにドロップして、プロジェクトに追加します。

f:id:see_ku:20160702160737p:plain

ファイルを追加するときのオプション画面が出るので、 Copy items if needed にチェックが付いてるのを確認して、追加します。

f:id:see_ku:20160702160747p:plain

このように、プロジェクトにファイルを追加してプログラムから使えるようにすることを『バンドルする』と言います。プロジェクトに追加されたファイルをまとめて『バンドルファイル』と言ったりもしますね。

4. 画像を読み込み

ここからはソースコードの編集になります。

iOS向けのアプリで画像を取り扱う際、通常は UIImage というクラスを使います。プロジェクトにバンドルした画像ファイルを読み込む場合、こんな感じになります。

        // バンドルした画像ファイルを読み込み
        let image = UIImage(named: "fruit_melon_cut_orange")

この場合、UIImageの引数は拡張子抜きのファイル名になります。JPEGの場合は拡張子が必要だったり、そもそも、Assets.xcassetsを使う場合はそちらの名前だったりするのですが、細かいところは必要に応じて調べましょう。

5. Image Viewに画像を設定

画像ファイルを読み込んだあとは、Image Viewに設定するだけです。Image Viewで表示する画像は、Image Viewの image プロパティで指定します。

        // Image Viewに画像を設定
        imageView.image = image

まとめ

ViewController全体のソースコードはこんな感じになります。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // バンドルした画像ファイルを読み込み
        let image = UIImage(named: "fruit_melon_cut_orange")

        // Image Viewに画像を設定
        imageView.image = image
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}