iOS ) alert에 TextField추가하는 법

안녕하세요 :) Zedd입니다.

오늘은 제목 그대로!! alert에 TextField를 추가하는 방법을 알아볼거에요 :)

간단해요!!!

그 전에, alert를 알아야겠죠? alert글을 읽고오세요!!

: 왕초보를 위한 Alert View사용해보기 (1/3)

: 왕초보를 위한 Alert View사용해보기 (2/3)

: 왕초보를 위한 Alert View사용해보기 (3/3)

오늘 만들 간단한 앱은 

버튼을 클릭 

-> alert가 뜬다 

-> alert안에 있는 TextField를 채움 

-> alert의 OK버튼을 누름

 -> View에 있던 label이 TextField에 썼던 Text로 바뀜.

입니다 ㅎㅎ 시작할게요!

 alert에 TextField추가하는 법

---

1. 프로젝트를 연다.

2. 버튼추가 & IBAction추가

버튼을 "누르면" alert가 나온다고 그랬죠?

그러니까 IBAction을 추가해준거에요 :)

이제 이 IBAction안에 alert를 생성하는 코드를 넣어주면 되겠네요 

3. alert생성

@IBAction func myButtonTouched(_ sender: Any) {

        let alert = UIAlertController(title: "alert", message: "textField", preferredStyle: .alert)
        let ok = UIAlertAction(title: "OK", style: .default) { (ok) in
             //code
        }
        let cancel = UIAlertAction(title: "cancel", style: .cancel) { (cancel) in
             //code
        }
        alert.addAction(cancel)
        alert.addAction(ok)
        self.present(alert, animated: true, completion: nil)
    }

자. 대략적인? alert가 완성되었습니다. 

지금 상태로 실행해보면,

이런 상태입니다. 

이제 alert도 만들어졌겠다..TextField를 추가해봅시다. 

4. alert에 TextField추가!

우리 alert라는 UIAlertController에 우리가 만들어준 cancel와 ok를 추가해주려면

alert.addAction(cancel)
alert.addAction(ok)   

이렇게 해줬죠?

TextField도 이와 비슷한데요!

Apple이 친절하게도!!

"addTextField"라는 메소드를 만들어놨네요!!

써볼까요? 

alert.addTextField (configurationHandler: )  

처음 addTextField를 추가해주면, 이런식으로 configurationHandler라는 파라미터를 받도록 추가될거에요.

일단 TextField를 진짜로 추가해주기 전에!

addTextField(configurationHandler: )라는 메소드의 정의와! 

configurationHandler라는 것은 뭔지 한번 볼게요.

먼저 addTextField 메소드의 원형은

이것입니다!  configurationHandler는 클로져를 받나봐요! 

그다음으로 정의를 볼까요?

정의 : alert에 TextField를 추가합니다.

이 메소드를 호출하면 편집 가능한 TextField가 alert에 추가됩니다. 

추가적인 TextField를 추가하려면 이 메소드를 두번이상 호출할 수 있습니다. 

TextField는 결과 alert창에 스택처럼 쌓여지게 됩니다.

preferredStyle 속성이 alert로 설정된 경우에만 텍스트 필드를 추가 할 수 있습니다.

라고 하네요! 

우리 위에서 alert라는 UIAlertController를 추가해줄 때 preferredStyle를 alert로 줬으니, 우리는 TextField를 잘 추가할 수 있겠네요.

그리고 configurationHandler라는 파라미터에 대해서 알아볼까요?

configurationHandler : alert를 표시하기(display) 전에 TextField를 구성하기 위한 블록입니다.

이 블록은 반환값이 없으며, TextField객체에 해당하는 단일 매개변수를 사용합니다. 

라고 합니다!

흠  configurationHandler대한 설명은 글로만 봐서는 잘 이해가 안되네요.

예제를 통해 같이 한번 볼까요? 

그 전에!!!

일단! 이 configurationHandler라는 파라미터를 안받아도 된답니다. 

