[Bankey - Login] 로그인 text field 만들기

Seoyoung Lee·2022년 2월 24일

Professional iOS

목록 보기
3/12
post-thumbnail

Adding a text field

  • command + 0 : 왼쪽 메뉴 가리거나 표시하는 단축키
  • option + command + 0 : 오른쪽 메뉴 가리거나 표시하는 단축키

stack view 안에 삽입하기

stack view를 사용하면 constraints의 수를 최소화할 수 있다.

LoginView의 instrinsicContentSize 제거하기

label 등은 instrinsicContentSize를 기본적으로 가지고 있다. 우리는 스택 뷰 안에 textfield들을 넣어주었고, 이들은 모두 자신의 instrinsicContentSize를 가지고 있기 때문에 우린 더이상 LoginView 안에서 instrinsicContentSize 속성을 정의할 필요가 없다. 우리의 stack view는 자신의 높이가 얼마인지 알고 있다.

divider 만들기

우리는 custom control을 만들었기 때문에 divider 역시 직접 만들어주어야 한다. divider는 UIView를 이용해서 만들 수 있다.

dividerView라는 UIView 객체를 선언하고 backgroundColor를 .secondarySystemFill 로 지정한다.

그리고 stackView 안에 넣어준 후 높이를 autolayout으로 잡아준다. NSLayoutConstraint.activate 말고도 dividerView.heightAnchor.constraint(equalToConstant: 1).isActive = true 처럼 개별적으로 오토레이아웃을 설정할 수도 있다. dividerView는 stackView 안에 들어있기 때문에 너비는 따로 설정해줄 필요가 없다.

textField 모서리 둥글게 만들기

모든 View와 UIView는 view를 가지고 있는데, 그 뒤에는 layer라고 불리는 view가 있다. 그 layer는 CALayer (Core Animation)이라고 불리며 Core Animation 프레임워크에서 속한다. Core Animation 프레임워크는 UIKit에서 볼 수 있는 모든 것들을 뒷받침하는 기본 프레임워크이다.

아무튼 우리가 알아야 할 것은 view의 뒤에는 CALayer가 있고, CALayer에서 모서리 반경, 그림자, 애니메이션 등등 여러 가지 효과들의 적용이 일어난다는 것이다.

이제 코드를 추가해보자.

layer.cornerRadius = 5
clipsToBounds = true
  • 위에서 설명한 대로 모서리 반경은 CALayer에서 적용되기 때문에 layer의 cornerRadius 값을 설정해준다.
  • clipsToBounds: subview가 view의 테두리를 기준으로 자를지를 결정하는 프로퍼티
profile
나의 내일은 파래 🐳

0개의 댓글