뷰와 뷰의 크기 속성 이해하기

뷰의 속성

뷰(view)는 일반적으로 컨트롤이나 위젯으로 불리는 UI 구성요소

-> 사용자의 눈에 보이는 화면의 구성요소

이러한 뷰가 모여 뷰그룹을 이룬다.

1. 뷰와 뷰그룹의 관계

• 뷰(view)가 뷰그룹(viewGroup)을 상속하게 되면 뷰그룹(viewGroup)도 뷰(view)가 된다.

• 뷰그룹(viewGroup)은 뷰그룹(viewGroup)을 가질 수 있다.

-> 뷰그룹(viewGroup)은 뷰(view)를 담고 있을 수 있는데 담고 있는 뷰(view) 중 하나가 뷰그룹(viewGroup)일 수 있기 때문이다

2. 위젯과 레이아웃으로 구별되는 뷰

• 위젯(Widget) : 일반적인 컨트롤의 역할을 하는 것
  -> ex) Button

• 레이아웃(Layout) : 뷰그룹 중 내부에 뷰들을 포함하고 있으면서 그것들을 배치하는 역할을 함
  -> ex) LinearLayout

-> 레이아웃도 뷰를 상속받은 것이므로 레이아웃 안에 다른 레이아웃이 들어갈 수 있다.

3. 뷰의 크기 속성

• XML 레이아웃 (Code 항목)

• layout_width와 layout_height -> 뷰의 폭과 높이를 설정합니다.
  
  
  

구분	설명
wrap_content	뷰에 들어있는 내용물의 크기에 자동으로 맞춤
match_parent	뷰를 담고 있는 뷰그룹의 여유 공간을 꽉 채움
숫자로 크기 지정	숫자를 사용해 크기 지정 , 크기는 dp나 px와 같은 단위가 있어야 함

4. 버튼의 크기 속성 바꿔보기

• layout_width 속성 값에 '240dp' 입력하여 바꿔보기

-> 레이아웃을 리니어 레이아웃으로 바꾸기

• ConstraintLayout 항목을 선택 후 마우스 오른쪽 버튼을 눌러 나타난 메뉴에서 [Convert view] 메뉴 선택

• 보이는 대화상자에서 LinearLayout 선택

• 버튼을 다시 선택한 후 layout_height와 layout_width 속성을 모두 match_parent로 변경

-> 결과 (버튼이 화면을 꽉 채우게 된다)

핵심개념 💡

• 동일한 속성이라도 뷰(버튼)를 담고 있는 레이아웃이 어떤 것인지에 따라 뷰에 적용되는 방식이 달라짐

• 리니어 레이아웃은 orientation속성이 필수 속성

• 레이아웃은 화면 배치에 아주 중요한 역할을 함