안드로이드 LinearLayout, 박스모델 개념과 속성 깔끔하게 정리하기

안드로이드 대표 3가지 Layout 개념

안드로이드 SDK에서는 LinearLayout 클래스를 통해서 박스모델 Layout 을 지원하고 있고, 그외에도 여러가지 다양한 클래스를 통해서 여러 종류의 Layout 도 지원하고 있습니다. 

보통 크게 아래의 대표 3가지 Layout 에 대해서 알아가면 좋은데요..
1. LinearLayout : 박스모델
2. RelativeLayout : 규칙 기반의 상대좌표 레이아웃
3. TableLayout : 격자 모델

LinearLayout

참고로 이 블로그에서 알아 볼 LinearLayout 클래스는 박스모델, 즉 위젯이나 다른 하위 컨테이너가 가로나 새로 방향으로 하나씩 차례로 정렬되는 레이아웃을 지원함.

이해하기 쉽게 유사한 내용을 예를들어 설명해보자면, 아래 2개와 비슷하다고 머릿속에 넣어두시면 될것같은데요.
하나, LinearLayout 은 Java Swing 의 FlowLayout 이나 XUL
둘, 플렉스의 vbox, hbox 

다른 Layout 클래스를 사용하지 않고 LinearLayout만으로도 플렉스나 XUL과 비슷한 형태로 쉽게 개발 가능할 수 있습니다.

여기서 한가지 우리가 생각해야 될것이 있는데요.

만약 원하는 형태의 화면을 얻으려면 어떻게 해야할까요? (아래 2가지로 생각해볼 수 있을텐데요..)
하나, box model을 어떻게 적용하고 어떻게 계층구조를 유지하는지 잘 결정해야한다. 
둘, 각 box 가 어떤 속성을 갖고 배치될지, 서로 맞대고 있는 box를 어떻게 배치할지 주의 깊게 정해야한다.

LinearLayout 관련 4가지 속성

특히 아래에서 설명드릴 5가지 값을 잘 조합해야 하는데요... (아래 5가지 꼭 머릿속에 넣어두시길!!)
1.방향(orientation)
2.채우기(fill model)
3.가중치(weight)
4.그래비티(gravity)
5.패딩(padding)

그럼 5가지에 대해서 좀 더 자세하게 알아볼께요.

1.방향(orientation)
방향 속성을 간단하게 이야기하자면, LinearLayout 클래스를 가로로 배열할지 세로로 배열할지를 의미합니다.
XML Layout 파일의 LinearLayout 엘리먼트에 android:orientation 속성을 추가하는데요...

가로로 배열은 horizontal, 세로로 배열은 vertical 로 지정하면 됩니다. 

2.채우기 (fill model)
채우기에 대해서 설명해 보자면요..
예를들어 화면을 라디오 버튼 2개를 가로로 배치했다고 가정한다면, 2개의 라디오 버튼은 각자 표시하는 텍스트에 따라 "원래" 크기를 갖고 있는데, 안드로이드 기기마다 화면 크기가 천차만별입니다.

그래서, 2개의 폭을 합한 값이 안드로이드 기기 화면의 가로 크기와 일치하지 않는 경우가 많이 생기는데요
이런 남는 가로공간을 어떻게 처리할지에 대한 정책을 채우기 속성으로 정할 수 있다고 보면되겠죠?

즉, 화면크기와 배치된 위젯 크기가 다른 경우를 대비해서 LinearLayout  내부에 배치되는 모든 위젯은 아래 속성을 지정해야됩니다. 
하나, android:layout_width  속성
둘, android:layout_height 속성

그리고, 속성값은 아래 3가지를 지정할 수 있습니다. 
가, 300px 처럼 위젯폭을 직접 지정 
나, wrap_content 값을 지정
 - 해당 위젯 내용을 모두 표시할 수 있을 만큼의 크기까지 공간을 차지하며, 필요에 따라서는 안드로이드 스스로 텍스트를 줄내림할 수 도 있습니다. 
다, fill_parent 값을 지정 
 - 상위 컨테이너의 나머지 위젯이 사용하고 남은 공간 모두를 차지하도록 배치될 수 있고요..

3.가중치 (weight)
가중치 속성은 한마디로 남은 공간 가운데 어느 비율만크의 공간을 특정 위젯에게 할당할지를 지정하는 값을 말한다. 

가중치에 대한 이해를 쉽게하기위해서 한가지 예를들어보자...
2개의 위젯이 남은 공간을 서로 나누어 사용해야 한다면 크기를 어떻게 결정할 수 있을까?
한열에 2개의 text 입력 필드가 있다고 가정하고, 다른 모든 위젯이 각자 공간을 할당받고 남은 공간을 나눠 배치해야 한다고 생각해 본다면...??

결론부터 말씀드리자면...
해당 문제의 답은 android:layout_width 속성 또는 android:layout_height 속성을 fill_parent 값으로 설정하고 android:layout_weight라는 가중치 속성을 지정하는게 유리함

그리고 2개의 위젯에 android:layout_weight 속성을 같은 값으로 지정하면 양쪽 위젯이 남은 공간을 동일한 크기로 이등분해서 배치됨.

그리고, 한쪽 위젯의 android:layout_weight 값은 1이고 다른 위젯의  android:layout_weight 값은 2라고 지정한다면, 
1이라고 지정한 위젯보다 2배의 공간을 차지하게 된다는 뜻!

4.그래비티 (gravity)
디폴트로 모든 위젯은 왼쪽상단을 기준으로 정렬된다고 보면되는데...
가로 방향으로 위젯을 배치하는 LinearLayout 을 생성하면, 기본적으로 위젯을 왼쪽부터 순서대로 배치하게된다.

이런 왼쪽으로 정렬되는 디폴트값대신에 다른 값을 지정하고 싶다면, android:layout_gravity 속성을 지정해 화면의 어느쪽으로  위젯을 정렬할지 정할 수 있음.

예를들면...위젯을 세로로 배치하는 경우를 보자..
일반적으로 left, center_horizontal, right 값을 사용해서 왼쪽, 가운데, 오른쪽으로 위젯을 정렬시킬 수 있음.

또한 위젯을 가로로 배치하는 경우에는 위젯 텍스트의 기준선(base line) 에 맞춰 정렬됨.
만약 center_vertical 값을 지정한다면, 각 위젯이 텍스트 기준선에 관계없이 가운데로 정렬되게 할 수 도 있음.

5.패딩 (padding)
패딩은 한마디로, 위젯이 들어가는 cell 관 위젯간의 공간을 말하는데요. 다른 말로 여백(margin)과 비슷한 의미라고 머릿속에 넣어두면 될것 같네요..

보통 디폴트값으로는 모든 위젯사이에 빈 공간 없이 꽉차게 붙여서 배치되는데요..
만약 위젯사이에 공간을 주려고 한다면, android:padding 속성을 사용하면 됩니다.
android:padding 속성을 사용하면, 위젯중심으로 상하좌우 4가지 방향이 모두 동일한 값으로 세팅되며, 가운데 배치됨.

서로 다른 패딩값을 지정하기 위해서는 아래와 같이 지정할 수 있습니다. 

1.android:paddingTop
2.android:paddingBottom
3.android:paddingLeft
4.android:paddingRight

오늘의 블로그는 여기까지고요..
항상 믿고 봐주셔서 감사합니다.