【Swift】Image VIewの使い方。画面に画像を表示する。(Swift 2.1、XCode 7.2)

2020年6月16日

Image Viewとは

本記事ではSwiftで使える部品のImage Viewについて説明する。Image View(以下、イメージビュー)とは、画面に画像を表示させるための入れ物で、アプリの画面に表示されている背景やイラストはイメージビューを使って表示されている。
Image View

 

イメージビューに画像を設定する

イメージビューを使う前に、画像をプロジェクトに追加しておく必要がある。その方法については前回記事で説明しているのでそちらを参照されたし。⇒「記事

今回の説明では4つの画像ファイルを下図のフォルダ構成で準備し、プロジェクトに取り込む。

画像ファイルのフォルダ構成

 

下図はプロジェクトにファイルを追加したあとのXcodeの画面。下図赤枠のimagesフォルダはオプション「Create Groups」で追加し、下図青枠のimages2フォルダは「Create folder references」で追加した。

前回記事で説明したように、黄色いフォルダはグループ、青いフォルダはフォルダの参照を表している。
プロジェクトにファイルを追加したあと

 

それではイメージビューに画像を表示してみよう。

デバイス画面にイメージビューを配置したあと、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開く。設定項目のimageを選択すると、先ほど追加した4個の画像ファイルが表示されるのでimage_blue.pngを選択する。
デバイス画面にイメージビューを追加する

 

すると、デバイス画面のイメージビューに画像が表示され、そのままシュミレータを起動しても画面に画像が表示される。

このように、黄色いフォルダに入っている画像を選択する場合はフォルダの階層は気にせずにファイル名を指定するだけで良い。なぜなら、ナビゲーションエリアのグループはファイルを分別するために存在するだけで、フォルダ階層の概念が無いからである。

デバイス画面に画像を表示する

 

一方、青いフォルダに入っているファイル名を選択すると不思議なことが起きる。

下図は、設定項目のimageに表示された4つの画像の中からimg_red.pngを選択したときの画面。ストーリーボード上には選択した画像が表示されているが、いざシュミレーターを起動してみると画像が表示されないのだ。

青いフォルダの画像を選択

 

標準出力には以下のようなエラーが表示される。画像が見つからないというエラーだ。

 

なぜなら、オプション「Create folder references」でファイルを追加した場合は、ナビゲーションエリアにフォルダの参照が追加されるが、フォルダの中のファイルパスは管理されないからである。今回の例では、ナビゲーションエリアのimages2が実物のフォルダへのリンクファイルになっていて、フォルダ内のimg_red.pngへのパスは管理されていないということだ。

なので、青いフォルダのファイルを指定する場合は下図赤枠のようにナビゲーションエリアに格納されているフォルダ名を含めたファイルパスを指定しなければならない。

今回の例では「image2/img_red.png」を入力してシュミレーターを起動すると画面に画像が表示される。ただし、今度はストーリーボードのイメージビューに画像が表示されなくなる。この仕様は以前のXcodeのバージョンからのようなのでXcodeの仕様と考えるしかなさそうだ。(検証したXcodeのバージョンは7.2.1)
設定項目imageにファイルパスを指定

ソースコードからイメージビューに画像を設定する

では、ソースコードからイメージビューに画像を設定するとどうなるか実際にやってみよう。

下図赤枠のアシスタントエディタボタンを押してViewController.swiftのソースコードを表示する。Ctrlキーを押しながらドラッグ&ドロップでイメージビューをソースコードに運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「testImageView」を入力してConnectボタンを押す。これでソースコードからイメージビューを操作できるようになった。

イメージビューとソースコードのコネクションを確立する

 

次にイメージビューに画像を設定するコードを追記する。

 

以下が実行結果。ファイル名のみで画像を表示できた。

ソースコードからイメージビューに画像を設定した実行結果

 

img_yellow.pngはさらに深い階層のフォルダ(sampleフォルダ)に入っているが、同じようにファイル名を指定するだけで良い。

イメージビューにソースコードから画像を設定した実行結果

 

img_red.pngの場合は、以下のコードのようにimages2フォルダからのパスを指定する。

イメージビューにソースコードから画像を設定した実行結果

 

img_green.pngの場合は、以下のようにimages2フォルダからのファイルパスを指定する。

イメージビューにソースコードから画像を設定した実行結果

 

Highlighted

イメージビューの設定項目にHighlightedというものがある(下図赤枠)。これを使えば、イメージビューに画像をもう1枚設定しておける。Highlightedにチェックを入れると、Highlightedに指定した画像が最初に表示されるようになる。

イメージビューの設定項目

 

以下のコードは、イメージビューをタップする度に2つの画像が切り替わるコードの例。イメージビューは初期状態では画像のタップを検知できるようになっていないので、検知できるように変更している。

 

以下は実際のプレイ動画