[IOS]PickerView 搭配動畫達到上滑選單效果
1.設定picker
實現pickerview的delegate和datasource
extension AddProductViewController:UIPickerViewDelegate,UIPickerViewDataSource{
//設定有幾個bar可以滾動
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
//設定bar的內容有幾項
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return list.count
}
//設定bar的內容
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return list[row]
}
//調整pickerview文字
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
var label = UILabel()
if let v = view as? UILabel { label = v }
label.font = UIFont (name: "Helvetica Neue", size: 25)
label.text = list[row]
label.textAlignment = .center
label.textColor = UIColor.white
return label
}
//設定每個選項的高度
func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
50
}
}
2.將要彈出的視圖設定為子視圖
榜定子試圖和宣告子試圖高度參數
//popoverview榜定
@IBOutlet var selectView: UIView!
//popover裡的picker榜定
@IBOutlet weak var pickerView: UIPickerView!
//設定popover出來的高度
let popoverViewHeight = CGFloat(256)
在viewWillAppear時設定並調整子試圖
override func viewWillAppear(_ animated: Bool) {
//加入子視圖(在這裡是要彈出的popoverview)
view.addSubview(selectView)
/*在所有有繼承自 UIView 的 object 中都會有一個名為 “translatesAutoresizingMaskIntoConstraints”
的 property,這 property 的用途是告訴 iOS自動建立放置位置的約束條件,而第一步是須明確告訴它不要這樣做,因此需設為false。*/
selectView.translatesAutoresizingMaskIntoConstraints = false
//設定子試圖畫面高度,一定要加.isActive = true 不然排版會沒有用
selectView.heightAnchor.constraint(equalToConstant: popoverViewHeight).isActive = true
//設定左右邊界(左邊要是-10)
selectView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
selectView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
//先設定這個畫面在螢幕bottom下方height高度位置,等等調整這個數值就可以達到由下往上滑出的效果
//設為變數等等才方便調整
let constraint = selectView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: popoverViewHeight)
//設定constraint id
constraint.identifier = "bottom"
constraint.isActive = true
//設定圓角
selectView.layer.cornerRadius = 10
super.viewWillAppear(animated)
}
3.設定方法彈出動畫
//設定彈出的方法 ture就顯示false就藏在下面
func displayPicker(_ show:Bool){
for c in view.constraints{
// 判斷id
if(c.identifier == "bottom"){
//判斷彈出
c.constant = (show) ? -10 : popoverViewHeight
break
}
}
//設定動畫
UIView.animate(withDuration: 0.5){
//立即更新佈局
self.view.layoutIfNeeded()
}
}
4.設定action叫出popoverview
//按下位置按鈕後的action
@IBAction func locationClick(_ sender: Any) {
currentButton = btnProductLocation
//清除picker舊資料
list.removeAll()
//更新picker資料
list = ["台北市","新北市","基隆市","桃園市","臺中市","臺南市","高雄市","新竹縣","苗栗縣","彰化縣","南投縣","雲林縣","嘉義縣","屏東縣","宜蘭縣","花蓮縣","臺東縣","澎湖縣","金門縣","連江縣","新竹市","嘉義市"]
//刷新pick內容
pickerView.reloadAllComponents()
//跳出popoverview
displayPicker(true)
}
5.設定popoverview裡的按鈕動作
//popover裡按下完成按鍵的action
@IBAction func doneClick(_ sender: Any) {
let title = list[pickerView.selectedRow(inComponent: 0)]
currentButton.setTitle(title, for: .normal)
//關閉pickerview
displayPicker(false)
}
//popover裡按下取消按鍵的action
@IBAction func cancelClick(_ sender: Any) {
//關閉popoverview
displayPicker(false)
}
6.實際效果
