[swift/iOS] 회원가입 페이지 만들기(3) - Outlet, Outlet Collection, IBOutlet, IBAction, Placeholder, isHidden

전체적인 레이아웃이 잡혔으니 조금씩 디벨롭을 해보자

 

먼저 해결해 볼것은 기능1, 아이디 최소 글자 수 확인이고 영어,숫자만을 강제 사용하게 하려고 한다

일단 사용자에게 조건을 전달하기 위해서 아이디 Text Field에 Placeholder를 입력해보자

 

Text Field에 Placeholder 입력하기

Text Field의 Attributtes Inspector에서 Placeholder를 기본 값으로 "알파벳 소문자, 숫자 5-12자"로 입력해준다

화면에서 Text Field 안에 "알파벳 소문자, 숫자 5-12자"가 보이는 것을 알 수 있다

 

현재 Interface Builder안에 레이아웃을 미리 잡아놓았는데 포스팅 작성하기 전에 작업을 먼저 해버려서 그 부분이 생략되어 있다

무시하고 따라해도 상관없으며 레이아웃은 나중에 clear 한 후 이어서 포스팅 할 예정이다

 

Label 없애주기 (isHidden)

Text Field 아래 "아이디가 입력되지 않았습니다" 라는 label이 있는데, 사용자가 Text Field에 어떤 값을 입력하기 전에 해당 Label이 입력되어 있는 것이 이상한 것 같다

기본 값으로 label을 숨긴 후 아래와 같은 조건으로 Label을 보여주고자 한다

(1) edting을 시작할 때(=값이 존재하지 않을 때)는 "아이디는 필수입력 정보입니다" 

(2) 총 글자수가 5글자 미만일 때는 "아이디는 5글자 이상이어야 합니다."

(3) 총 글자수가 13자 이상일 때는 "아이디는 12글자 이하이어야 합니다."

(4) 특수문자를 빼기(-), 밑줄(_) 외에 사용할 경우 "특수문자는 빼기(-)와 밑줄(_)만 사용할 수 있습니다."

 

Label 변경 작업 외에 + 추가로 알파벳 대문자를 입력한 경우에는 lower처리해주자

 

그럼 첫번째로 Label을 숨겨주자

Attributes Inspector의 Drawing - Hidden에 체크박스를 써도 되지만, 해당 기능을 사용하면 Interface Builder상에서도 바로 사라지기 때문에 코드를 통해 isHidden 값을 true로 바꿔주자

코드를 수정하기 위해서는 에디터 코드 창을 띄워도 되고 Assistant 창을 띄워도 되는데 개인적으로는 Assistant창이 편하다

창을 띄우는 방법은 Object Library인 + 버튼 왼쪽 대각선 아래 단락표시된 버튼을 클릭한 후 "Assistant"를 클릭해준다

아니면 옆에 나와있는 것처럼 단축키 "command + option + control + return"을 사용하면 편하다

 

어시스턴트 창이 나오면 아래와 같은 코드들이 있는데 대략적인 설명을 주석으로 적어 놓았다 

import UIKit

class ViewController: UIViewController {
    // IBOutlet(인터페이스 빌더 아울렛)을 선언해주는 공간
    override func viewDidLoad() {
        super.viewDidLoad()
		// 화면이 뜨기 전에 처리를 해주는 공간
    }
	// IBAction(인터페이스 빌더 액션)을 처리해주는 공간
}

그 다음으로는 Label을 control을 누른 채 IBOutlet 선언을 해주는 공간 위로 드래그 앤 드랍해서 아울렛을 선언해준다

그 다음은 아래와 같은 창이 뜨는데 Name을 적당히 적어준다

나의 경우에는 'idTextFieldDescription'로 적어주고 연결해주었다

이 작업은 단순 선언이 아니라 코드 상에서 인스턴스와 인터페이스 상의 Text Field를 connection 해주는 작업이다

inspectors 공간 마지막의 Connections Inspector 탭을 누르고 label을 클릭하면 idTextFieldDescription - View Controller 로 이어진 것을 확인할 수 있다

 

그 다음은 화면이 뜨기 전에 처리를 해주는 공간에 아래 코드를 입력해준다

        idTextFieldDescription.isHidden = true

 

실행해보면 "아이디가 입력되지 않았습니다" 라는 label의 공간이 Interface Builder에는 남아있지만 시뮬레이터 상에서는 사라져있는 것을 확인해볼 수 있다

 

