[iPhone] 画像UIImageViewをSwiftコードで設定する

iOSアプリで画像を表示させるには UIImageView を使います。Appleの場合、Retina ディスプレーでより綺麗に見せるためにサフィックスで@2x, @3xなどを付けます。
 

 

Swift 4.0
Xcode 9.0.1

 

UIImageView

 
ImageView クラスは画像のコンテナを提供するものです。
また、今回はStoryboardを使わず動的に画像を表示することを想定していますが、ストーリーボードを使った画像の表示もできます。

コードで画像を表示させる事前作業として、画像をプロジェクトに追加します。

  • 右クリックでメニューの [Add Files to "xxx”…] を選択 ファイルを選んで [A[Add]ます。画像ファイルの例としてwafuku@2x.jpg(750 x 1334pix) の画像をプロジェクトに追加しました。
     
    screen-shot-2016-09-16-at-13-11-20

750x1334pixですがRetinaの高解像度に合わせるためにサフィックスの@2xを付けます。
 
wafuku@2x
 

  • 画像をprojectに追加するにはAssets.xcassetsに入れる方法もあります。画像を画像ファイルを Assets.xcassetsフォルダーに入れると2xのスペースに設定されました。


 

コーディング

  • 画像をプロジェクト内に置きましたので、それを取得するのですがUIImageを使って画像名からインスタンスを作成します。
  • その後UIImageViewのオブジェクトに画像を設定させるという、2段階での設定です。
  • storyboardを使わないので、画面サイズを取得しその中心位置を設定させる作業が必要になります。
  • storyboardではこの作業はいりませんが、逆に最近端末種類が増えたのでそれぞれのサイズでも中央に来るような対策をする必要もあります。

ViewController.swift

実行結果

 
iPhone 8

 
iPhone X の場合はこの画像ではこうなります。
 

 
アスペクト比違いすぎるので上下に空白ができてしまいましたので、
1125×2436 にリサイズした画像を作って表示させてみました。
 

 
Safe Areaも無視して画面いっぱいにする必要もないような気もします。
今回は簡略化のため、画面サイズに合った画像を使いましたが、コードで記述する場合は、スクリーンサイズで拡大縮小する必要が出てきます。
画像の拡大縮小
 
あるいは最初から静的に決まっているのであればStoryboard上で設定する方が簡単です。
 
モデル: 河村友歌
 
 
関連ページ

 


ページのトップへ戻る

シェアする

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

フォローする