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

iOSアプリで画像を表示させるにはSwiftのコードのみでUIImageViewを使うこともできましたが、storyboard を使ってもできます。
 

Swift 4.0
Xcode 9.0.1

 

UIImageView

 
前回の、画像UIImageViewをSwiftコードで設定と同じようにUIImageとUIImageViewを使います。

  • 画像をプロジェクト内に置いて、それをUIImageを使って画像名からインスタンスを作成します。
  • その後UIImageViewのプロパティimageとしてその画像を設定させるという、2段階での設定です。

 

コードの記述

 
ボタンをタップして画像が変わるようにしてみたいと思います。
画像の切り替えは、ボタンタップでBool変数がtrueかfalseによって変更することにします。

 
ViewController.swift

 
画像の設定をします。
img1@2x.jpg
img2@2x.jpg
をAssets.xcassets フォルダに入れると「2x」のImage Setに割り振られます。
 

 

storyboard の設定

 
Main.storyboard を開いて、UIImageView と UIButton をDrag & Drop で配置します。
 

 
ButtonはUI部品が分かるように背景をグレーにしました。
 
それから、 View Controller のサイズは色々ですが、それぞれに調整できる方法として
今回は、以前と同じ方法(古いやり方)で調整してみます。

View Controller を選択「Interface Builder Document」にある
– Use Auto Layout
– Use Trait Variations
– Use Safe Area Layout Guides
のチェックを外します(ワーニングが出ますが)
 

 
Autoresizing を調整します。
Button を選択、Inspector のView にある Autoresizing を図のように設定します。この設定ではスクリーンサイズが変わっても上下左右同じ程度のスペースで配置されるようになります。
 

 
ただし、ImageViewは画像のアスペクト比が変わると、画像が変わるのでAspect Fitに変更した方がいいかもしれません。
 

 

storyboard のUI部品とコードの紐付け

 
これは、Story board から xxxx.swift ファイルにドラッグして自動的に設定することもできますが、今回は別の方法でいきます。(私はいつもこれですが)
 
例として UIButton を選択右クリック
「Touch Up inside」を選び
View Controller へ紐を伸ばすと候補が表示されるので tapped… を選択します。
 

 
接続された情報が表示されます
 

 
同じように、UIImageViewも紐付けし実行してみましょう
 

 
これで実行してみましょう。
Tap して画像が表示されたでしょうか
 

 
関連ページ


ページのトップへ戻る

シェアする

  • このエントリーをはてなブックマークに追加

フォローする