【swift5】背景画像をスクリーンサイズに合わせて表示させる方法

環境

swift 5.0.1
xcode 11.0

実現したいこと

「label等を設置した後に、背景に画像を設置したい。」

背景画像用にstoruboardからimageViewを設置すると要素が重なり合ってしまい、backgroundColorとして背景画像を設定すると、画像サイズが画面幅に合わない。

どちらかの問題を解決して、本機能を実現させたい。

問題点

・要素の重なり順問題
imageViewをstoryboardから挿入　→　画像が上に重なって表示されてしまい、コンテンツが隠れてしまう。

・画面幅問題
UIColorのcolorWithPatternImageメソッドを利用し、backgroundColorプロパティを変更　→　画像サイズが元々の画像サイズで表示されてしまい、画面幅に合わない。

let backgroundImage = UIImage(named: "画像名")!
self.view.backgroundColor = UIColor(patternImage: backgroundImage)

tanihiro.log:【iOS】UIViewに背景画像を設定する方法
Phosphophyllite:画像をUIViewの壁紙に設定する【Swift】

解決策

・要素の重なり順問題を、addSubview関数によりmainViewにsubviewとして加えたのち、sendSubviewToBack関数を用いてviewの最背面に移動させることで解決。

複数ページにてこれを行いたい場合、いちいち設定するのは面倒くさいので関数化させてしまう。

まず、新規ファイルを作り、以下を記述する。

addBackground.swift

import UIKit

extension UIView {
    func addBackground(name: String) {
        // スクリーンサイズの取得
        let width = UIScreen.main.bounds.size.width
        let height = UIScreen.main.bounds.size.height

        // スクリーンサイズにあわせてimageViewの配置
        let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        //imageViewに背景画像を表示
        imageViewBackground.image = UIImage(named: name)

        // 画像の表示モードを変更。
        imageViewBackground.contentMode = UIView.ContentMode.scaleAspectFill

        // subviewをメインビューに追加
        self.addSubview(imageViewBackground)
        // 加えたsubviewを、最背面に設置する
        self.sendSubviewToBack(imageViewBackground)
    }
}

これにより、表示させたいviewControllerのviewDidLoad内に以下を表記することで、背景画像を画面幅に合わせて表示することができるように。

viewController.swift

    override func viewDidLoad() {
        super.viewDidLoad()

        // 表示したい画像の名前(拡張子含む)を引数とする。
        self.view.addBackground(name: "画像名")
    }

参考ページ

・コードログ：ios – 背景画像をどのように素早くスクリーンサイズに合わせるのですか？
・HatenaBlog：画面ぴったりに画像を出力「UIScreen、UIImege」
・appleDevelopper：Instance Method addSubview(_:)
・iDEACLOUD：【Xcode】addSubviewで生成したViewの重なり順を変更するには？