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

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

# 1. UIImageに画像を載せる方法
- 右上の+ボタンをクリックし、オブジェクトの一覧を表示する
- Image Viewを選択し、Storyboardに追加する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/de800a4e-a247-bd8f-8d1f-68749e9bfedf.png" width=70%>

追加後のStoryboard
![ 2021-02-03 12.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/861c8d11-7f7b-7490-5116-f90d72399b0e.png)


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

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

![ 2021-02-03 12.22.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/e21e82b9-f05f-6669-df73-3ebd6a47c901.png)

- 以下、ViewController

~~~swift
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を追加）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/49ed54ae-115c-d3da-d194-4c56ce4dfaf9.png" width=80%>
Copy items if neededにチェックがあるか確認する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/ea55bed1-fbef-9404-e0e4-f818f6f0a508.png" width=40%>

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

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

実行後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/43026cdc-56ab-757a-3381-e531568c8bc9.png" width=50%>

# 2. 背景に画像を載せる方法
####全画面に表示する
- StoryboardにUIパーツは表示しない
- 任意の画像をprojectに追加する（sample.jpgを追加）
- viewDidLoad内で、背景画像を設定する
- 以下、ViewControllerの`viewDidLoad`メソッド

~~~swift
  // 最初に読み込まれるコード
    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: 縦の大きさ

実行後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/245e1f66-66ae-eab1-ecc1-330db3eddd93.png" width=50%>

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

~~~swift
  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: 画面の横の大きさに設定する

実行後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/cb68b65c-d769-a87a-8215-3d74e6253f1f.png" width=50%>

####補足: 画像を半透明にする
~~~swift
  imageViewBackground.alpha = 0.5 // 半透明度50%
~~~

実行後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/2d220925-e50a-eb65-e9ba-8588e33f1b41.png" width=50%>




今回はここまで ! 
***
#### 関連記事
[1. SwiftでStoryboardを扱う](https://qiita.com/kanae_/items/8331f18b93286a0bcc02)
[2.StoryboardにUIパーツを設置する](https://qiita.com/kanae_/items/e4c74ab1de7ccc9125bb)
[3.画面遷移を行う](https://qiita.com/kanae_/items/a0637df2932ce63a1e67)
4.画面上に画像を表示する方法（本記事）
[5.ImagePickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/b6c13f59924031403150)
[6.PHPickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/8afaa7925401bcfdaf27)