Constraint Layout(제약 조건 레이아웃) #3

저번 시간에는 Constraint Layout에서 디자인 모드와 뷰를 배치하는 방법에 대해서 배웠습니다.

이번 시간에서는 배치한 뷰를 정렬하는 방법과, 또 2개 이상의 뷰들을 배치 방법. 그리고 쉽게 자동으로 제약을 주는 방법에 대해서 배우겠습니다.

1. 배치한 뷰를 가운데로 정렬해보자!

먼저 버튼 뷰를 팔레트로부터 화면에 배치를 합니다.

그리고 버튼 뷰의 왼쪽 동그라미를 왼쪽 테두리까지 끌어 제약을 만듭니다.

또 버튼 뷰의 오른쪽 동그라미를 오른쪽 테두리까지 끌어서 제약을 만들어봅니다.

왼쪽, 오른쪽에 제약을 주게되면 뷰가 가운데로 정렬된 것을 알 수가 있습니다.

<일반 제약선>

<스프링 제약선>

또한 제약선이 스프링으로 변한 것을 알 수가 있습니다. 

2. Bias란?? Bias를 사용해서 뷰의 치우침을 제어해보자!

제약선이 스프링을 변한 이후 부터 Bias기능을 사용해서 뷰가 스프링 공간내에 어느정도 치우치도록 지정할 수가 있습니다.

Bias는 속성 윈도우 창에서 확인 할 수가 있습니다.

Bias 창에 있는 스크롤을 이동해서 스프링 공간내에 치우침을 제어할 수가 있습니다.

위 사진은 Bias가 25로 설정되어 1/4, 3/4로 View가 분할한 것을 알 수가 있습니다.

물론 가로 뿐만 아니라 세로도 가운데 정렬, Bias도 사용이 가능합니다. 한번 세로도 똑같이 Bias25를 주어서 정렬해봅시다.

3. 뷰와 뷰사이를 정렬 배치하는 방법은??

우리는 여태껏 한개의 뷰를 배치하는 방법만 배웠습니다. 하지만 어떤 앱이 뷰가 1개만 있을까요? 시중에 있는 앱들은 수 많은 뷰들이 있을껍니다.

따라서 우리는 2개 이상의 뷰들을 배치, 정렬하는 방법을 알아봅시다.

먼저 화면에 2개 이상의 버튼을 배치하고자 하는 위치에 배치합시다.

왼쪽에 있는 버튼에 세로 제약과 가로제약을 줍시다.

오른쪽에 있는 버튼의 가로제약을 왼쪽에 있는 버튼에 주고 세로제약을 위쪽 테두리에 줍시다.

오른쪽과 왼쪽 버튼은 서로 제약으로 묶였습니다. 여기서 왼쪽 버튼을 가로 방향으로 끌어서 이동시키면 오른쪽 버튼의 가로방향도 같이 이동하는 것을 확인할 수가 있습니다. 

오른쪽 버튼과 왼쪽버튼을 Shift를 누른 상태로 눌러보고 정렬 선택창을 눌러서 Top Edge로 정렬을 눌러봅시다.

오른쪽 버튼이 기준이되어서 8dp(Default)아래에 왼쪽 버튼이 내려앉은 것을 확인할 수가 있습니다. 이 상태에서 오른쪽 버튼을 아래로 이동시키면 왼쪽 버튼도 같이 아래로 이동하는 것을 확인할 수가 있습니다.

이 상태는 왼쪽, 오른쪽 버튼은 세로로 정렬이 된 상태이며 정렬 버튼을 통해 하지 않고 왼쪽 버튼의 세로 제약을 오른쪽 버튼의 윗 동그라미로 끌어서 정렬을 시킬 수가 있습니다.

Constraint Layout을 통해서 2개 이상의 뷰 배치, 정렬에 대해서 배웠습니다. 이와 같은 방법으로 복잡한 어떤 레이아웃도 디자인을 할 수가 있습니다. 다음 포스팅에서는 Constraint Layout으로 뷰의 크기 및 속성을 바꾸는 방법을 알아보도록 하겠습니다.