[iPhone] ストーリーボードを使った画像 UIImageView の設定 (Swift)

iOSアプリで画像を表示させるにはSwiftのコードのみでUIImageViewを使うこともできましたがこちら、Story Board を使ってもできます。
 
下はButtonをタップすると画像が表示される簡単なテストアプリです。

imageview2_1
imageview2_2

 

Swift 3.0
Xcode 8.0

 

sponsored link

UIImageView

 
Swiftのコードのみのセッションでやったように、表示する画像をプロジェクトに取り込んでください。今回はボタンがあるので横長を想定して作ります。
 

コードの記述

 
以前にコードだけで画像を表示した場合よりもさらに短くなります。
 
ViewController.swift

 

画像の設定をします。画像を同じものでサイズの違う2タイプを作成します。
例として、オリジナルサイズの2倍の toko@2x.png と3倍 toko@3x.png というのを作成しました。
Assets.xcassets フォルダに入れると2x、3xのImage Setに割り振られます。

screen-shot-2016-09-16-at-18-03-47

 

Story Board の設定

 
Main.storyboad を開いて、UIImageView と UIButton をDrag & Drop で配置します。
 
swift_imageview2_3
 
それぞれのUI部品が分かるように背景をグレーにしました。
 
それから、 View Controller のサイズは色々ですが、それぞれに調整できる方法として
今回は、以前と同じ方法(古いやり方)で調整してみます。
 
Use Auto Layout
Use Size Classes
を外します(ワーニングが出ますが)
 
swift_imageview2_4
 
View Controller Scene -> View を選択
Inspector の Interface Builder Documents に
Use Auto Layout
Use Size Classes
があるので、チェックを外します。
 
少なくとも、Use Size Classesを外すとView Controller の画面が小さくなります。
 
ここからは、好みですがUse Auto Layoutも外したのでAutoresizing を調整します。
 
例として、Button を選択、Inspector のView にある Autoresizing を図のように設定します。
 
swift_imageview2_5
 

Story Board のUI部品とコードの紐付け

 
これは、Story board から xxxx.swift ファイルにドラッグして自動的に設定することもできますが、今回は、基本的な操作でいきます。
 
例として UIButton を選択右クリック
「Touch Up inside」を選び
View Controller へ紐を伸ばしtapped を選択します
 
swift_imageview2_6
 
接続された情報が表示されます
 
swift_imageview2_7
 
同じように、UIImageViewも紐付けし実行してみましょう
Tap して画像が表示されたでしょうか
関連ページ