Tech►iOS►UI

iOS Pulldown List(Dropdown List、Combobox) by Swift

最近因為工作的關係開始接觸 iOS SDK，Apple 官方文件算是頗齊全的，但相較於 Android 的手冊，還是略遜一疇（Google 大神還是比較有善～）。而本次目標是在 iOS 裡面新增一個簡單下拉式選單（Dropdown Menu、Pulldown Menu），憑著之前新增元件的經驗，我開始在 Xcode Object Library 裡搜尋下拉選單，但不管我打 Dropdown、Pulldown，還是 Combobox 就是沒有！！！一向帶給人有善印象的 Apple 咬一口，居然沒有提供下拉選單這種元件，不會要自己刻吧，崩潰。。。

還好現在第三方社群很發達，大家都很 Nice！拜了幾輪 Google 大神後，大神給了指示，原來在 iOS 裡下拉選單需要用 UITextField 這個元件來改造，然後再加上一些其他元件完成選單的內容。選單的製作 Google 大神給了我兩個答案，一個是透過修改 UITextField InputView，另一個是使用 ActionSheetPicker-3.0，以下將一一介紹：

方法一：修改 UITextField InputView（Ref.)

  1. 首先在目標 ViewController 裡面新增幾個成員變數。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    class ViewController: UIViewController {
            //UITextField 的 Reference Outlet 變數
            @IBOutlet weak var textField: UITextField!
            //選單元件
            private var pickerView: UIPickerView!;
            //下拉選單的內容
            private var dataArray: NSArray!;
            。。。。。
    }

記得到 Storyboard 裡將Reference Outlet 變數與元件建立連結。

  1. 在 ViewController 的 viewDidLoad() 裡改造 UITextField，現在先將它看起來像下拉選單（新增下拉符號）。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    override func viewDidLoad() {
            。。。。。
            //指定下拉符號圖片
            var img = UIImage(named: "dwn")
            self.textField.rightView = UIImageView(image: img)
            //設定圖片填滿右視圖
            self.textField.rightView!.contentMode = UIViewContentMode.ScaleAspectFit
            self.textField.rightView!.clipsToBounds = true
            //顯示下拉符號
            self.textField.rightViewMode = UITextFieldViewMode.Always
            //建立委托
            self.textField.delegate = self
            。。。。
    }

  2. 再來在 ViewController 裡新增兩個 function ，一個用來建立選單元件（使用 UIPickerView 及 Toolbar），一個用來告知 iOS 使用者已經完成選擇。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    //新增選單元件
    private func showPicker() {
          //使用 UIPickerView 做為選擇器
          self.pickerView = UIPickerView()
          //顯示目前選擇指標
          self.pickerView.showSelectionIndicator = true
          //指定資料來源與委托
          self.pickerView.dataSource = self
          self.pickerView.delegate = self
          //使用 UIToolbar 建立選單元件與外觀
          var toolbar = UIToolbar()
          toolbar.barStyle = UIBarStyle.Default
          toolbar.sizeToFit()
          
          //新增完成選擇（Done）按鈕
          var doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Done, target: self, action: "doneClicked")
          //讓按鈕靠右對齊的元件
          var flexibleSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
          //將元件放到 toolbar 裡面
          toolbar.setItems([flexibleSpace, doneButton], animated: true)
    }
    //使用者點擊成選擇（Done）按鈕後的動作
    func doneClicked() {
          //隱藏選單
          self.textField.resignFirstResponder()
    }

  3. 最後建立使用者與 UITextField 和 UIPickerView 的互動事件，以及設定 UIPickerView 的選項資料。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    class ViewController: UIViewController, UITextFieldDelegate, UIPickerViewDataSource, UIPickerViewDelegate {
            。。。。。
            //點擊 textField 的時候出現選單
            func textFieldShouldBeginEditing(textField: UITextField) -> Bool {
                  //沒有資料的時候不顯示選單
                  if self.dataArray != nil && self.dataArray.count > 0 {
                        self.showPicker(textField)
                        return true
                  }
                  return false
            }
            //不讓使用者透過建盤輸入文字
            func textField(textField: UITextField, shouldChangedCharactersInRange range: NSRange, replacementString string: String) {
                  return false
            }
            //設定選單項目的列數，例如時間 (小時：分鐘) 的 pickerView 就是 return 2
            func numberOfComponentInPickerView(pickerView: UIPickerView) -> Int {
                  return 1
            }
            //設定選單選項的數量
            func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
                  return self.dataArray.count
            }
            //設定選單項目
            func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
                  return self.dataArray[row] as! String
            }
            //當選單被滑動（Sliding）的時候，改變 textField 的值
            func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
                  self.textField.text = self.dataArray[row] as! String
            }
    }

