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

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

Swift 5.1
Xcode 11.3.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 して画像が表示されたでしょうか
 

 
関連ページ

References:
UIImageView – UIKit | Apple Developer Documentation
UIImage – UIKit | Apple Developer Documentation

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


Play Ground
本業と並行してやるには月額制なのがありがたいです。


無料で転職まで
これはiOSアプリ限定ではありませんが無料です
その代わり就職することを前提にしたスクールで「エンジニアになって職を得たい」のであれば手っ取り早いかもしれません

受講料無料:社会人転職コース


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

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

フォローする