Swift: Add, Edit, Delete — part3

App features

part1:

• add, edit, delete content → to record items in document directory or UserDefaults
• https://medium.com/@jieru04/swift-add-edit-delete-part1-651f6a50499e

part2:

• choose photo with photo album/ take picture with camera → UIImagePickerController
• https://medium.com/@jieru04/swift-add-edit-delete-part2-d63b7fcc4cc0

part3:

• choose a store and comment → UIPickerView
• pick date
• dismiss keyboard

UIPickerView

There are two place that I use UIPickerView : Store and Comment.

And also create a tool bar aboveUIPickerView that have Done button and cancel button on it.

class EditTableViewController: UITableViewController, UITextFieldDelegate {

      var pkvStore:UIPickerView!
      var pkvComment:UIPickerView!
    
      let storeArray = ["","7-11","Family","Hi-Life","OK"]
      let commentArray = ["","🤩","😐","😥","🤔"]

      @IBOutlet weak var storeTextField: UITextField!
      @IBOutlet weak var commentTextField: UITextField!

      override func viewDidLoad() {
            super.viewDidLoad()

            //顯示建立的滾輪
            createPickerView()
      }

      //建立的滾輪
      func createPickerView(){
        
         //滾輪上done,cancel按鈕設計另外寫在TextField檔案裡的setKeyboardButton()
        
        //選擇店家滾輪
        pkvStore = UIPickerView()
        pkvStore.delegate = self
        pkvStore.dataSource = self
        pkvStore.tag = 1 //此處的tag編碼與store在storyboard的textField的tag編碼相同
        //將輸入store欄位的鍵盤替換為滾輪 //inputView 是 text filed 輸入時從下方冒出的輸入區塊
        storeTextField.inputView = pkvStore  
        //滾輪上方加上done,cancel按鈕     
        storeTextField.setKeyboardButton()
        
        
        //選擇評論滾輪
        pkvComment = UIPickerView()
        pkvComment.delegate = self
        pkvComment.dataSource = self
        pkvComment.tag = 4
        commentTextField.inputView = pkvComment //鍵盤替換為滾輪
        commentTextField.setKeyboardButton() //滾輪上方加上done,cancel按鈕
        
    }
}

tag is instance property and it can use to identify objects in the application by setting a value.

Apple Developer Documentation

To extend EditTableViewController functionality that conform UIPickerViewDelegate and UIPickerViewDataSource protocol.

extension EditTableViewController:UIPickerViewDelegate,UIPickerViewDataSource{
    //有幾個滾輪
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    //一個滾輪裡有幾行(row)
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        switch pickerView.tag{
        case 1:
            return storeArray.count
        case 4:
            return commentArray.count
        default:
            return 0 //隨便給值 因為不會飽到default段
        }
        
    }
    //滾輪裡顯示陣列資料
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        switch pickerView.tag{
        case 1:
            return storeArray[row]
        case 4:
            return commentArray[row]
        default:
            return "Nothing"
        }
        
    }
    //滾輪滾動到特定位置時TextField顯示該文字
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        switch pickerView.tag{
        case 1:
            storeTextField.text = storeArray[row]
        case 4:
            commentTextField.text = commentArray[row]
        default:
            break
        }
        
    }
 
}

Tool bar:

• to extend UITextField functionality.
• EditTableViewController have to conform UITextFieldDelegete protocol.

import Foundation
import UIKit

extension UITextField{
    func setKeyboardButton(){
        //設計滾輪
        //初始化pickerView上方的toolBar
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        toolbar.barTintColor = .systemMint
        //透明
        //toolbar.isTranslucent = true
        let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: #selector(doneButtonTap))
        let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)//彈性的拉開與cancel之間的距離
        let cancelButton = UIBarButtonItem(barButtonSystemItem: .cancel, target: nil, action: #selector(cancelButtonTap))
        //doneButton顏色
        doneButton.tintColor = .white
        //cancelButton顏色
        cancelButton.tintColor = .white
        //doneButton顯示在toolbar上
        toolbar.setItems([doneButton,spaceButton,cancelButton], animated: true)
        //inputAccessoryView 是輸入區塊上方的輔助區塊
        self.inputAccessoryView = toolbar

    }
  //按下按鈕後退選擇器
        @objc func doneButtonTap(){
            self.endEditing(true)
        }
        @objc func cancelButtonTap(){
            self.endEditing(true)
        }
}

DatePicker

to create datePicker

@IBOutlet weak var datePicker: UIDatePicker!

 override func viewDidLoad() {
        super.viewDidLoad()

        //顯示日期選擇
        createDatePicker()
}

    //建立日期選擇器
    func createDatePicker(){
        
        //選擇日期時的呈現樣式
        datePicker.datePickerMode = .date
        datePicker.preferredDatePickerStyle = .compact
        
        datePicker.locale = .autoupdatingCurrent
        //預設為今天
        datePicker.date = .now
       
    }

Keyboard

To show number of keyboard type.

@IBOutlet weak var priceTextField: UITextField!

 override func viewDidLoad() {
        super.viewDidLoad()

        //數字鍵盤及上方Tabbar
        priceTextField.keyboardType = .numberPad
        priceTextField.setKeyboardButton() // set toolbar above keyboard which can dismiss keyboard.
}

Dismiss keyboard

There are three ways to dismiss keyboard.

1. create tool bar and to set Done or Cancel button on above keyboard.
2. press “return” key on the keyboard.

• to create IBAction and event chooseDid End On Exit .

@IBAction func dismissItemKeyboard(_ sender: Any) {
    }

3. to tap any place on the view to resign the keyboard.

    override func viewDidLoad() {
        super.viewDidLoad()

      //點背景退鍵盤及PickerView
        dismissKeyboardFromBackground()
    }

    //點背景退鍵盤
    func dismissKeyboardFromBackground(){
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
        //tapGesture.cancelsTouchesInView = false //如果有didSelectRowAt會造成衝突，有didSelectRowAt在把cancelsTouchesInView變成false即可
        tableView.addGestureRecognizer(tapGesture)
    }

    @objc func dismissKeyboard(){
        self.tableView.endEditing(true)
    }

Reference

UIPickerView

#How to use UIPickerView in Swift

PickerView練習

Dismiss Keyboard

Dismiss the numberPad keyboard Type

UITextField 點選 return 鍵收鍵盤的方法

Swift KeyBoard 鍵盤小事情

iOS 触控事件 UITouch 和手势识别 UIGestureRecognizer