iOS - 下拉式選單

iOS 目前沒有提供下拉式選單的UI物件供設計者使用.

若畫面中需要有下拉式選單時, 只能客製化了.

網路上搜尋到使用TextField來模擬, 不過自己實作時會遇到無法隱藏軟體鍵盤的問題.
每次點擊時都會出現軟體鍵盤.

因此我改用Button來解決此問題.

Step 1: 拉好Button物件, 並Reference到Source Code

可將文字改成黑色, 並設計下拉式icon (image view) 在旁邊, 模擬成下拉式選單

Step 2: 建立PickerView

設定下拉式選單的內容, 在此範例使用選擇 “綠茶”, “紅茶”, “烏龍茶”

@IBAction func openMenu(sender: AnyObject) {
     showPicker()
 }

 internal func showPicker() {
     let pickerView = UIPickerView(frame:CGRectMake(0, 0, 200, 100))
     pickerView.showsSelectionIndicator = true
     pickerView.dataSource = self
     pickerView.delegate = self
}

設定選單中欄位與列的個數

extension ViewController : UIPickerViewDataSource {
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return self.dataArray.count
    }

    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }
}

設定資料內容和選擇到時該如何更新UI的函數

extension ViewController : UIPickerViewDelegate {
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return self.dataArray[row]
    }

    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        //update UI
    }
}

Step 3: 建立ToolBar

設定下拉式選單的畫面與位置

self.sortView = UIToolbar(frame:CGRectMake(menuField.frame.origin.x, menuField.frame.origin.y + menuField.frame.height, 200, 130))
 self.sortView!.barStyle = UIBarStyle.Default
self.sortView!.backgroundColor = UIColor.blackColor();

設定完成的按鈕

 let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Done, target: self, action: #selector(ViewController.doneClicked))

//Using flexibleSpace to setup the position of Done button
let flexibleSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)

self.sortView!.setItems([flexibleSpace, doneButton, flexibleSpace], animated: true)

選擇後, 將下拉式選單隱藏

func doneClicked() {
        if (nil != self.sortView) {
            self.sortView!.removeFromSuperview()
        } else {
            //nothing else
        }
    }

Step 4: 將PickerView放到下拉式選單中

//add pickerview into Pull-Down Menu
self.sortView!.addSubview(pickerView);
//show Pull-Down Menu
self.view.addSubview(self.sortView!)

執行結果

Source Code

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var menuField: UIButton!
    var sortView : UIToolbar?

    let dataArray = ["綠茶", "紅茶", "烏龍茶"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func openMenu(sender: AnyObject) {
        showPicker()
    }

    internal func showPicker() {
        //Create PickerView
        let pickerView = UIPickerView(frame:CGRectMake(0, 0, 200, 100))
        pickerView.showsSelectionIndicator = true
        pickerView.dataSource = self
        pickerView.delegate = self

        //Create Pull-Down Menu, and adjust position
        self.sortView = UIToolbar(frame:CGRectMake(menuField.frame.origin.x, menuField.frame.origin.y + menuField.frame.height, 200, 130))

        self.sortView!.barStyle = UIBarStyle.Default
        self.sortView!.backgroundColor = UIColor.blackColor();

        //Create Done Button
        let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Done, target: self, action: #selector(ViewController.doneClicked))

        //Using flexibleSpace to setup the position of Done button
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)

        self.sortView!.setItems([flexibleSpace, doneButton, flexibleSpace], animated: true)

        //add pickerview into Pull-Down Menu
        self.sortView!.addSubview(pickerView);

        //show Pull-Down Menu
        self.view.addSubview(self.sortView!)
    }

    func doneClicked() {
        if (nil != self.sortView) {
            self.sortView!.removeFromSuperview()
        } else {
            //nothing else
        }
    }
}

 

extension ViewController : UIPickerViewDataSource {
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return self.dataArray.count
    }

    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }
}

 

extension ViewController : UIPickerViewDelegate {
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return self.dataArray[row]
    }


    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        //update UI
    }
}