[swift] alert 속 textField 구현하기 2 (in Code)

 

드디어 진짜 경고창을 구현하는 부분이 왔습니다.

(왜 때문에 이제 본론인지,,,)

 

 

번외편으로 UIAlertcontrol 알아보기를 했는데, 너무 글로만 설명하며 제가 봐도 이해가 안 가는 그런 넉힘,,,(넉힘 아니라 사실,,,)

 

 

이번 글은 제대로 한 번 적어보겠어요. 

 

 

---

1. 버튼 이벤트 메서드에 Alert 구현하기

 

"입력하기" 버튼을 누르면 Alert 창이 나오게 하기 위하여, 버튼 이벤트 메서드를 만든 곳에 경고창을 구현해주도록 해요.

 

 

먼저 alert라는 상수에 UIAlertController 클래스의 객체 하나를 찍어냅니다.

그리고 늘 먹던걸로,,, 아니고

경고창의 타이틀은 "입력하라우", 메시지는 "당신의 계정!", 스타일은 alert로

 

        //버튼에 이벤트 메서드 구현하기
        @objc func buttonTapped(_ sender: UIButton) {
            //alert창 찍어내기
            let alert = UIAlertController(title: "입력하라우", message: "당신의 계정!", preferredStyle: .alert)

 

 

그리고 여기서 추가해야 될 것이 바로 텍스트필드!! 

저는 아이디와 비번 두개를 입력할 2개의 텍스트 필드가 필요하겠쥬?

 

 

 

다행히(?) UIAlertController는 addTextField라는 메서드를 가지고 있어서 경고창에 추가할 수 있게 해줘요. 

 

 

 

 

configurationHandler 파라미터는 UITextField -> Void 타입의 형태를 가졌군요

이 파라미터를 클로저 형태로 전달하면서 몇 가지 설정하도록 하겠읍니다.

 

 

-아이디 필드

placeholder 속성을 이용하여 어떤 걸 입력하면 될지 사용자에게 알려주도록 해요.

저는 "ID를 입력"이라는 placeholder를 설정해 줍니다.

 

 

-비밀번호 필드

비밀번호 필드에도 placeholder와 비밀번호답게 "*"로 가려지는 속성(isSecureTextEntry)를 설정해줍니다.

        //버튼에 이벤트 메서드 구현하기
        @objc func buttonTapped(_ sender: UIButton) {
            //alert창 찍어내기
            let alert = UIAlertController(title: "입력하라우", message: "당신의 계정!", preferredStyle: .alert)
            
            //alert창 속 텍스트 필드 추가하기 1 (아이디 필드)
            alert.addTextField { (idField) in
                idField.placeholder = "ID를 입력"
            }
            
            //alert창 속 텍스트 필드 추가하기 2 (비밀번호 필드)
            alert.addTextField { (passwordField) in
                passwordField.placeholder = "비밀번호 입력"
                passwordField.isSecureTextEntry = true
            }
            
            
            //alert속 액션 구현 1 (확인 버튼)

            
            //alert속 액션 구현 2 (취소 버튼)

    }

}

 

 

2. 경고창 액션 버튼 및 텍스트 필드 값 레이블로 전달하기

경고창에는 보통 "확인"이나 "취소" 같은 버튼이 있쥬? 그걸 만들어보겠읍니다.

 

 

경고창의 버튼을 만들기 위해서는 UIAlertAction 클래스를 이용해야 해요.

 

 

확인버튼

 

 

먼저 UIAlertAction 클래스의 객체를 찍어내구요, "확인" 타이틀을 주도록 합니다.

 

 

그리고 여기서 중요한 건, 저는 "확인"을 누르면 idField와 passwordField에 입력된 값이 다시 아이디 레이블과 비밀번호 레이블에 전달되도록 해야 한다는 겁니다.

 

 

그 작업을 UIAlertAction의 핸들러에서 해주도록 할게요.

 

 

여기서 잠깐!! 우리는 텍스트필드에 값을 입력했었죠? 그 값들은 어떻게 저장될까요?

바로 배열로 저장됩니다.

그리고 저장된 배열을 사용하기 위해서는 textFields라는 속성을 사용하면 됩니다.

 

 

 

보시면 배열형태죠? 첫 번째 텍스트 필드가 0, 두 번째 텍스트 필드가 1, 이런식으로 배열을 이루게 돼요.

서브스크립트 문법으로 접근이 가능한 것도 배열이기 때문이죠.

 

 

그리고 옵셔널 UITextField 타입이기 때문에 사용하려면 옵셔널을 벗겨주어야 해요.

if let바인딩을 통해 옵셔널 값을 벗겨주도록 할게요. 

 

