오토레이아웃 - 두번째

안녕하세요.

지난시간에 이어 오늘은 오토레이아웃에 대한 두번째 시간입니다.

그럼 편안한 마음으로 따라와 보시죠^^

먼저 프로젝트를 하나 생성합니다.

IOS Application -> Single View Application -> Next를 입력하여 진행합니다.

Product Name에 AutoLayoutExam2를 입력하고 나머지는 디폴트 설정으로 둔채 Next를 선택하여 진행합니다.

오른쪽 하단 Object Library에서 Label, Text Field, Button 컴포넌트를 각각 View에 위치시킨 후 Attributes Inspector로 가서 Label의 text는 텍스트입력으로 Button의 title은 버튼으로 입력한다.

텍스트입력 Label을 선택한 후 오토레이아웃 메뉴의 pin을 선택한 후 위쪽에 30을 주고 아이빔을 선택하고, 왼쪽도 30을 주고 아이빔을 선택합니다.

아래의 Width와 Height도 선택한 후 Add 4 Constraints를 선택한 후 적용합니다.

Text Field를 선택 한 후 오토레이아웃 메뉴에서 Pin을 선택한 후 위쪽에 48입력 후 아이빔을 선택하고, 오른쪽 128입력 후 아이빔을 선택하고 아래 Height 체크박스를 선택한 후 Add 3 Constraints를 적용합니다.

Ctrl를 누른상태에서 라벨 컴포넌트를 드래그앤드롭으로 텍스트필드 컴포넌트로 이동하면 아래와 같은 팝업이 뜨는데 그때 Horizontal Spacing을 선택하여 일정한 간격을 가지게끔 합니다.

버튼을 선택한 후 위쪽에 53을 입력하고 아이빔을 선택하고 아래의 Width, Height를 선택하고 Add 3 Constraints를 선택하여 적용합니다.

마지막으로 모든 제약조건을 적용하기 위해 오토레이아웃 메뉴의 Resolve Auto Layout issue를 선택하여 뜨는 팝업에서 Update Frames를 선택하여 모두 적용합니다. 

Command + R을 입력하여 실행시킵니다.

오늘은 여기까지 하도록 하겠습니다.

그럼 다음시간에 뵈어요.

바이바이~~~~~