下拉式選單 (使用Swift 4)

魏巍

8 min readJan 8, 2018

這篇文章參考 Youtube 上面 Gary Tokman 的短片，介紹怎麼樣利用 UIStackView 製作出下拉式選單。請跟我一起開一個新的專案，Single View App，命名成 DropDownMenu。

1)擺放元件

請選 Main.storyboard。下拉式選單的話，每個選項都是按鈕，所以一開始拉五顆按鈕拉到畫面上。

最上面的按鈕是主要的按鈕，按到這顆按鈕就開啟選項。把這顆按鈕的文字改成 Game。這個範例中，打算按下按鈕跳出來的，就是很多熱門的遊戲列表。

下面的選項分別改成時下受歡迎的遊戲名。您可以加入您自己的選項，不是一定要遊戲，也許選項可以列出您最喜歡的歌手或歌曲排行榜、或是家人朋友的電話，都可以。只是這個範例中，加入的選項是幾款遊戲名。

接下來我們來把這些按鈕包在一個 UIStackView 裡面。做法就是把按鈕全部選起來，按下面的這個按鍵，就把按鈕都包在一個 stack view 裡面。

然後來幫這個 UIStackView 做 Auto Layout 設定：取消勾選這個 constaint to margin，然後設定距離上面，左邊及右邊都是 0。

您可能覺得很奇怪，為什麼沒有設定 UIStackView 的高度呢？因為 UIStackView 的高度跟寬度可以根據裡面的物件決定。比方這個範例裡面，接下來把代表選項按鈕都選起來，固定這些按鈕的高度是 50。這樣等於也就決定了 UIStackView 的高度。

接下來設定按鈕的顏色。首先是主要的選單按鈕(也就是上面有 Game 字樣的按鈕，請選到這顆按鈕)。然後把文字調大一點 18，粗體。文字顏色調成白色，按鈕的底色調成深灰色。

接下來其他選項的按鈕的話，全部選起來一起調整：文字調成白色，底色調成綠色。

目前按鈕的寬度都不太一樣，要調整的話，可以把所有按鈕都選起來，設定所有按鈕的寬度抵住 UIStackView 的兩邊。距離兩邊都是 0。這樣畫面就做好了。

2)連結元件到畫面中

接下來，來把按鈕連結到畫面中。首先連結主要的按鈕。把這顆按鈕連結成一個 IBAction，命名方法的名字是 startSelect。稍後設定按到這個按鈕就秀出或是隱藏下面的選項。

接下來把下面的四個選項連結到程式碼，變成一個 outlet。這樣按到上面的主要按鈕的時候，就可以透過程式碼秀出或是隱藏下面的選項。先連結第一個選項到程式碼中。這邊請注意，要選連結成一個 outlet collection。這個 outlet 的名字命名成 options。

意思是說，把這顆按鈕連結到程式碼的 options 的陣列中。這樣的話，我們就在程式碼裡面開了一個陣列。裡面現在有一顆按鈕。

接下來就一面按著鍵盤上的 control 鍵，繼續把剩下來的第二個選項、第三個選項，與第四個選項也連結到同樣一個陣列中。這樣連結的話，程式碼中的 options 就是包含著四顆按鈕的一個陣列。

再次連結選項到程式碼中。先選第一個按鈕選項。這次連結成一個 IBAction，命名成 optionPressed。type 請選 UIButton。意思是說，如果我按到這顆按鈕的話，就會執行 optionPressed 裡面的程式碼。

連結好了之後，一面按著鍵盤上的 control，一面把其他三個選項也連結到同樣一個方法中。這樣做的意思是，等一下按到每個選項都會執行同一個、也就是 optionPressed 方法。

在真的寫程式碼之前，請先把綠色的選項按鈕全部選起來。都選起來以後，點選右邊欄的 hidden。這些綠色的選項就會都暫時看不到。

3)程式碼的部分

目前選項是隱藏起來的，如果想要按到主要的按鈕，執行 startSelect 的時候，就把每個按鈕秀出來的話，請寫下下面的的程式碼。下面程式碼的意思是說，按到主要的按鈕，就會跑一迴圈。把每個選項拿出來，如果選項是隱藏的，就秀出來；如果目前選項已經秀出來了，就隱藏。

@IBAction func startSelect(_ sender: UIButton) {
    for option in options{
        option.isHidden = !option.isHidden
    }
}

做到目前如果按下編譯跟執行的按鈕。按下主要按鈕就會跳出或收起選項。

4)動畫效果

接下來要把這個功能做得更炫一點：就是把這個秀出按鈕的過程加入動畫。請把 startSelect 方法改成下面這樣子。這個意思是說，我們按下按鈕要做動畫，要在 0.3 秒裡面，把按鈕秀出來或是隱藏起來。

@IBAction func startSelect(_ sender: UIButton) {
    for option in options{
        UIView.animate(withDuration: 0.3, animations: {
            option.isHidden = !option.isHidden
        })
    }
}

執行程式的話，按下主要的按鈕，會發現掉出選單的過程中，就會有動畫了。不過這樣設定動畫會有點怪怪的，感覺選單好像是從最上面開始跳下來的。

請將 startSelect 方法再次改動。如下，加入一句程式碼就可以解決問題了。

@IBAction func startSelect(_ sender: UIButton) {
    for option in options{
        UIView.animate(withDuration: 0.3, animations: {
            option.isHidden = !option.isHidden
            self.view.layoutIfNeeded()  //加入這句
        })
    }
}

5)按到選項的反應

如果按下按鈕要顯示相對應的遊戲名的話，需要設定 optionPressed 方法。如下，用 sender，拿到觸發這個方法的按鈕。接著用 currentTitle 就可以拿到目前按鈕上的文字。如果 currentTitle 有值，就把遊戲名印出來；沒有值的話，就印出空字串。

@IBAction func optionPressed(_ sender: UIButton) {
    let gameName = sender.currentTitle ?? ""
    print(gameName)
}

執行程式後，把選單點開，選到任何的選項就印出了相對應的遊戲名稱。

以上就是下拉式選單的作法。會了這個以後，您還可以做像這樣，把選項變成圖片的感覺也蠻酷的。就是把按鈕變成圖片的按鈕就好了。請大家試著做做看吧！

如果您喜歡這篇文章的話，歡迎訂閱。另外，我在 Facebook 有開一個學習 SWIFT 的粉絲團，每天在那邊我都會分享我學到的 iPhone 開發技巧，也歡迎加入。