lazy var 키워드 사용하면 정의와 동시에 view에 컨텐츠 추가하는 코드를 넣을 수 있다.
* 이유는?
lazy 키워드를 붙여서 프로퍼티를 선언하면 단어 뜻 그대로 다른 프로퍼티보다 지연된다. 즉, 해당 프로퍼티가 처음 사용되기 전까지는 메모리에 올라가지 않는다.
* var 와 함께 선언해야 되는 이유
그 이유는 프로퍼티가 초기화되기 전에 항상 값을 가지고 있어야 하는데 값이 없을 수도 있다. 그래서 lazy let이 아닌 lazy var로 선언해야 한다.
각 컨텐츠를 클로저 형태로 선언한다. 그리고 이메일뷰와 패스워드뷰 내부에 TextField와 Label을 추가한다.
패스워드뷰도 동일하게 추가한 다음, 로그인 버튼, 비밀번호 변경 버튼을 추가한다. 그리고 스택뷰를 선언하여 내부에 이메일뷰, 패스워드뷰, 로그인뷰를 추가한다.
이제 각 뷰들에 제약을 걸어주어야 화면에 표시되기 때문에 아래와 같이 설정한다.
emailInfoLabel.translatesAutoresizingMaskIntoConstraints = false제약을 걸어줄 때 위 코드는 반드시 추가해야 한다. 기존에 자동으로 걸려있던 제약을 제거한다는 의미이다!
emailTextField.leadingAnchor.constraint(equalTo: emailTextFieldView.leadingAnchor, constant: 8).isActive = true제약을 추가할 때는 위와 같이 .isActive = true 를 붙여, array 형태로 추가하지 않아도 되지만 코드를 간결하게 하기 위해 NSLayoutConstraint.activate([]) 를 사용한다! (제약을 걸어줄 때, trailingAnchor, bottomAnchor 는 constant를 -로 추가해야 됨)
코드를 추가하게 되면 위와 같이 표시되는데 이메일 또는 비밀번호를 입력하기 위해 클릭했을 때 '이메일주소 또는 전화번호', '비밀번호' 글씨가 TextField 상단으로 올라가는 애니메이션을 추가해보자.
이전에 배웠던 Delegate Pattern을 사용하여 textFieldDidBeginEditing, textFieldDidEndEditing 함수를 추가하고 아래와 같이 내부코드를 작성한다.
입력이 시작되었을 때, label의 폰트 크기는 작게 설정하고 view의 백그라운드 컬러를 변경해주었다. 입력이 끝났을 때는 빈 문자열일 때만 label의 폰트 크기와 백그라운드를 컬러를 기존대로 변경한다.
UIView.animate(withDuration: 0.3) {
self.stackView.layoutIfNeeded()
}위의 코드를 추가해야 애니메이션 효과가 추가된다!! 마지막으로 이메일과 비밀번호를 전부 입력했을 때 버튼 색을 변경하는 코드를 추가하자.
텍스트필드의 글자가 한글자이면서 공백이면은 return하고, guard 키워드를 사용하여 각 TextField의 text가 비어있지 않을 때 버튼색을 변경하고 클릭가능하게 변경해준다. 그러면 아래와 같이 구현이 된다!