alert.addTextField ()  

이렇게만 해도 alert에 TextField가 추가된답니다. 

실행해볼까요?

오!! TextField가 정상적으로 추가된 것을 볼 수 있습니다. 

그럼 위에서 더 추가하고싶으면 더 해도 돼~~ 라고 했죠?

한번 더 저 메소드를 호출하면,

이렇게  TextField가 두개 생긴것을 볼 수 있습니다!

그럼 이제 진짜로.. configurationHandler가 왜 있는 것이냐!

위에서 말했죠? "TextField속성을  변경합니다."라고.

이 말뜻을 예제를 통해 알아봅시다. 

자, 처음에 addTextField를 추가하고, configurationHandler의 파라미터 부분에 엔터를 치게되면,

이렇게 코드가 짠 하고 변하죠?

저 UITextField가 위에서 말한 "매개변수"에요. 

우리는 이 "매개변수"를 통해서 TextField속성을  변경해볼거에요. 

alert.addTextField { (myTextField) in
myTextField.textColor = UIColor.cyan
}

자, 위 코드는 뭐죠? 

네! TextField의 텍스트컬러를 cyan으로 만들어주는 코드네요.

한번 실행해봅시다. 

짠! 어때요 ㅎㅎㅎ

configurationHandler로 뭘 할 수 있는지 확 와닿으시죠?

또..마지막으로 하나만 더해볼까요?

 alert.addTextField { (myTextField) in
         myTextField.placeholder = "안녕하세요!!"
}

이렇게 placeholder도 추가 가능하답니다 :)

자..이제 alert에 TextField도 추가했으니, 우리 앱을 계속 만들어나가봅시다.

Label에 우리가 TextField썼던 텍스트들이 옮겨져야겠죠?

그것도 alert의 OK버튼을 누르면요 :)

그럼 OK버튼쪽에 이런 작업을 구현해줘야겠네요.

그전에 Label의 IBOutlet부터 땁시다.

5. Label추가 & IBOutlet연결

6. OK버튼 handler에 TextField의 텍스트를 Label에 옮겨주는 코드 작성

자..

let ok = UIAlertAction(title: "OK", style: .default) { (ok) in
         //code
}

자, 아까 구현한 ok라는 alertAction이에요. 

그럼 여기서 어떻게?!?!? 도대체 어떻게 TextField에 접근을 할 수 있을까요? 

self.myLabel.text = alert.textFields?[0].text

바로 이런식으로 접근을 할 수 있답니다.

alert는 우리가 아까 만들어준 UIAlertController의 인스턴스였어요.

UIAlertController의 인스턴스임에도 불구하고! textField라는 프로퍼티가 존재하네요. 

근데!! 이 textField라는 프로퍼티는 "배열"인가보네요. [0]이런식으로 접근하고 있으니까요.

[0]은 도대체 뭘 의미하는걸까요? [0]만 해주면 우리가 TextField에 쓴 텍스트들을 다 가져올 수 있을까요? 

네! 결론만 말씀드리면 다 가져올 수 있답니다.

아까 위에서 해봤죠? TextField를 2개 추가해본거요.

그럼 이제 예상가시나요?

첫번째 TextField는 [0], 두번째 TextField는 [1]...이런식입니다.

let ok = UIAlertAction(title: "OK", style: .default) { (ok) in
            self.myLabel.text = alert.textFields?[1].text
 }

첫번째꺼([0])말고 두번째([1]) TextField를 Label에 옮겨봅시다.

여기서 알 수 있는 점은, 위에서 부터 0, 1, 2...이런식으로 가는 건가봐요ㅎㅎ

자..오늘 배운 alert에 TextField추가하는 법은 어떠셨나요!

도움이 되었길 바랍니다 :) 이렇게 길게 쓸 생각 없었는데..길어졌네요 :)

긴 글 읽어주셔서 감사해요 XD 

이 글이 도움이 되었길 바라며, 안녕!!!