안드로이드 - 리니어레이아웃 이해하기

[안드로이드] 2.3 예제로 이해하는 layout - 2.3.1 LinearLayout

2. 예제로 안드로이드 맛보기

2.1 모든 개발의 시작... Hello world
2.2 Hello world 파헤치기

2.3 예제로 이해하는 layout

* 들어가는 말 : 오늘은 드디어 layout을 주물러 보도록 하겠습니다. 액티비티니, 통신이니, 스레드니 하는 것들은 차차 보기로 하고, 일단 눈에 보이는 것부터 해야 재미도 있고, 당장 폰에 올려 보고 신나게 해볼 수 있을테니까요... 자 그럼 시작합니다~

2.3.1 LinearLayout
UI 관련된 것은.. 그중에서도 xml이나 html처럼 화면정의 파일이 따로 있는 경우에는 더더욱, 백문(百聞)이 불여일견(不如一見)이다. 시시콜콜한 설명을 듣기 보다, 차이를 확실하게 알 수 있도록 의도적으로 작성해 놓은 예제를 보는 것만큼 효율적인 것이 없다. 그럼, 필자가 '의도적으로'작성한 아래 예제를 보자.

[그림16]

둘러보면, 가장 바깥에 LinearLayout이 있고, 그 안에 TextView, LinearLayout, TextView가 차례로 들어 있다. 여기서 알 수 있는 한가지 사실은 Layout은 얼마든지 중첩이 가능하다는 것이며, 이는 매우 유용할 것으로 보인다. 사실, 이정도도 말이 안될 것이다.
우선, LinearLayout의 속성을 살펴 보자

android:orientation="vertical" : 내부 아이템들을 리니어하게, 즉 일렬로 나열하는데, vertical이므로 세로로 나열하겠다는 뜻으로 보인다.
android:layout_width="fill_parent" android:layout_height="fill_parent" : 가로/세로 모두 바로 위 부모를 꽉 채우라는 것을 의미한다. 이 값들은 px이나 dp등의 사이즈 유닛으로 채울 수도 있으며, fill_parent의 반대 개념인 wrap_content도 가능한데, 이는 내부 아이템들을 넣을 수 있을 만큼만 차지하겠다는 것을 의미한다.
android:background="@color/bg" : 레이아웃의 배경을 의미하는데, 여기에 @color/bg 가 보이는데, 지난 챕터에서 비슷한 것을 본 것 같지 않은가? 바로, @string/hello 이다. 이것은 res/values/strings.xml에 있었다. 마찬가지로 res/values/color.xml 이다. 보는 김에 이것도 살펴보고 지나가자. 그러기 위해 만든 예제이다.

[그림17]

<color name="bg">#1191d0</color> : 이렇게, bg라는 이름으로 #1191d0 라는 컬러값이 정의되어 있는 것을 알 수 있다. 상당히 유용할 것 같다. 배경색을 지정할 때, background="#1191d0" 이렇게 해도 되지만 자주 쓰는 컬러는 왠만하면 이렇게 따로 정의해 두는 것이 나중에 색상을 바꾸기도 편하고 여러모로 좋다. 자, 이제 Layout을 전개하면서 가장 헷갈리는 부분을 설명하겠다. 이건, 결과물을 함께 보면서 이야기하자.

[그림17]

[그림17]에서 보면, 파란색 바탕이 가장 바깥에 있는 LinearLayout이고, 가운데 하얀색 부분이 내부 LinearLayout이다. 내부 LinearLayout의 속성을 살펴보자.

android:orientation="horizontal" : 앞서 보았던 것과 반대로 이번에는 horizontal이다. 즉, 가로로 전개하겠다는 뜻이다.
android:layout_weight="1" : 주목해야 할 부분이다. 바깥의 LinearLayout은 fill_parent였는데, 위아래 "1", "3"이 찍힌 TextView는 글씨가 들어갈 크기만큼 차지하고 나머지 부분은 모두 이 내부 LinearLayout이 차지한 것은, 바로 이 layout_weight="1"이 있기 때문이다. 정의하지 않으면 layout_weight="0"으로 세팅한 것과 같은데, 이는 layout_height에 지정한 크기만큼만 차지하겠다는 뜻이며, 나머지는 layout_weight 이 0이 아닌 차일드뷰끼리 나눠서 차지하게 된다. 매우 유용하므로 꼭 이해해야 한다.
android:gravity="center" : 내부 정렬을 의미한다. 차일드들을 한가운데에 몰아서 정렬하겠다는 뜻이다. left, right, top, bottom, center, center_vertical 등이 가능한데, 오른쪽 가운데 정렬을 하고 싶을 경우에는 "right|center_vertical"과 같이 "|" 연산자로 중첩시켜야 한다.

