【Swift】画面上に画像を表示する方法

まえがき

Xcode12.4のSwiftを使ったiOSアプリ開発にて、以前のXcodeと異なることが多かったので記載

1. UIImageに画像を載せる方法

• 右上の+ボタンをクリックし、オブジェクトの一覧を表示する
• Image Viewを選択し、Storyboardに追加する

追加後のStoryboard

次にアウトレット接続をして画像を設定する

• ViewControllerを開く
• controlキーを押したままStoryboardのImage ViewをViewControllerのviewDidLoadメソッドの上に追加する（Name: imageに設定）

• 以下、ViewController

import UIKit

class ViewController: UIViewController {

    // アウトレット接続
    @IBOutlet weak var image: UIImageView! // 画像
    
    // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
    }  
}

次に任意の画像をprojectに追加する（sample.jpgを追加）

Copy items if neededにチェックがあるか確認する

• viewDidLoad内で、ラベルとボタンの中身を設定する
• 以下、ViewControllerのviewDidLoadメソッド

  // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // 画像を設定
        let sampleImage = UIImage(named: "sample.jpg")
        image.image = sampleImage
    }

実行後

2. 背景に画像を載せる方法

####全画面に表示する

• StoryboardにUIパーツは表示しない
• 任意の画像をprojectに追加する（sample.jpgを追加）
• viewDidLoad内で、背景画像を設定する
• 以下、ViewControllerのviewDidLoadメソッド

  // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // 画像を設定
        let widthSize = UIScreen.main.bounds.size.width // 画面の横の大きさを取得
        let heightSize = UIScreen.main.bounds.size.height // 画面の縦の大きさを取得
        let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: widthSize, height: heightSize)) // 背景画像の大きさを設定
        imageViewBackground.image = UIImage(named: "sample.jpg") // 画像を設定
        self.view.addSubview(imageViewBackground) // 背景画像を追加する
    }

UIImageView(frame: CGRect(x: 0, y: 0, width: widthSize, height: heightSize))

• x： 表示場所X座標
• y： 表示場所y座標
• width: 横の大きさ
• height: 縦の大きさ

実行後

####横（縦）に合わせて表示する

• 今回は正方形の画像なので横に合わせて画像を表示する
• 以下、ViewControllerのviewDidLoadメソッド

  let widthSize = UIScreen.main.bounds.size.width // 画面の横の大きさを取得
  let heightSize = UIScreen.main.bounds.size.height // 画面の縦の大きさを取得
  let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: (heightSize - widthSize) / 2, width: widthSize, height: widthSize)) // 背景画像の大きさを設定
  imageViewBackground.image = UIImage(named: "sample.jpg") // 画像を設定
  self.view.addSubview(imageViewBackground) // 背景画像を追加する

画像を真ん中に設定したいので下記を設定（今回は載せたい画像の縦のサイズがwidthSizeになる）

• y: (heightSize-widthSize)/2（画面縦のサイズ - 載せたい画像の縦のサイズ）/ 2
• height: 画面の横の大きさに設定する

実行後

####補足: 画像を半透明にする

  imageViewBackground.alpha = 0.5 // 半透明度50%

実行後

今回はここまで !

---

関連記事

1. SwiftでStoryboardを扱う
2.StoryboardにUIパーツを設置する
3.画面遷移を行う
4.画面上に画像を表示する方法（本記事）
5.ImagePickerでカメラロールから写真を選択して表示する
6.PHPickerでカメラロールから写真を選択して表示する