[Xcode]部品をまとめて配列にする方法！OutletColectionで実装！

今回は複数の部品を一つの配列にまとめてループ処理する方法を試してみたいと思います！
下のGIFが完成イメージです！
ボタンを押す度に4枚の画像がランダムにそれぞれのimageViewに読み込まれています。

超便利OutletColection！

まず最初にbutton1つとimageViewを4つ適当に配置します！
次にViewController.swiftと紐付けるんですけど、imageViewをどれでもいいのでドラッグ&ドロップします。
いつもならOutletで設定してると思うんですけど、ここに実はOutletColectionと言うのがあってこれを選択する事でimageViewを配列にする事ができます！

次に残りのimageViewを紐付けます！
先ほど作ったOutletColectionの上にドラッグ&ドロップするだけです！
青くなれば離して大丈夫です。
これでimgの中にimageViewが4つ配列として格納されました！
buttonは通常通りActionで紐付けます。

コードを書く！

    @IBOutlet var img: [UIImageView]!
    
    var haertImg = ["heart_1", "heart_2", "heart_3", "heart_4"]
    
    @IBAction func btn(_ sender: Any) {
        let shuffledHeartImg = haertImg.shuffled()
        var  x = 0
        for _ in shuffledHeartImg {
            let name = shuffledHeartImg[x]
            img[x].image = UIImage(named: name)
            x += 1
        }
    }

コードを説明していく前に好きな画像を4枚Xcodeにアップロードしておきます。

1行目が先ほど紐付けたOutletColectionで、名前は「img」としています。
3行目でimageViewに代入するファイル名を配列にした物です。
5行目から下にボタンを押した時の処理を書いて行きます。

6行目で先ほど作った配列haertImgの中身をシャッフルしてshuffledHeartImgに代入しています。
7行目でOutletColection(img)配列とshuffledHeartImg配列のインデックス番号で使う為の変数を定義してます！

8行目からfor文でshuffledHeartImgをループさせています！
9行目のlet NameにshuffledHeartImg[x]、つまりシャッフルした1番目のファイル名(xの初期値が0なので)がNameに代入されています。
10行目でOutletColection(img)に画像を読み込ませてます。
こちらもxの部分には0が入るのでOutletColection(img)の先頭のimageViewが指定されています。
11行目でxに1を足す事でshuffledHeartImg[x]とimg[x].imageのxの部分に1が入るので、シャッフルした二番目のファイル名が二番目のimageViewに指定されます。
これを後、二回繰り返して4つのimageViewにファイル名を指定する事ができました。

説明が下手で本当に申し訳ないです。
少しでも役に立てたなら良かったです！