Dev : AlertViewController에서 UITextField와 UIDatePicker 사용하기

UIAlertController를 활용하면 단순히 확인, 설정, 취소만 할 수 있는 게 아니라 UIPickerView나 UIDatePicker 등을 활용하여 좀 더 풍부한 알림창을 띄울 수 있습니다.

 

 

1. xcode 파일을 생성하고 UILabel, UIButton를 추가, 해당 ViewController에 연결해줍니다.

 

class ViewController: UIViewController {
	
    // 화면에 띄울 라벨 의미
    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
	
    // Alert을 띄워줄 버튼 의미
    @IBAction func button(_ sender: UIButton) {
    }
}

 

2. AlertViewController와 DatePicker를 클래스 내에 변수로 선언해주고, ViewDidLoad()에서 초기화해줍니다.

 

class ViewController: UIViewController {
    
    // 알림과 데이트피커 선언
    var alert = UIAlertController(title: "Test", message: "날짜를 선택해주세요.", preferredStyle: .alert)
    var datePicker = UIDatePicker()
    
    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 데이트피커의 모드, 시간대, 그리고 스타일 설정
        datePicker.datePickerMode = .date
        datePicker.locale = Locale(identifier: "ko-KR")
        datePicker.preferredDatePickerStyle = .wheels
        
        // 알림에 텍스트필드를 추가, 텍스트필드의 inputView를 데이트피커로 설정
        alert.addTextField { textField in
            textField.inputView = self.datePicker
            textField.textAlignment = .center
        }
        
        // 데이트피커의 값이 변할 때마다 호출될 dateValueChanged
        datePicker.addTarget(self, action: #selector(dateValueChanged), for: .valueChanged)
        
        // 취소, 추가 버튼(ok를 누르면, ViewController에 있는 label을 현재 설정한 날짜로 바꿔줌)
        let cancel = UIAlertAction(title: "닫기", style: .cancel)
        let ok = UIAlertAction(title: "설정", style: .default, handler: { _ in self.label.text = self.alert.textFields?[0].text})
        
        // 알림에 두 버튼 추가
        alert.addAction(cancel)
        alert.addAction(ok)
    }

 

3. dateValueChanged라는 메서드가 호출될 때마다 텍스트필드의 글자를 해당 날짜(string으로 변경 후)로 갱신합니다.

 

@objc func dateValueChanged() {	
	// alert의 텍스트필드 중 첫번째 텍스트필드에 데이트피커의 날짜를 문자열로 변경 후 표현
	alert.textFields?[0].text = datePicker.date.description
}