그리고 나서 제가 만든 레이블 (userID, userPassword)의 값으로 전달해 줍니다.

 

 

        //버튼에 이벤트 메서드 구현하기
        @objc func buttonTapped(_ sender: UIButton) {
            //alert창 찍어내기
            let alert = UIAlertController(title: "입력하라우", message: "당신의 계정!", preferredStyle: .alert)
            
            //alert창 속 텍스트 필드 추가하기 1 (아이디 필드)
            //생략
                      
            //alert창 속 텍스트 필드 추가하기 2 (비밀번호 필드)
            //생략
          
            //alert속 액션 구현 1 (확인 버튼)
            let ok = UIAlertAction(title: "확인", style: .default) { ok in
                if let firstText = alert.textFields?[0] {
                    self.userId.text = firstText.text
                    
                }
                if let secondText = alert.textFields?[1] {
                    self.userPassword.text = secondText.text
                }
                
            }

 

취소버튼

 

먼저 UIAlertAction 클래스의 객체를 찍어내구요, "취소" 타이틀을 주도록 합니다.

 

            //alert속 액션 구현 2 (취소 버튼)
            let cancel = UIAlertAction(title: "취소", style: .cancel, handler: nil)

 

취소 버튼은 간단하쥬?

 

 

3. 액션 버튼 더해주기

위에서 만든 버튼을 addAction메서드를 통해 경고창에 더해주세요.

            //alert에 각 액션 더하기
            alert.addAction(ok)
            alert.addAction(cancel)

 

4. 경고창 뷰에 나타내기

액션 버튼까지 설정한 경고창을 뷰에 나타내도록 합니다.

            //alert나타내기
            present(alert, animated: true, completion: nil)

 

 

5. 버튼 addTarget해주기

1~4번까지의 작업을 버튼 이벤트가 발생하면 실행될 함수에 정의했었죠?

이제 그 함수를 addTarget해주는 절차가 남았습니다.

잘 만들어 놓고 이 절차를 빠뜨릴 순 없어요,,,

addTarget은 ViewDidLoad에서 해주면 돼요.

        //버튼 액션 올리기
        inputButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)

 

---

전체코드도 올려볼게요.

import UIKit

class ViewController: UIViewController {

    var mainLbl = UILabel()
    
    var idLbl = UILabel()
    var passwordLbl = UILabel()
    
    var userId = UILabel()
    var userPassword = UILabel()
    
    var inputButton = UIButton()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //초기 레이블 값 설정
        mainLbl.text = "아이디와 비밀번호를 입력하세요."
        idLbl.text = "ID : "
        passwordLbl.text = "PASSWORD: "
        
        //버튼 타이틀, 배경색, 폰트크기 변경
        inputButton.setTitle("입력하기", for: .normal)
        inputButton.backgroundColor = .purple
        inputButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 25)
        
        //레이블과 버튼 뷰에 올리기
        view.addSubview(mainLbl)
        view.addSubview(idLbl)
        view.addSubview(passwordLbl)
        view.addSubview(userId)
        view.addSubview(userPassword)
        view.addSubview(inputButton)
        
        //버튼 액션 올리기
        inputButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        
        setUI()
    }
    
    //각 레이블과 버튼의 오토레이아웃 잡기
    func setUI() {
        [mainLbl, idLbl, passwordLbl, userId, userPassword].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            $0.font = UIFont.boldSystemFont(ofSize: 23) //폰트 볼드체
        }
        
        inputButton.translatesAutoresizingMaskIntoConstraints = false
        
        
        NSLayoutConstraint.activate([
            mainLbl.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            mainLbl.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            mainLbl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 300),
            
            idLbl.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            idLbl.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            idLbl.topAnchor.constraint(equalTo: mainLbl.bottomAnchor, constant: 50),
            
            
            userId.leadingAnchor.constraint(equalTo: idLbl.leadingAnchor, constant: 50),
            userId.topAnchor.constraint(equalTo: mainLbl.bottomAnchor, constant: 50),
            
            
            passwordLbl.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            passwordLbl.topAnchor.constraint(equalTo: idLbl.topAnchor, constant: 50),
            
            
            userPassword.leadingAnchor.constraint(equalTo: passwordLbl.trailingAnchor, constant: 10),
            userPassword.topAnchor.constraint(equalTo: idLbl.topAnchor, constant: 50),
            
            
            inputButton.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            inputButton.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            inputButton.topAnchor.constraint(equalTo: userPassword.topAnchor, constant: 50)
        ])
    }
        //버튼에 이벤트 메서드 구현하기
        @objc func buttonTapped(_ sender: UIButton) {
            //alert창 찍어내기
            let alert = UIAlertController(title: "입력하라우", message: "당신의 계정!", preferredStyle: .alert)
            
            //alert창 속 텍스트 필드 추가하기 1 (아이디 필드)
            alert.addTextField { (idField) in
                idField.placeholder = "ID를 입력"
            }
            
            //alert창 속 텍스트 필드 추가하기 2 (비밀번호 필드)
            alert.addTextField { (passwordField) in
                passwordField.placeholder = "비밀번호 입력"
                passwordField.isSecureTextEntry = true
            }
            
            //alert속 액션 구현 1 (확인 버튼)
            let ok = UIAlertAction(title: "확인", style: .default) { ok in
                if let firstText = alert.textFields?[0] {
                    self.userId.text = firstText.text
                    
                }
                if let secondText = alert.textFields?[1] {
                    self.userPassword.text = secondText.text
                }
                
            }
            
            //alert속 액션 구현 2 (취소 버튼)
            let cancel = UIAlertAction(title: "취소", style: .cancel, handler: nil)
            
            //alert에 각 액션 더하기
            alert.addAction(ok)
            alert.addAction(cancel)
            
            //alert나타내기
            present(alert, animated: true, completion: nil)
        
    }

}

---

더듬더듬,,,느릿느릿,,,

오늘도 글 하나를 완성했습니다.

 

혹시 틀린 게 있다면 알려주십셔!! 슨배님덜!!