[Android] Layout1 — ViewGroup

Published in

dEpayse_publication

6 min readJan 22, 2021

View & ViewGroup & Layout

우리가 휴대폰에서 어플리케이션을 실행했을 때 보이는 이미지, 버튼, 텍스트들은 View 클래스의 객체인 경우가 대부분이다. 이 View들은 어떤 규칙에 의해 화면에 배치되는데, 그 규칙을 정해주며 View들을 배치하는 곳이 Layout이라고 할 수 있다. 이번 포스트에서는 Layout과 ViewGroup에 대해서 알아보자. Fig1은 간단한 계산기를 구현한 어플리케이션에서View와 Layout을 보여준다. 여러 개의 레이아웃이 겹쳐져 있는 것이 혼란스러울 수 있지만, 우선 어떤 것이 View이고 어떤 것이 Layout인지만 보자.

안드로이드에서 제공되는 Linear Layout, Relative Layout, Frame Layout, Constraint Layout은 모두 ViewGroup의 하위 클래스이다. ViewGroup은 View의 하위 클래스이므로, 조금은 복잡해보이는 이 관계를 정리하면 Fig2와 같이 사실은 간단함을 알 수 있다. Layout은 ViewGroup이면서 View이기 때문에, 또 다른 Layout을 포함할 수 있다.

LayoutParams

ViewGroup은 중첩 클래스로 LayoutParams라는 것을 갖고 있다. Layout Parameters의 줄임말이라고 예상되는데, LayoutParams의 중요한 프로퍼티는 View의 margin과 size가 있다. LayoutParams의 프로퍼티는 View를 둘러싼 Layout에 의해 결정된다. View의 크기가 Layout과 관련 없고 오로지 View에만 관련 있을 것 같지만, 그렇지 않다는 것이다!

엄밀하게 margin은 LayoutParams의 하위클래스인 MarginLayoutParams의 프로퍼티이다. 안드로이드에서 제공되는 다양한 레이아웃들은 주로 각각 중첩클래스로 LayoutParams를 가지며, Fig3과 같이 MarginLayoutParams를 상속받는다. 다양한 LayoutParams는 레이아웃에 따라 다른 중요한 속성을 갖지만, 이번 포스트에선 레이아웃의 공통적인 프로퍼티인 margin(layout_margin)과 size(layout_width, layout_height)에서만 다룬다.

margin — layout_margin

먼저 margin에 대해 익숙하지 않은 분들을 위해 margin이 무엇인지 알아보자. margin은 padding과 같이 공부하면 더 기억에 잘 남을 것 같다. margin과 padding은 여백을 의미한다.

안드로이드에서 화면을 구성할 때 xml형식의 파일을 사용하는데, Fig4은 오른쪽에는 구성된 화면을, 왼쪽에는 화면을 구성하는 코드를 나타낸다. Fig4의 코드에서 View의 하위 클래스인 TextView 객체의 속성에 보면, layout_margin과 padding 을 찾아볼 수 있다. (margin은 이름 앞에 layout이 붙어 ‘layout_margin’으로 사용되는 것을 볼 수 있는데, 이는 margin이 Layout parameter임을 알 수 있다.) layout_margin의 값을 입력하지 않으면 기본값인 0으로 적용된다.

Fig4의 오른쪽 화면을 보면 알 수 있듯이, layout_margin은 View와 View를 둘러싼 Layout과의 간격을, padding은 View와 View를 포함하는 내용물의 간격을 나타내는 것을 알 수 있다.

size — layout_width, layout_height

뷰의 크기를 결정하는 layout_width와 layout_height는 뷰의 필수 속성이다. 이 크기는 뷰에만 종속적일 것 같지만, 레이아웃에도 종속적이다. layout_width와 layout_height의 속성이 가질 수 있는 값은 다음과 같다.

wrap_content : View의 내용물의 크기에 맞춤
match_parent : View를 둘러싼 ViewGroup의 남은 공간을 전부 차지하도록 맞춤
숫자 + 단위 : 숫자와 단위를 직접 지정해 크기를 맞춤.

‘match_parent’ 라는 값을 보아 뷰의 크기가 레이아웃에 종속적인 것을 유추할 수 있다. Fig5에서 첫 번째 뷰의 width가 match_parent이지만, 화면에 꽉 차지 않는 것은 포스트 상단에서 다룬 layout_margin값이 주어졌기 때문이다. 또, 이번 포스트에서 단위에 대해 자세히 다루지 않지만, View의 크기를 직접 지정할 때 주로 dp라는 단위를 사용함을 알아두자. 다음 Layout 포스팅에선 안드로이드에서 제공되는 레이아웃들에 대해 하나씩 알아보자.

Reference

LayoutParams part

정재곤. (2018). Do it! 안드로이드 앱 프로그래밍. 이지스퍼블리싱
[경영학도의 좌충우돌 코딩] ‘레이아웃 파라미터(Layout Parameter)’ — https://whatisthenext.tistory.com/20