[android] LinearLayout

LinearLayout은 차일드뷰를 일렬로 배치하는 레이아웃.

XML문서에 나타나는 순서대로 뷰가 배치된다.

단순하면서도 직관적이어 사용 빈도가 높다.

LinearLayout의 가장 중요한 속성은 orientation이다. 차일드를 일렬로 배치하는 방법은 수평, 수직 두가지가 있다.

vertical은 차일드를 위에서 아래로 수직으로 배치, horizontal은 차일드를 왼쪽에서 오른쪽으로 수평으로 배치한다.

orientation 속성을 지정하지 않은 LinearLayout의 디폴드값은 vertical이다.

vertical

horizontal

---

정렬지정

뷰의 영역이 충분히 크면 상하좌우에 넓은 여백이 생긴다. 뷰가 커진다고 해서 내용물도 같이 커지는것이 아니며,

이때 내용물을 뷰의 어느쪽에 배치할 것인지의 문제가 생긴다.

여기서 내용물의 의미는 뷰 안쪽에 배치되는 것인데 구체적으로 텍스트 뷰에서는 문자열이고 이미지 뷰에서는 그래픽 이미지이다.

내용물을 어느쪽에 배치할 것인가는 gravity 속성으로 지정한다. 즉, gravity는 내용물의 정렬방식을 통제한다고 할 수 있다.

수평, 수직 방향에 대해 각각 정렬방식을 지정 할 수 있으며 '|'연산자로 두 개의 속성을 묶어서 지정할 수도 있다.

상수	값	설명
Content_horizontal	0x01	수평으로 중앙에 배치한다.
left	0x03	컨테이너의 왼쪽에 배치한다. 크기는 바뀌지 않는다.
right	0x05	컨테이너의 오른쪽에 배치한다.
fill_horizontal	0x07	수평 방향으로 가득 채운다.
center_vertical	0x10	수직으로 중앙에 배치한다.
top	0x30	컨테이너의 하단에 배치한다.
bottom	0x50	컨테이너의 하단에 배치한다.
fill_vertical	0x70	수직 방향으로 가득 채운다.
center	0x11	수평으로나 수직으로 중앙에 배치한다.
fill	0x77	컨테이너에 가득 채우도록 수직, 수평 크기를 확장한다.

예제 테스트

LinearLayout 안에 버튼을 만들었다. 레이아웃은 fill_parent 속성으로 폭과 높이를 주었다.

속성을 주지 않은 버튼을 만들어 보겠다.

1. <Button
2.        android:layout_width="wrap_content"
3.        android:layout_height="wrap_content"
4.        android:text="Button" />

디폴트 상태로 왼쪽 상단 정렬이 적용되며 버튼이 레이아웃의 왼쪽 위에 나타난다.

다음은 gravity속성을 "center"로 지정해 보았다.

1. <Button
2.        android:layout_width="wrap_content"
3.        android:layout_height="wrap_content"
4.        android:gravity="center"
5.        android:text="Button" />

수평, 수직이 모두 중앙정렬로 되어있음을 보여준다.

center는 center_horizontal|center_vertical과 같으며 실제로 값을 보면 그렇게 정의되어 있음을 알 수 있다.

---

베이스 정렬

baselineAlign 속성은 굉장히 이해하기 쉽다. 

높이가 다른 차일드 뷰를 수평으로 나란히 배치할 때 아래쪽 면을 가지런히 정렬할 것인가 아닌가를 지정한다.

폰트 높이가 제각각인 문자열들을 출력할 때 유용한데 디폴트가 true이므로 문자열 높이가 달라도 보기좋게 출력된다.

확인을 위해 예제를 만든다.

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.    android:layout_width="fill_parent"
4.    android:layout_height="fill_parent"
5.    android:orientation="horizontal"
6.    android:baselineAligned="true"
7.    android:background="@android:color/darker_gray"
8.    android:padding="10dip">
9.  
10.     <TextView
11.        android:id="@+id/textView1"
12.        android:layout_width="wrap_content"
13.        android:layout_height="wrap_content"
14.        android:text="TextView" />
15.  
16.     <TextView
17.        android:id="@+id/textView2"
18.        android:layout_width="wrap_content"
19.        android:layout_height="wrap_content"
20.        android:text="Large Text"
21.        android:textAppearance="?android:attr/textAppearanceLarge" />
22.  
23.     <TextView
24.        android:id="@+id/textView3"
25.        android:layout_width="wrap_content"
26.        android:layout_height="wrap_content"
27.        android:text="Medium Text"
28.        android:textAppearance="?android:attr/textAppearanceMedium" />
29.    
30. </LinearLayout>
31.  

