[Kotlin] 레이아웃(Layout) - 컨스트런트

Android Studio에서 화면 표시를 담당하는 영역이 레이아웃이며 처음 프로젝트를 생성하면 자동으로 생성되는 파일인 activity_main.xml이 바로 레이아웃 파일에 해당합니다. 참고로 Kotlin에서는 소스파일을 제외하고 모든 파일을 리소스 파일로 취급하기 때문에 파일명이 소문자로 이루어져 있습니다.

 

위 상태에서 레이아웃 파일을 디자인 모드로 바꿔서 보면 다음과 같은 화면을 볼 수 있습니다.

 

노란색 부분이 화면에 배치할 수 있는 여러가지 위젯과 위젯에 대한 속성을 지정할 수 있는 파란색 속성 창 그리고 현재 화면을 구성하기 위한 레이아웃 방식을 나타내는 붉은색의 컴포넌트 트리 창을 볼 수 있습니다.

 

우리는 이 레이아웃을 통해서 여러가지 위젯을 배치해 화면을 구성할 수 있는데 어떤 방식으로 화면을 구성하는지에 따라서 컨스트런트 레이아웃(Constraint Layout)방식과 리니어 레이아웃(Linear Layout) 그리고 프레임 레이아웃(Frame Layout)방식으로 나눌 수 있습니다.

 

이 세 가지 중 이번 편에서는 컨스트런트 레이아웃에 대해 간략히 알아보고자 합니다.

 

컨스트런트 레이아웃 방식은 Android Studio의 기본 레이아웃으로서 위젯을 컨스트런트의 설정을 통해서 구성하는 방식을 말합니다. 컨스트런트 방식에서 컴포넌트 트리 창에 있는 위젯을 선택하거나 아니면 디자인 화면에서 특정 위젯을 선택하면 위젯 좌, 우, 위, 아래에 다음과 같이 선이 나타나는 걸 볼 수 있습니다.

 

이 선을 컨스트레인트라고 하며 레이아웃이나 다른 위젯과의 연결 상태를 나타냅니다. 또한 컨스트레인트와 위젯이 만나는 지점의 동근 모양은 핸들러(붉은색)라고 하며 컨스트레인트가 다른 위젯이나 레이아웃에 연결되어 있는 상대 지점을 앵커 포인트라고 합니다.

 

여기서 핸들러는 컨스트레인트로 연결되어 있으면 내부가 가득 찬 둥근 모양을 표시하지만 그렇지 않은 경우에는 내부가 비어 있는 동근 모양을 표시하게 됩니다.

 

Android Studio의 오른쪽에 속성 창에 보면 컨스트런트 위젯이라고 하여 컨스트런트를 설정할 수 있는 설정 화면을 볼 수 있습니다. 컨스트런트 레이아웃은 바로 이 컨스트런트의 설정을 통해서 위젯의 위치나 크기를 결정하게 됩니다.

 

컨스트런트 설정을 보면 위젯을 선택할때와 동일하게 동근모양을 볼 수 있는데 이 것은 위젯에서의 핸들러와 동일한 것으로 볼 수 있습니다. 컨스트런트 설정창에서 이 동근모양을 클릭하면 위젯의 컨스트런트와의 연결여부를 설정하거나 해제할 수 있는 것이죠.

 

만약 위젯이 상, 하 또는 좌, 우로 컨스트런트가 연결되어 있으면 컨스트런트 설정창에는 아래와 같이 바이어스(Bias)라고 하는 위치 조절기(노란색)와 크기 조절기(붉은색)를 표시하게 됩니다.

 

위 화면상의 위치조절기는 현재 50이라고 표시되어 있는데 이것은 50의 비율로 위치가 잡혀있다는 것을 나타냅니다. 이 조절기를 마우스로 움직이면 비율이 조정되고 그 만큼 위젯의 위치가 바꿀 수 있습니다.

 

크기 조절기는 모양에 따라서 3가지 기능을 수행하는데 먼저 랩 컨텐트(wrap content)는 위젯의 크기를 위젯 내부의 내용에 맞추도록 합니다. 역기서 화면상의 위젯크기와 컨스트런트 설정창, 속성창을 유심히 봐주세요.

 

두번째는 픽스(fixed)로 layout_width와 layout_height에 설정된 크기값으로 위젯의 크기를 고정합니다.

 

마지막으로 매치 컨스트레인트(match constraint)는 컨스트레인트 크기에 따라 위젯의 크기를 결정하는 것을 말합니다. 이 크기값은 컨스트런트 설정창에서 직접 값을 입력해 크기를 설정하거나 아니면 직접 위젯을 직접 마우스로 움직여 설정할 수 있고

 

또한 컨스트런트 설정창에서 위젯을 나타내는 박스 상단의 오른쪽 삼각형 모양을 클릭해서 ratio를 통해 가로세로비를 조절하여 크기를 결정할 수도 있습니다.

 

만약 화면상에 여러 위젯이 존재하고 이 위젯들이 화면의 방향과 크기와는 상관없이 일정하게 비율을 유지하고 자신의 위치를 지켜야 한다면 위젯들간 체인으로 연결하는 방법을 생각해 볼 수 있습니다.

 

체인연결을 테스트해 보기 위해 우선 아래와 같이 2개의 버튼을 배치해 보겠습니다.

 

이 2개의 버튼을 모두 선택한뒤 마우스 오른쪽 버튼을 눌러 Chains -> Create Horizontal Chain을 선택합니다. 그럼 선택한 위젯은 가로로 체인을 연결하게 됩니다.

 

이렇게 해두면 이 두 위젯은 화면의 방향이나 크기에 따라 상호간 위치값을 공유해 가로위치의 비율을 계속 유지하게 됩니다. 실제 화면을 가로로 눕혀보면

 

간격을 일정하게 유지하는것을 알 수 있습니다.

 

위젯과 연결되어 있는 컨스트런트 자체는 아래 붉은 색으로 표시된 버튼을 통해서 설정할 수 있습니다. 참고로 이 버튼은 레이아웃 방식에 따라 달라질 수 있습니다.

 

상기 버튼에서 첫번째 View Options은 컨스트런트를 얼마나 표시할지 혹은 어떤 형태로 표시할지를 지정하며 두번째 Auto Connect는 위젯을 부모격에 해당하는 다른 위젯 혹은 레이아웃에 기본적으로 컨스트런트를 연결할지를 지정합니다.

 

세번째 Default Margin은 스트런트를 연결할 기본 마진값을 지정하며 네번째 Clear Constraint는 선택한 위젯 혹은 전체 모든 컨스트런트를 삭제하도록 합니다. 다섯번째 Infer Constraints는 선택한 위젯과 가까운 주변 위젯 혹은 레이아웃과 2개의 컨스트런트를 자동 연결할 수 있도록 해주며 여섯번째 Pack은 여러 위젯간 정렬이나 크기를 확장하는 기능을 수행합니다.

 

일곱전째 Align은 지정한 위젯을 정렬시키도록 하며 마지막 여덟번째 GuideLine은 여러 형태로 컨스트런트와 연결이 가능하도록 하는 임의의 가이드라인을 위젯형태로 배치하도록 합니다.

 

가로 형태의 가이드 라인