스토리보드로 앱화면 구성하기
오늘은 스토리보드로 화면을 꾸며 보겠습니다. 오늘 사용할것들은
- 텍스트를 보여주는 레이블 객체
- 직접 글자를 입력할 수 있는 텍스트 필드
- 이름을 전송하는 버튼
1.레이블 추가하기
아이폰 화면을 나타낼 때는 주로 레이블(label) 객체를 사용합니다.
먼저 "HELLO"라는 메시지를 출력할 레이블을 추가해 보겠습니다.
⌘command+shift+l을 눌러서 나오는 library 검색창에서 label을 입력해서 화면에 끌어다 넣어준다.
화면에 끌어다 준 후 "HELLO"라고 입력해준다음 마우스를 좌우로 움직여 레이블의 크기를 조절하여 가운데에 놔줍니다.
이때 파란색 실선이 맞춰 놓으면 정가운데 레이블이 위치합니다. 레이블 안에 글자의 정렬은 화면의 오른쪽위의 인스펙터 영역의 [Attributes inspecor]버튼을 클릭한 다음 정렬 Alignment을 가운데 맞춤으로 선택합니다.
가운데 정렬을 해주는 이유는 레이블만을 가운데로 배치하면 보기에는 레이블안의 텍스트도 가운데에 위치한것으로 보이지만 실행했을때 텍스트 위치는 가운데 정렬이 안되어 있기 때문에 정렬을 설정해줍니다.
레이블 글자 색상과 서체 변경하기
레이블을 선택한 후 오른쪽 인스펙터 영역의 색상과 폰트 사이즈를 변경할 수 있습니다.
글자 색상을 파랑, 글자 크기는 18.0으로 변경했습니다.
텍스트 필드와 버튼 추가하기
위에서 말했듯이 텍스트 필드는 사용자로부터 텍스트를 입력받을 때 사용하는 객체이고, 버튼은 사용자로부터 액션을 입력받을 때 주로 사용하는 객체라고 했습니다!
이번에는 텍스트 필드를 사용하여 이름을 입력받고, 입력 완료 버튼을 클릭하여 앱에 전달할 용도로 텍스트 필드와 버튼을 만들어 보겠습니다.
library에서 text를 입력하여 Text Field를 찾아 추가해줍니다.
마찬가지로 Button을 입력하여 Button도 추가해줍니다.
레이블,텍스트필드,버튼 모두 추가한 화면 입니다. 저는 총 3개의 레이블("HELLO",""This is yjpotato Story-Board!!","Name:")과 텍스트필드 1개, 버튼1개(Send)를 만들었습니다.
실행을 해보면 레이블과 버튼 위치가 정가운데가 아니라 중구난방으로 흩어져있을 수 있습니다. 이 문제를 고쳐보겠습니다.
레이블을 선택후 편집하단에 맨 오른쪽에 위치한것들 중 2번째에 있는 Add New Alignment Constriants을 들어가줍니다. Horizontally in Container을 체크한뒤 Add 1 Constraint를 눌러줍니다.(Y축 정렬은 하지 않을꺼라서 Vertically in Container은 체크 안합니다!)
Horizontally in Container을 체크한뒤 Add 1 Constraint를 체크 후 레이블 주변에 빨간색 표시가 나타난것을 볼 수 있습니다. 이 의미는 X position은 해결해 주었지만 Y position은 해결해주지 않았다는 뜻입니다.
그러면 다음으로는 Y position을 해결해줍니다!
위와 같이 레이블을 선택 후 편집하단에서 3번째에 위치한 Add New Constraints를 들어가줍니다. 저는 값을 80으로 설정해주었습니다. 이것은 Y좌표가 상의 뷰의 top과 label의 top 사이의 간격이 80이라는 의미입니다.
나머지 레이블과 버튼 위치도 원하는 위치에 맞게 값을 설정해주면 됩니다. 실행을 해보면 아래와 같이 설정한 모습 그대로 보입니다!
다음편에는 이어서 아웃렛 변수와 액션 함수 추가 방법에 대해 공부해보겠습니당!👩🏻💻
참고서적 [Do it!-스위프트로 아이폰 앱 만들기(개정4판)]
