앨런 Swift 앱 만들기 UIKit | 로그인 화면 구현

 

안녕하세요

오늘은 제가 강의를 보며 배웠던걸 정리하고자 합니다

 

 

 

⭐️인프런에서 앨런님의 swift 앱 만들기⭐️

를 통해서 정리하였습니다

 

정말 정말 잘 설명해주기 때문에 제가 정리해놓은것 보다 보시는걸 추천드립니다

 

자료제공은 절대 불가합니다

 

---

 

로그인 화면 구현

 

 

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

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

 

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초 동안 애니메이션이 일어나는걸 볼 수 있습니다

 

 

 

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

 

 

 

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

 

 

 

 

 

만약 틀린 내용이 있다면 알려주시고

제가 정리해놓은것 보다 강의가 훨씬 자세히 알려주니 꼭 들어보세용!

 

🍎참고

앨런앱 만들기 강의 (추천)