SwiftでiOSアプリに画像を読み込んで表示する方法【初心者向け解説】

はじめに

iOSアプリで画像を読み込んで表示するには、まず表示したい画像ファイルを用意する必要があります。本記事では、Swiftを使って画像をアプリに組み込み、画面に表示するまでの手順をサンプルコード付きで解説します。

手順1：画像をプロジェクトに追加する

まず、用意した画像ファイルをXcodeのプロジェクトナビゲーターにドラッグ＆ドロップします。その際、ダイアログで以下の点に注意してください。

• 「Copy items if needed（必要ならば項目をコピー）」にチェックを入れる
• 追加先のターゲットとして自分のアプリケーションが選択されていることを確認する

これにより、画像がアプリのバンドルに正しく含まれ、コードから読み込めるようになります。

手順2：UIImageViewを作成して画像を設定する

次に、UIImageViewを作成し、そのimageプロパティに画像を割り当てます。ここでは、再利用しやすいように関数としてまとめてみましょう。

func addImage(imageName img: String) {
    let imageView = UIImageView()
    imageView.frame = self.view.frame
    imageView.contentMode = .scaleAspectFit
    if let newImage = UIImage(named: img) {
        imageView.image = newImage
    }
    self.view.addSubview(imageView)
}

コードのポイントは以下の通りです。

• UIImage(named:)は、バンドル内またはアセットカタログにある画像を名前で読み込むイニシャライザです。指定した名前の画像が見つからない場合があるため、戻り値はOptional型になります。
• if letによるオプショナルバインディングで、画像の読み込みに成功した場合のみimageView.imageに代入しています。
• contentMode = .scaleAspectFitを指定すると、画像のアスペクト比（縦横比）を崩さずにUIImageViewの枠内へ収めて表示できます。

手順3：viewDidLoadから呼び出す

作成した関数は、viewDidLoadなど、実際に画像を表示したい任意のタイミングで呼び出します。

override func viewDidLoad() {
    super.viewDidLoad()
    self.addImage(imageName: "1.png")
}

なお、Storyboard上に配置したUIImageViewに対して画像を設定する場合は、@IBOutletで接続してからimageView.image = UIImage(named: "1.png")と書く方法もあります。

実行結果

上記のコードをアプリケーションで実行すると、画面全体に指定した画像がアスペクト比を維持したまま表示されます。

まとめ

画像の表示は「プロジェクトへの追加」→「UIImage(named:)で読み込み」→「UIImageViewに設定」という流れで実装できます。アセットカタログを活用すれば、複数解像度の画像も管理しやすくなるため、実務ではそちらの利用も検討してみてください。