Text Field 텍스트 필드 제작하기

Text Field 만들기

 

https://yerica.tistory.com/33

Figma - Auto layout / 피그마 - 오토 레이아웃

이와 같은 방법으로 텍스트 필드(text field)도 만들어보려고 한다.
'검색어를 입력하세요.' 라는 글을 작성한 뒤 오토레이어를 만들어준다.

* 텍스트 상자에 미리 적혀있는 문자를 '플레이스홀더'라고 한다. 일반적으로 플레이스 홀더는 문자나 이미지 등의 요소가 들어갈 자리에 임시로 채워 놓는 내용물을 의미한다.

프레임의 색을 흰색으로 변경후, 오토레이어의 방향을 우측으로 설정하고 검색 아이콘을 가져와 붙여준다.

프레임의 가로는 Fixed, 세로는 hug
텍스트의 가로는 fill, 세로는 fixed
검색 아이콘은 가로,세로 fixed

이렇게 설정하자 검색어의 가로 길이의 변화에 따라 아이콘의 위치가 적정히 위치 할 수 있게 되었다.

응용하여 버튼을 만들어보았다.

1. '담기 도형'과 '취소 도형' 두 개를 만든다.
2. 도형 두개를 동시 선택 후 오토레이아웃을 설정한다.
3. 도형의 가로는 fill 세로는 hug, 프레임의 가로는 fixed, 세로는 hug 로 설정한다.

프레임의 크기에 맞춰 움직이는 버튼을 만들 수 있다.