[13일차] [명언 생성기 앱] AutoLayout

지난 공부는 이론 공부였다면, 오늘은 AutoLayout이라는 이름에서 짐작해볼 수 있듯, 실습 위주의 공부일 것 같다!

 

AutoLayout?

Android Studio에서 앱 개발을 진행할 때 아마 AutoLayout 기능을 사용해 보았을 것인데, 화면을 이루는 여러 View 컴포넌트들 간에 제약 조건(Constraint)를 정의해서 위치를 지정하는 것이다.

특징이라고 하면 Device에 따라 화면의 해상도가 달라서 AutoLayout을 사용하지 않고 단순히 View의 위치를 지정하면 Device에 따라 View의 위치가 달라보이는 문제가 있는데, 이것을 사용하게 되면 화면 비율이나 해상도에 맞춰서 View의 위치가 자동으로 지정되기 때문에 다중 기기 간 화면 내 View 구성을 통일할 수 있다는 장점이 있다.

 

AutoLayout 설정은 Storyboard 상에서 이루어진다.

Xcode에서 AutoLayout 설정을 한 번 해보자.

우선 지난 공부에서 생성한 ExampleProject를 열고, 좌측 상단 탐색기에서 4번째 항복인 Main.storyboard의 내용을 확인해본다.

그래서 확인해보면 이런 식으로 아이폰의 화면이 표시되는데, 바로 여기에 우리가 View를 구성하는 것이다.

이제 컴포넌트를 추가하고 해당 컴포넌트의 제약조건을 설정해보자.

우측 상단에 저 + 버튼을 눌러서 Label 컴포넌트를 추가하고,

우측 하단에 빨간 네모로 표시한 아이콘을 클릭해주면 제약조건을 설정하는 화면을 확인할 수 있다.

 

네개 방향에 대해 간격(Margin) 제약조건을 설정할 수 있는데, 이 때 Constraint to margins를 체크하면 기본 간격 값을 포함해서 Margin 값을 주게 되므로 체크를 해제하고 주도록 하자.

그러면 처음에 지정한 위치에 있던 Label 컴포넌트가 이렇게 제약조건이 설정되어서 위치가 변하게 된다.

이 때 설정한 제약조건은 우측 화면의 6번째 탭 내에서 확인해 볼 수 있다.

추가로, 우측 패널의 5번째 탭은 컴포넌트의 다양한 속성 값을 변경할 수 있다. (Label의 경우, 폰트 스타일, 크기, 색상... 등등)

 

자, 그럼 다양한 컴포넌트들을 추가해서 우리가 만들 명언 생성기 앱의 프로토타입인, 랜덤 색상 생성기의 View를 구성해보자.

UIView 컴포넌트를 추가하고, 해당 View의 Height 값을 200으로 설정하고, 색상을 Greend으로 바꾼 뒤 Top, Left, Right Margin 값을 20으로 설정하면 다음과 같은 화면을 볼 수 있다.

 

다음으로는 Button 컴포넌트를 추가하고, 방금 추가한 UIView에 대해 가운데로 정렬되게끔 만들어보자.

두 가지 방법이 있는데, 첫 번째 방법은 우측 하단에 Alignment Constraint 기능을 활용하는 것

여기서 Horizontally in Container 옵션을 켜주면 된다.

 

두 번째는 해당 컴포넌트들 사이의 관계를 직접 설정해주는 방법이다.

Button 컴포넌트를 우클릭한 채로 드래그하면 파란색 선이 뻗어나오는데, 그 선을 UIView에 연결하면 다음과 같은 옵션을 확인할 수 있다.

그럼 여기서 Center Horizontally를 선택해도 결과는 같게 된다.

가운데 정렬이 끝났으니, 마무리 작업으로 Button 컴포넌트의 Top Margin을 24로 설정하고, 내부 텍스트 값을 "색상 변경"으로 변경해보자.

 

그러면 이렇게 랜덤 색상 생성기 앱의 메인 View를 구성할 수 있다.

 

 

 

패스트캠퍼스 바로가기 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

> 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.