이제, 내부 레이아웃의 차일드인 2-1, 2-2, 2-3의 주요 속성들을 살펴보자.
먼저, 2-1, 2-2, 2-3 모두 android:layout_weight="1" 속성을 가지고 있으므로, 가로 길이는 정확히 3등분이 됨을 알 수 있다.

2-1의 android:layout_gravity="left|bottom" : 텍스트뷰 2-1의 가로는 3등분하였지만, 세로는 wrap_content로, 자기 자신의 텍스트를 표시할 수 있을 정도의 크기만 차지하는데, 이는 부모의 크기에 비해 많이 남는다. 이럴 때 layout_gravity속성을 사용한다. 그렇다면 무조건 top-left에 표시되게 된다. 여기서는 left|bottom 이므로 왼쪽 아래에 정렬되는데, 사실 가로는 셋이서 3등분하여 차지하였기 때문에 그냥 bottom 으로 설정한 것과 같은 결과를 보인다.
2-2의 gravity="center" : 2-2는 세로도 fill_parent이므로, layout_gravity는 의미가 없으며, 내부의 텍스트에 대해여 gravity="center"를 통하여 텍스트를 가운데에 정렬시켰다. 가로, 세로 크기가 표시할 텍스트에 비해 공간이 많이 남는다. 이럴 때 어디에 정렬시킬지 gravity를 사용하여 정의한다.
2-3의 layout_gravity="center", gravity="right" : 내부 글자는 오른쪽으로 정렬시키면서 뷰 자체는 부모의 가운데에 위치시키도록 하였다.

이와 같이 2-1, 2-2, 2-3의 xml소스와 결과 화면을 비교해 보면, gravity와 layout_gravity를 이해할 수 있을 것이다. 사실, 이게 여러겹으로 중첩이 되다 보면 상당히 헷갈리는데, 예를 들어 parent의 gravity와 child의 layout_gravity가 겹쳐지면 매우 환상적인(@.@) 헷갈리는 결과를 볼 수 있다. 따라서, 본 예제의 xml을 가지고 이렇게 저렇게 중첩시키고, 변형해 보면서 완전히 이해해 둘 것을 당부한다. 내 머리를 믿고, 알 것 같다고 해서 그냥 넘어가면 꼭 실제 개발할 때, 골치아픈 날이 올 것이다. 만들 때 괴롭지 않으려면, 한 대여섯번이라도 바꿔서 결과를 보도록 하자.

2.3.1 LinearLayout 에서, LinearLayout뿐만 아니라 모든 Layout의 공통적인 부분까지 정렬에 관한 중요한 부분을 모두 알아보았다. AbsoluteLayout, FrameLayout, TableLayout 등을 알아볼 때에는 중첩되는 부분은 안다는 가정하에 기술할 것이니, 가장 기본이 되는 LinearLayout을 잘 익히기 바란다.

===================================================================================================================
자, 오늘은 여기까지.. 휴우~ 차이를 확실하게 알아볼 수 있도록 예제를 꾸며 보았습니다. 앞으로도 이런식으로 전개하여, 제가 공식 문서들만 보면서 개발할 때 힘들었던 부분들을 중점적으로 적어 보도록 하겠습니다. 안드로이드를 시작하는 분들에게 도움이 되길 바랍니다. 화이팅!!!

# by 나의엘프 | 2010/10/13 11:59 | TokTokLab(모바일개발) | 트랙백 | 덧글(15)

출처:[안드로이드] 2.3 예제로 이해하는 layout - 2.3.1 LinearLayout