[UIKit] 로그인화면

❤️ 인프런 - 15개의 앱을 만들면서 근본원리부터 배우는 UIKit 을 강의를 보고 정리하였습니다

 

로그인 화면 구현

 

 

원래는 스토리보드에 오브젝트들을 하나씩 올려서 코드와 연결하여 사용했지만 

스토리보드를 사용하지 않고 코드를 짜는 방법으로 구현을 하였다

UIView 이미지 레이아웃을 설정하여 화면에 띄워보기

 

 

 

스토리보드판에서 오브젝트를 하나 생성하여 설정하는것과 동일하게

코드로 uiveiw의 객체를 하나 만들고 색깔을 설정하고 레이아웃을 코드로 하나씩 맞춘다

 

 

 

 

상하좌우 경우엔 기준을 잡고 수치를 잡아준다

그리고 반드시 .isActive = true는 필수

그리고 우측같은 경우에는 eqaulto를 휴대폰 화면 우측 기준으로 잡고 constant를 양수로 하게 되면 화면 바깥쪽으로 나가버리기 때문에 반드시 음수로 설정해야 한다

 

 

너비나 높이 레이아웃은 equalto가 사용되지 않음 

왜냐면 자기자신을 기준으로 너비와 높이를 맞추기 때문에 수치만 넣으면 된다

 

---

 

결과

 

하나의 이미지를 코드로 띄우기 위해서 설정을 여러단계를 진행해야하는것을 알 수 있었다

 

특히 서브뷰에 넣어야하는것과

그리고 레이아웃을 자동적으로 잡히기 때문에 translateAutoresizingMaskIntoConstraints를 비활성화해야하며

오토레이아웃을 코드로 하나하나 수동으로 잡아준 후 .isActive를 활성화(true)를 해야하는걸 알 수 있었다

 

UIView 모서리 둥글게 만드는 방법

//UIView 각진 네모에서 둥그런 모서리를 가진 네모를 만드는 방법
//Keyword - radius
emailTextFieldView.layer.cornerRadius = 8
emailTextFieldView.layer.masksToBounds = true

 

 

 

클로저 방식으로 선언하기

 

클로저 실행문 방식으로 코드가 훨씬 더 깔끔하세 볼 수 있다

 

 

 

 

 

 

이런식으로 이메일 / 전화번호 / 비밀번호 

버튼 등 세팅해준다

 

그리고 스택뷰를 만들어준다

 

스택뷰 1안

 

 

스택뷰 2안

 

 

 

 

 

addtarget으로 이벤트 발생시키키(얼럿창 띄우기)

 

 

 

 

 

 

 

 

 

키패트 입력 할 때 UITextField를 let으로 선언한다면?

 

 

로그인 화면에 Info(설명) 문구가 작아지게 만들기 위해 UITextFieldDelegate 델리게이트 패턴 만들기

 

 

 

 

 

커서를 올리면 변경되는것을 확인할 수 있다

 

오토레이아웃만 준거지 애니메이션 효과를 준건 아님

 

 

 

오토레이아웃을 동적으로 자연스럽게 애니메이션 부여하기

 

 

0.3초 동안 애니메이션이 일어남

 

 

자연스러운 애니메이션을 확인할 수 있음

 

 

 

텍스트 필드 둘 다 채워졌을 때 로그인 버튼 색상 변경

 

 

 

 

 

인프런 - 15개의 앱을 만들면서 근본원리부터 배우는 UIKit

 

앨런 Swift문법 마스터 스쿨 (15개의 앱을 만들면서 근본원리부터 배우는 UIKit) 강의 - 인프런