將畫面上多個元件變成 array 的 outlet collection

透過拉 outlet 連線，我們可產生一個個的變數存取畫面上的元件。但是當畫面上元件很多時，產生的 outlet 變數也會成長到令人害怕的地步。

比方上圖有六顆骰子，為了從程式控制每顆骰子，我們需要拉六個 outlet，產生六個變數。

@IBOutlet weak var dice1Button: UIButton!
@IBOutlet weak var dice2Button: UIButton!
@IBOutlet weak var dice3Button: UIButton!
@IBOutlet weak var dice4Button: UIButton!
@IBOutlet weak var dice5Button: UIButton!
@IBOutlet weak var dice6Button: UIButton!

但是像這樣功能類似的元件，更適合的方式其實是存放在 array ，方便之後搭配 for in 迴圈。比方想同時擲六顆骰子時，只要以 for in 跑六次，即可設定每顆骰子的點數。

有個跟 outlet 很像的兄弟可以做到這件事，它的名字叫 outlet collection。接下來就讓我們透過它將六顆骰子存在 array 吧。

1 點選左上的第一顆骰子，拉線到右邊 controller 的 { } 裡。

2 將 Connection 改成 Outlet Collection，Name 欄位輸入名稱 diceButtons。

3 產生變數 diceButtons。

@IBOutlet var diceButtons: [UIButton]!

型別為 [UIButton]!，因此它是個存放 UIButton 的 array。

4 將其它骰子的 button 連線到剛剛產生的變數 diceButtons。

可從左邊的骰子連到右邊的變數(按右鍵)，也可從右邊 outlet 變數旁的圓圈連到左邊的骰子(按左鍵)。

由於 array 有順序，所以東西存放在 array 的順序，將依據當初我們拉線的順序。第一個拉的骰子在 diceButtons[0]，第二個拉的在 diceButtons[1]，其它以此類推。

5 查看 outlet collection 的連線。

六顆骰子全部連完後，點選下圖 outlet 旁的圓圈，即可看到它連到左邊的六顆骰子。

6 查看 outlet collection array 裡成員的順序。

雖然寫 iOS App 的都很聰明，不過我們還是會有點健忘，有時會忘了當初拉線的順序，不知道畫面上的骰子是對應 array 的第幾個成員。此時其實有個簡單的方法可以查詢。

我們可切換到 controller 的 Connections inspector 頁面查詢。如下圖所示，當我們將游標移到第二個 Button，將看到它對應的骰子，因此 diceButtons[1] 是右上的骰子。

7 同時擲六顆骰子的程式範例

@IBAction func play(_ sender: Any) {
   for dice in diceButtons {
      let number = Int.random(in: 1...6)
      let image = UIImage(named: "dice\(number)")
      dice.setBackgroundImage(image!, for: .normal)
   }
}