
今回は複数の部品を一つの配列にまとめてループ処理する方法を試してみたいと思います!
下のGIFが完成イメージです!
ボタンを押す度に4枚の画像がランダムにそれぞれのimageViewに読み込まれています。
まず最初に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にファイル名を指定する事ができました。
説明が下手で本当に申し訳ないです。
少しでも役に立てたなら良かったです!
コメントを残す