読者です 読者をやめる 読者になる 読者になる

開発メモ

開発関係のメモをいろいろと。たぶん。

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

Swift

はじめに

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

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

  1. ストーリーボードでImage Viewを設置
  2. ストーリーボードでImage Viewとソースコードと接続
  3. 画像をプロジェクトに追加
  4. 画像を読み込み
  5. 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.
    }

}

実際に動かすと、こんな感じになるはずです。

f:id:see_ku:20160702160803p:plain

微妙に画像が縦に潰れてたりしますが、これはImage Viewの設定でどうにか出来たりします。その辺りは発展課題と言うことで、いろいろ調べてみて下さい。

謝辞

画像はいらすとやさんの物を使わせていただきました。

無料イラスト かわいいフリー素材集 いらすとや
http://www.irasutoya.com/

広告を非表示にする