完全に理解する Storyboard & UIKit (Day 13): UIImageViewと画像リソース管理

見出しやテキストだけのアプリは退屈です。UIに画像を表示してリッチな体験を作り出すための主役が UIImageView です。 しかし、ただ画像を貼るだけでなく、異なる画面サイズに対して「画像が潰れない（歪まない）」ように表示する設定や、システムに合わせた解像度の素材管理が重要になります。

1. UIImageViewの基本と Content Mode (超重要)

UIImageView 自体は単なる「枠」であり、そこに UIImage クラスの画像データを流し込んで表示します。 このとき、枠のサイズ（Auto Layoutで決まったサイズ）と、実際の画像のサイズ比率（アスペクト比）が異なる場合にどう描画するか を決めるのが Content Mode プロパティです。

Storyboardの Attributes Inspector で設定できます。以下の3つは必ず覚えましょう。

Scale to Fill (デフォルト / 非推奨)

• 枠のサイズに合わせて、画像を縦・横に 無理やり引き伸ばして（潰して） 埋め尽くします。
• ほぼ全てのケースで画像が歪んで不恰好になるため、意図的な表現以外では使用を避けてください。

Aspect Fit (アスペクト・フィット)

• 画像の縦横比（アスペクト比）を崩さずに、枠内に画像全体が収まるように縮小・拡大します。
• 画像が切れることはありませんが、枠と画像の比率が違う場合、上下または左右に「隙間（余白）」が生まれます。

Aspect Fill (アスペクト・フィル / 最もよく使う)

• 画像の縦横比を崩さずに、枠を隙間なく完全に埋め尽くすように拡大します。
• 枠内に隙間はできませんが、枠よりはみ出した部分の画像は「切り取られて見えなく」なります。
• ⚠️注意: はみ出した部分を画面上に描画させないために、Attributes Inspectorの Clip to Bounds というチェックボックスを必ずON（True）にしてください。これを忘れると、隣のViewの上に画像がはみ出して描画されてしまいます。

2. Asset Catalog (Assets.xcassets) によるリソース管理

コードやStoryboardで画像を呼び出す前に、プロジェクト内に画像ファイル（PNGやJPEG）を登録する必要があります。 これを行う専用の場所が、プロジェクトナビゲーターにある青いフォルダアイコンの Assets.xcassets (Asset Catalog) です。

なぜ Asset Catalog を使うのか？

単にフォルダに画像を突っ込むのではなく、Asset Catalog を使う理由は「解像度管理」と「パフォーマンス最適化」です。

iPhoneには標準的な画面（1x）、Retinaディスプレイ（2x）、Super Retinaディスプレイ（3x）の3種類のピクセル密度が存在します。 Asset Catalogに画像セット（Image Set）を作成すると、1x, 2x, 3x のスロットが用意されます。

• 100x100（1x）
• 200x200（2x）
• 300x300（3x） サイズの画像をそれぞれドラッグ＆ドロップしておくと、アプリ実行時にiOSシステムが「今動いているiPhoneに最適な解像度の画像」を自動的に選択・メモリ展開してくれます。

Storyboardでの表示

Asset Catalog に profile_icon という名前で画像を登録したら、StoryboardのUIImageViewを選択し、Image のドロップダウンを開くだけで profile_icon が選択できるようになります。

3. コードでの画像の扱い (UIImage)

通信機能などにより、動的に画像を切り替えたい場合はコードから設定します。

swift
@IBOutlet weak var myImageView: UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Asset Catalogに登録した画像名からインスタンスを生成
    let catImage = UIImage(named: "cat_photo")

    // UIImageViewにセット
    myImageView.image = catImage

    // 角丸にする（よく使う表現）
    myImageView.layer.cornerRadius = 10.0
    myImageView.clipsToBounds = true // はみ出た角を切り落とす
}

SF Symbolsの活用

iOS 13以降、Appleは数千のシステムアイコンをフォントと同じように扱える SF Symbols を提供しています。自前でアイコン画像を用意しなくても、高品質なアイコンがすぐに使えます。

swift
// "heart.fill" というシステムアイコンを呼び出す
let heartIcon = UIImage(systemName: "heart.fill")
myImageView.image = heartIcon
// SF Symbolはプロパティで色を変えられるTintColorの影響を受けます
myImageView.tintColor = .systemRed

📝 今日のまとめ

• UIImageView は画像を表示する枠。画像が歪まないように Aspect Fit か Aspect Fill を設定する。
• Aspect Fill を使うときは、はみ出しを防ぐために Clip to Bounds を必ずONにする。
• 画像素材は Assets.xcassets に入れ、1x, 2x, 3x の解像度を用意することで綺麗な描画ができる。
• 標準アイコンで済む場所は、自作画像よりも SF Symbols (UIImage(systemName:)) を使うべき。

UIに画像が入り、華やかになってきました。 明日の Day 14 は、画面に収まりきらない巨大なコンテンツや画像を表示し、指でスクロールやズームを行うための基盤である UIScrollView の仕組みを学びます。