Swift — 做個選擇吧（UIPickerView）

前言：

你有選擇障礙嗎？——為選擇有障礙的人所做的 APP。

我們常常在做一個決定的時候，總是常常不知道該選擇哪個，但好像每個選項其實還都可以，因此陷入了「 選擇障礙 」。為此，我們用 PickerView 來製作一個簡單的拉霸來替我們隨機做選擇。

晚餐要怎麼做決定？

實作開始

首先我們的拉霸主體是一個 Picker View，所以我們要先建立它，之後我們需要建立兩個變數來放顯示的資料跟 Picker View 資料長度：

var pickerView:UIPickerView!
var pickerViewDataSize:Int!
var pickerViewData = [String]()

接下來我們需要讓我們的 ViewController 繼承 Picker View 的 Delegate 及 Datasource ：

繼承 UIPickerViewDataSource, UIPickerViewDelegate 。

接著我們必須實作下面方法其 Delegate：

// MARK: - Picker view delegate & functions
func numberOfComponents(in pickerView: UIPickerView) -> Int {
  return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
  // 這邊我們希望資料 row 長一點，所以不是回傳資料的數量，後面的方法會補上。
  return pickerViewDataSize
}
// 顯示內容
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
  return pickerViewData[row % pickerViewData.count]
}

實現了 Delegate 方法之後，我們就要來設置我們的 Picker View 以及設置其他所需資料：

// MARK: - Custom functions
func setUpPickerView(data:[String]) {
  // 設置顯示資料
  pickerViewData = data
  pickerView = UIPickerView()
  pickerView.dataSource = self
  pickerView.delegate = self
  pickerView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height / 3)
  pickerView.center = view.center
  view.addSubview(pickerView)
  // 這邊我們會以我們資料數量乘上 100 作為我們 PickerView 的總 row 長。     
  pickerViewDataSize = 100 * pickerViewData.count
  // 將我們的起始點設為中間
  pickerView.selectRow(pickerViewDataSize / 2, inComponent: 0, animated: false)

}

目前我們的 Picker View 以及資料長度都設定完了，接著要來設定我們的 Random Picker View 的方式，因為我們希望他看起來是無限輪播的感覺，所以每次點選開始都會從 pickerView 的一半加上當前順序開始隨機：

func randomPicker() {
  // 隨機的起始點設為 pickerView 的一半加上 pickerView 資料的順序。
  // 這邊我們把移動效果的動畫設為 false，才不會被發現 pickerView 選項被移動到中間。
  let position = self.pickerViewDataSize / 2 +   pickerView.selectedRow(inComponent: 0) % self.pickerViewData.count
  self.pickerView.selectRow(position, inComponent: 0, animated: false)
  // Start Position
  var row = self.pickerViewDataSize / 2
  // 隨機的範圍，我們希望他隨機在 pickerView 之後一半位置到 100 之間所有數值。
  let random = row + Int(arc4random() % UInt32(pickerViewDataSize / pickerViewData.count))

  Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { (timer) in
    if row < random {
      // 每次移動 row 的移動。
      row += 1
      self.pickerView.selectRow(row, inComponent: 0, animated: true)
    } else {
      // 直到
      timer.invalidate()
    }
  }
}

之後我們就可以在 viewDidLoad 創建我們的 PickerView，之後呼叫我們的 Random Picker 的方法就能執行我們的隨機選擇了：

setUpPickerView(data: ["不吃晚餐","吃垃圾食物","吃便當店","吃自助餐","隨便吃","吃滷味店"])

來看一下實際畫面吧！

用 Picker View 做一個拉霸機

附上此次 Demo 的 Github 網址：

JeremyXue77/RandomSelector