Outlet Collection을 사용해서 여러 label을 한번에 숨김처리 하기 

아이디 Text Field 입력창 아래 외에도 비밀번호, 이메일, 인증번호 박스 아래에도 모두 label이 있는데 모두 위와 같은 형식으로 숨김처리를 하면 반복 작업을 해야 한다

반복작업을 줄이기 위해서 각 Label들을 Outlet으로 각각 선언, connection 하는 것이 아니라 Outlet Collection으로 connection해서 한번에 숨김처리를 해보자

 

화면이 뜨기 전에 처리를 하는 공간을 보면 viewDidLoad 함수 내 공간이기 때문에 이후부터는 veiwDidLoad라고 지칭하겠다

일단 위에서 작성한 viewDidLoad 안의 idTextFieldDescription.isHidden = true 코드를 다시 지워준다

 

Outlet Collection을 선언 커넥션 해주는 방법은 Outlet을 선언해주는 것과 거의 같다

다시 Interface Builder안의 idTextFieldDescription를 control을 누르고 Assistant에 드래그 앤 드랍해주고

아래의 창에서 connection을 Outlet을 Outlet Collection으로 변경해주자
그리고 Name을 입력해주면 된다
나의 경우에는 defaultHiddenCollection 이라고 적어주었다

이렇게 Outlet Collection을 만들었는데, 현재의 Collection 안에는 idTextFieldDescription밖에 들어가있지 않은 상황이다

나머지 Label들도 Collection과 connect 시켜주어야 하는데

방법은 Outlet Collection을 선언하는 것과 반대의 느낌이다

코드 라인 숫자가 있는 곳의 O표시를 드래그해서 connection 하고자 하는 label에 드랍하면 된다

같은 방식으로 나머지 label들을 connection 해주자

 

그 다음은 viewDidLoad 안에 아래의 코드를 입력해준다

    override func viewDidLoad() {
        super.viewDidLoad()
        for label in defaultHiddenCollection {
            label.isHidden = true
        }
    }

 

Collection은 배열 타입으로, for 문을 사용해서 전체 label들을 모두 숨김 처리 한 것이다

숨김처리 한 결과

한결 창이 깔끔해보인다

 

Label의 Text을 변경하고 다시 나타나게 하기

이제 사용자가 위 화면에서 아이디의 Text Field를 입력하기 위해 클릭했을 때

"아이디는 필수입력 정보입니다"로 보여주게 해보자

 

idTextField를 control을 누른채 이번에는 IBAction을 처리해주는 공간에 드래그앤 드랍을 해보자

위와 같은 창이 뜨는데 Name을 입력해주고 Type을 UITextField로 바꿔주자
Event도 Editing Did Begin으로 바꿔주었다

 

Text Field에 edting을 시작하는 event가 생겼을 때 처리해주는 Action을 위해 connection을 해준 것이다

 

그럼 @IBAction func ~ 로 시작하는 메서드가 생기는데 아래와 같이 입력해보자

    @IBAction func idTextFieldTyped(_ sender: UITextField) {
        idTextFieldDescription.text = "아이디는 필수입력 정보입니다."
        idTextFieldDescription.isHidden = false
    }

Text Field에 입력이 시작됐을 때 Label의 텍스트를 "아이디는 필수입력 정보입니다."로 바꾸어주고, 다시 보여줄 수 있게되었다

결과

 

하지만 단순히 한문장의 Label을 보여주는 것이 끝이 아니기 때문에 조금 더 수정을 해야할 필요가 있다.

조건들을 다시 생각해보자 

그 다음은 글자수를 체크해야하는데 그러면 입력이 시작됐을 때 뿐만 아니라 타이핑이 변경됐을 때마다 처리를 하는 액션을 추가해주어야 한다

Text Field를 클릭하고 Connection Inspector창에 가면 Edting Did End - View Controller idTextFieldTyped 로 연결되어 있는 것을 볼 수 있다

타이핑이 변경됐을 때마다의 이벤트를 확인하기 위해서 그 바로 위에 있는

Editing changed 의 오른쪽 O를 클릭한 후 Assistant의 idTextFieldTyped 함수에 드래그 앤 드랍해보자

connection이 된 것을 확인할 수 있을 것이다

 

연결이 완료되면 코드를 조금 더 수정해보자

다음 포스팅에서는 조건에 따라 Label Text를 변경해볼 예정이다