方法二：使用 ActionSheetPicker-3.0

ActionSheetPicker-3.0 這個元件是 Petr Korolev 這個好心人用 Objective-C 寫的，但我的專案目標語言是 Swift，所以要先設定套件關聯（Bridge），Petr Korolev 提供了三個方法安裝使用這個元件（CocoaPods、Carhage 和 Git Submodule），但可能我太好運了 CocoaPods 和 Carhage 的 Bridge 一直設定不起來，我只好用 Git Submodule，以下是我的作法：

  1. 設定 Git Submodule

    1
    2
    # 打開 Terminal，然後切換目錄到目標專案的根目錄，最後打上這一行
    $ git submodule add https://github.com/skywinder/ActionSheetPicker-3.0.git

  2. 用 Finder 打開專案目錄底下的 ActionSheetPicker-3.0 資料夾，然後將 /CoreActionSheetPicker/CoreActionSheetPicker.xcodeproj 拖到 Xcode 的 Project Navigator 裡面。

    ProjectSetting

  3. 用滑數點擊 Xcode Project Navigator 裡最上面的專案圖案（藍色的 Icon），右邊跳出專案設定，如下圖：

    ProjectSetting

  4. 切換專案設定的標籤到 Build Phases，在 Target Dependancy 裡面新增 CoreActionSheetPicker.framework。

    ProjectSetting

  5. 一樣在 Build Phases 裡，新增一個 New Copy Files Phase，將其重新命名為 Copy Frameworks。

    ProjectSetting

    ProjectSetting

  6. 在 Copy Frameworks 裡，選擇 Destination 為 Frameworks，然後新增 CoreActionSheetPicker.framework。

    ProjectSetting

  7. 隨便新增一個 Objective-C 檔案到專案裡面，然後 Xcode 會詢問是不是要新增 Objective-C Bridge Header，請按「是」。

    ProjectSetting

    ProjectSetting

  8. 在「專案名稱-Bridging-Header.h」裡新增下面這行：

    1
    #import "CoreActionSheetPicker/CoreActionSheetPicker.h"

  9. 在目標 ViewController 裡面新增 Reference Outlet 變數和資料容器，然後將 Reference Outlet 元件建立連結。

    1
    2
    3
    4
    5
    6
    7
    8
    class ViewController: UIViewController {
            //UITextField 的 Reference Outlet 變數
            @IBOutlet weak var textField: UITextField!
            //下拉選單的內容
            private var dataArray: NSArray!;
            。。。。。
    }

  10. 在 ViewController 的 viewDidLoad() 裡將改造 UITextField 改造成下拉選單。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    override func viewDidLoad() {
            。。。。。
            //指定下拉符號圖片
            var img = UIImage(named: "dwn")
            self.textField.rightView = UIImageView(image: img)
            //設定圖片填滿右視圖
            self.textField.rightView!.contentMode = UIViewContentMode.ScaleAspectFit
            self.textField.rightView!.clipsToBounds = true
            //顯示下拉符號
            self.textField.rightViewMode = UITextFieldViewMode.Always
            //建立委托
            self.textField.delegate = self
            //設定使用者點擊事件
            self.textField.addTarget(self, action: "selectClicked:", forControlEvents: UIControlEvents.TouchDown);
            。。。。
    }

  11. 最後建立使用者與 UITextField 的互動事件，以及設定 ActionSheetPicker。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    class ViewController: UIViewController, UITextFieldDelegate {
            。。。。。
            //設定 textField 唯讀
            func textFieldShouldBeginEditing(textField: UITextField) -> Bool {
                  return false
            }
            //不讓使用者透過建盤輸入文字
            func textField(textField: UITextField, shouldChangedCharactersInRange range: NSRange, replacementString string: String) {
                  return false
            }
            //使用者點擊事件
            func selectClicked(sender: UITextField) {
                  ActionSheetStringPicker.showPickerWithTitle(nil, rows: self.dataArray, initialSelection: 0, doneBlock: {
                      picker, value, index in
                      self.textField.text = value
                      return
                  }, cancelBlock: { 
                      ActionStringCancelBlock in
                      return
                  }, origin: sender.superview)
            }
    }