UIKit) Alert으로 로그인 화면 구현해보기

Alert Controller & Adding Text Field

앱스토어처럼 별도의 로그인 화면도 구현되어있지만

Alert를 통해 로그인을 구현하는 창이 뜨기도 한다.

디자인을 고려할 필요가 없다면 이렇게 구현하기도 한다.

Alert에 Text Field를 추가해서 구현한다.

버튼을 클릭하면 textField가 추가된 창을 표시하고

창에서 값을 입력 후 확인버튼을 누르면 두개의 레이블에 입력한 값을 표시해보자.

두개의 Label과 Button을 각각 아웃렛 액션으로 연결해준다.

UIAlertController메서드를 사용한 인스턴스를 만들어주고

textField를 두개 추가하였다.

Text Field를 컨트롤러에 추가하려면 addTextField를 사용한다.

파라미터로 클로저를 전달하는데 클로저에는 UITextField가 파라미터로 전달된다.

다음으로 확인과 취소 액션을 구현해보자.

okAction 부분을 보면

textFields 속성을 통해 앞에서 추가한 Text Field에 접근한다.

이 곳에는 TExt Field가 추가된 순서대로 저장되어 있다.

첫번째 Text Field에 접근한 다음에 입력되어있는 값을 Label에 표시한다.

보통 배열에 접근할 때에 index를 사용하지만 first 속성으로 접근하게 되면

배열이 비어있는 경우에 오류가 발생하지 않아 조금 더 안전하다.

다음은 두번째 Text Field에 접근하는 방법을 구현한다.

첫번째 Text Field에서 first 속성을 접근한 것처럼 이번에는 마지막 배열에 접근한다.

오!! 어디서 많이 봤던 화면과 액션을 통한 Label의 변경이 잘 구현되었다.

하지만 뭔가 아쉬운게 있다.

TextField에 플레이스 홀더와 password 입력시 마스킹이 되면 조금 더 완벽해질 것 같다.

이 메서드의 전달하는 클로저에서 각각의 Text Field를 원하는 속성으로 구성 할 수 있다.

즉, 클로저에서 파라미터로 접근해서 원하는 것을 구성할 수 있게 된다.

각각의 Text Field의 Placeholder 속성과 Text Entry 속성을 설정해주면 끝난다.

---

참고 자료 - KXCoding