android:baselineAligned = "true" 일 때,

텍스트가 하단에 맞춰져 정렬이 된다.

android:baselineAligned = "false" 일 때,

텍스트가 상단에 맞춰져 정렬이 된다.

글자의 베이스를 맞추는 동작은 글자들이 수평으로 나란히 있을 때만 의미가 있다.

그래서 이 속성은 수평 리니어에 적용할 때만 의미가 있으며 수직 리니어에서는 별다른 의미가 없다.

---

차일드 영역 분할

layout_weight 속성은 부모레이아웃의 영역을 얼마나 차지할 것인가를 결정하는 비율값이다.

글로 설명하는 것 보다 예제를 작성해보자.

일반적인 버튼 3개를 만들고 각각 버튼에 layout_weight 속성을 1, 3, 6 을 주었다.

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.    android:layout_width="fill_parent"
4.    android:layout_height="fill_parent"
5.    android:orientation="vertical"
6.    android:baselineAligned="true"
7.    android:padding="10dip">
8.  
9.     <Button
10.        android:id="@+id/button1"
11.        android:layout_width="fill_parent"
12.        android:layout_height="wrap_content"
13.        android:layout_weight="1"
14.        android:text="Button" />
15.  
16.     <Button
17.        android:id="@+id/button2"
18.        android:layout_width="fill_parent"
19.        android:layout_height="wrap_content"
20.        android:layout_weight="3"
21.        android:text="Button" />
22.  
23.     <Button
24.        android:id="@+id/button3"
25.        android:layout_width="fill_parent"
26.        android:layout_height="wrap_content"
27.        android:layout_weight="6"
28.        android:text="Button" />
29.    
30. </LinearLayout>

layout_weight 속성을 사용하지 않았을 시

layout_weight 속성을 위에서부터 1, 3, 6 으로 지정하였을 때

속성을 준 만큼 비율이 달라진다

1번 버튼은 1만큼의 영역을 가지고

2번 버튼은 3만큼의 영역, 3번버튼은 6만큼의 영역을 가진다.

이 비율은 1, 3, 6 이나 10, 30, 60 어느걸 사용해도 결과는 똑같다.

---

마진과 패딩

마진과 패딩은 한글 오피스나, 마이크로소프트 오피스 워드를 이용 할 시, 사용되는 여백 개념이다.

padding 속성은 뷰와 내용물간의 간격을 지정한다.

버튼의 경우 버튼 내부의 문자열과 버튼 테두리와의 간격이 패딩이며,

레이아웃의 경우 차일드뷰와의 간격이 패딩이다.

속성에 값을 대입하면 4면 모두 동일한 여백이 적용되어 한방에 여백을 지정할 수 있다.

상 하 좌 우 각각의 여백을 지정하고 싶으면

속성에 paddingLeft, paddingTop, paddingLeft, paddingRight를 이용하면 된다.

사진에서 보면 파란색이 마진, 빨간색이 패딩이다.

위의 버튼 예제에서 리니어 레이아웃의 padding이 10dip로 지정되어있는데, (이미지를 위해 여백을 줬다.)

이 10dip를 50dip로 바꿔보겠다.

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.    android:layout_width="fill_parent"
4.    android:layout_height="fill_parent"
5.    android:orientation="vertical"
6.    android:baselineAligned="true"
7.    android:padding="50dip">
8.  
9.     <Button
10.        android:id="@+id/button1"
11.        android:layout_width="fill_parent"
12.        android:layout_height="wrap_content"
13.        android:layout_weight="1"
14.        android:text="Button" />
15.  
16.     <Button
17.        android:id="@+id/button2"
18.        android:layout_width="fill_parent"
19.        android:layout_height="wrap_content"
20.        android:layout_weight="3"
21.        android:text="Button" />
22.  
23.     <Button
24.        android:id="@+id/button3"
25.        android:layout_width="fill_parent"
26.        android:layout_height="wrap_content"
27.        android:layout_weight="6"
28.        android:text="Button" />
29.    
30. </LinearLayout>

리니어 레이아웃에서 내용물 까지의 거리가 멀어진 것 을 볼 수 있다.

---

리니어 레이아웃의 기본적인 옵션과 정렬방식에 알아봤다.

제일 많이 쓰는 레이아웃이기 때문에 숙지해놓으면 좋을것이다.