今回の内容
- Alert内のUITextFieldをカスタムする
- 画像のアラートの上から3つ目のTextFieldに入力した文字数によってTextFieldに"/"を追加する
コードと簡単解説
Alert内のUITextFieldをカスタムする
-
.placeholderはプレースホルダーを設定します。 -
.layer.borderWidthはTextFieldのborderの太さを設定します。(値が大きい程太くなります) -
.layer.borderColorはTextFieldのborderの色を設定します。 -
.borderStyleはborderの形を設定します。種類は.roundedRect .bezel .line .noneがあります。 -
.clearButtonModeはTextFieldの右端に表示される入力された文字を削除するボタンを表示するか設定する。種類は.always .never .unlessEditing .whileEditingがあります。
Alert
var productNameTextField:UITextField?
var janCodeTextField:UITextField?
var deadlineDayTextField:UITextField?
var tagTextField:UITextField?
let alert = UIAlertController(title: "データを追加", message:"データを追加する場合は、値を入力して下さい", preferredStyle: .alert)
alert.addTextField { (alertProductNameTextField:UITextField) in
alertProductNameTextField.placeholder = "商品名"
alertProductNameTextField.layer.borderWidth = 1.0
alertProductNameTextField.layer.borderColor = UIColor(red: 1.0, green: 0.40, blue: 0.51, alpha: 1.0).cgColor
alertProductNameTextField.borderStyle = .roundedRect
alertProductNameTextField.clearButtonMode = .always
productNameTextField = alertProductNameTextField
}
alert.addTextField { (alertJANCodeTextField:UITextField) in
alertJANCodeTextField.placeholder = "JANコード"
alertJANCodeTextField.layer.borderWidth = 1.0
alertJANCodeTextField.layer.borderColor = UIColor(red: 1.0, green: 0.40, blue: 0.51, alpha: 1.0).cgColor
alertJANCodeTextField.borderStyle = .roundedRect
alertJANCodeTextField.clearButtonMode = .always
janCodeTextField = alertJANCodeTextField
}
alert.addTextField { (alertDeadlineDayTextField:UITextField) in
alertDeadlineDayTextField.placeholder = "期限 例:2021/01/01"
alertDeadlineDayTextField.layer.borderWidth = 1.0
alertDeadlineDayTextField.layer.borderColor = UIColor(red: 1.0, green: 0.40, blue: 0.51, alpha: 1.0).cgColor
alertDeadlineDayTextField.borderStyle = .roundedRect
alertDeadlineDayTextField.clearButtonMode = .always
alertDeadlineDayTextField.addTarget(self, action: #selector(self.addSlash), for: .allEditingEvents)
deadlineDayTextField = alertDeadlineDayTextField
}
alert.addTextField { (alertTagTextField:UITextField) in
alertTagTextField.placeholder = "商品の分類 例:食品"
alertTagTextField.layer.borderWidth = 1.0
alertTagTextField.layer.borderColor = UIColor(red: 1.0, green: 0.40, blue: 0.51, alpha: 1.0).cgColor
alertTagTextField.borderStyle = .roundedRect
alertTagTextField.clearButtonMode = .always
tagTextField = alertTagTextField
}
alert.addAction(UIAlertAction(title: "キャンセル", style: .default, handler: nil))
alert.addAction(UIAlertAction(title: "追加", style: .default, handler: { _ in
//追加が押された時の処理
}))
入力した文字数によってTextFieldに"/"を追加する
-
.addTarget(self, action: #selector(self.addSlash), for: .allEditingEvents)でTextFieldに値が入力されるたびにtext.countが4文字目と7文字目の時だけ"/"を追加します。
Alert
alert.addTextField { (alertDeadlineDayTextField:UITextField) in
alertDeadlineDayTextField.placeholder = "期限 例:2021/01/01"
alertDeadlineDayTextField.layer.borderWidth = 1.0
alertDeadlineDayTextField.layer.borderColor = UIColor(red: 1.0, green: 0.40, blue: 0.51, alpha: 1.0).cgColor
alertDeadlineDayTextField.borderStyle = .roundedRect
alertDeadlineDayTextField.clearButtonMode = .always
alertDeadlineDayTextField.addTarget(self, action: #selector(self.addSlash), for: .allEditingEvents)
deadlineDayTextField = alertDeadlineDayTextField
}
- 上の画像の場合は、
2021を入力した時に"/"を追加します。（2021/になります） -
2021/08を入力した時に"/"を追加します。（2021/08/になります）
#selector(self.addSlash)
@objc func addSlash(sender:UITextField){
if sender.text?.count == 4{
sender.text = sender.text! + "/"
}else if sender.text?.count == 7{
sender.text = sender.text! + "/"
}
}
}
終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。