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

안녕하세요. 이전 포스팅에서는 Constraint Layout을 이용한 뷰들의 정렬 및 배치에 대해서 알아보았습니다.

이번 포스팅에서는 Constraint Layout을 이용한 뷰의 크기를 바꾸는 방법 및 속성에 대해 간단히 바꾸는 방법을 알아봅시다.

뷰의 크기를 바꾸는 방법

뷰의 크기를 바꾸는 방법은 총 4가지가 있습니다.

1. 직접 크기를 입력하는 방법

2. 부모뷰의 남는 여백에 맞춰 크기를 조절하는 방법

3. 뷰 내용에 맞춰 크기를 조절하는 방법

4. 뷰의 비율을 조절해서 크기를 조절하는 방법.

1. 직접 크기를 입력하는 방법?

속성창에저 layout_width와 layout_height 값을 직접 숫자로 입력해서 크기를 조절할 수가 있습니다.

숫자를 입력할 때 숫자뒤에 "dp"를 붙여야 되는 것을 잊지맙시다.

2. 부모뷰의 남는 여백에 맞춰 크기를 조절하는 방법

속성창에서 layout_width와 layout_height 값을 "match_parent"로 입력합시다. 부모 뷰의 남는 여백에 꽉 맞춰서 크기를 조절할 수가 있습니다.

부모 뷰의 남는 여백을 주의할 필요가 있습니다. 한번 뷰의 마진값을 증가시킨다면 여백이 줄어들어 그만큼 뷰의 크기가 줄어듬을 알 수가 있습니다.

3. 뷰 내용에 맞춰 크기를 조절하는 방법

마찬가지로 속성창에서 layout_width와 layout_height 값을 "wrap_content"로 입력합시다. 그러면 뷰 내용에 맞춰서 크기가 자동으로 조절이 됩니다.

만약 뷰 내용이 없다면 크기가 안 보일 만큼 줄어들 수 있으니 주의 합시다.

4. 뷰의 비율을 조절해서 크기를 조절하는 방법.

뷰의 비율을 조절하기 위해선 layout_width나 layout_height 값 중의 하나를 0dp로 설정을 먼저 합니다.

위의 그림에 있는 제약을 설정하는 화면에서 빨간색 부분을 누르고, 새롭게 생긴 ratio 창에 원하는 비율을 입력합니다. 이때 기준은 layout_width나 layout_height 값중 0dp가 아닌 값을 기준으로 합니다.

5. 속성창으로 Text 속성을 바꿔보기

속성창에서 text 속성의 값을 원하는 문자열로 바꿀 수가 있습니다.

6. 속성창으로 베경색을 바꿔보기

속성창에서 Background 속성 옆에 있는 ... 을 눌러줍시다. 그리고 color 메뉴에서 파랑색을 선택하고 확인을 누릅니다. 

7. 더 많은 속성은?

더 많은 속성은 View all Property 버튼을 눌러서 확인을 할 수가 있습니다.

모든 속성을 확인하여 원하는 속성을 바꿀 수가 있습니다.

여태까지 Constraint Layout에 대해서 알아보았습니다. Constraint Layout은 복잡한 화면을 누구나 쉽게 디자인 화면을 통해서 꾸밀 수가 있습니다.  최근에는 Constraint Layout을 사용해서 많은 사람들이 액티비티를 꾸민다고 합니다. 따라서 잘 익혀두면 좋은 레이아웃 같습니다.