안드로이드 차일드 영역 분할 LinearLayout(가운데 늘리고 싶을때 활용) (여러해상도 응용 활용)

 

 

=================================

=================================

=================================

 

 

 

 

차일드 영역 분할

layout_weight 속성은 부모 레이아웃의 남은 영역을 얼마나 차지할 것인가를 결정하는 비율값이다. 직역하자면 차일드 뷰의 중요도를 의미하는데 이 값이 높을수록 많은 영역을 차지한다. 중요도가 0이면 자신의 고유한 크기만큼만 차지하며 중요도가 1이상이면 형제 뷰와의 비율에 따라 부모의 영역을 균등하게 배분한다. 설명만 들으면 좀 어려워 보이지만 예제를 만들어 보면 의미를 쉽게 파악할 수 있을 것이다.

 

c03_weight1.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<Button

    android:layout_width="fill_parent"

    android:layout_height="0px"

    android:layout_weight="1"

    android:text="위쪽 버튼"

    />

<EditText

    android:layout_width="fill_parent"

    android:layout_height="0px"

    android:layout_weight="3"

    android:text="가운데 에디트"

    />

<Button

    android:layout_width="fill_parent"

    android:layout_height="0px"

    android:layout_weight="1"

    android:text="아래쪽 버튼"

    />

</LinearLayout>

 

수직 리니어에 버튼, 에디트, 버튼 세 개를 배치했고 각각 중요도를 1, 3, 1로 지정했다. layout_weight 속성을 지정할 때 같은 방향의 크기는 0으로 지정해야 하며 크기가 0이므로 단위는 어떤 것을 쓰나 상관없다. 수직 리니어안의 위젯들은 중요도에 따라 높이가 자동 배분되므로 layout_height 속성은 지정하지 않는 것이 옳으며 그래서 전부 0px로 되어 있다. 수평 리니어안이라면 layout_width 속성을 0px로 설정해야 한다.

부모의 전체 높이에 대해 위쪽 버튼이 1만큼, 중앙의 에디트가 3만큼, 아래쪽의 버튼이 1만큼 자리를 차지하도록 배치하라는 뜻이다. 전체 중요도의 합이 5이므로 수직 리니어의 높이는 총 5등분되며 1:3:1의 비율로 분할된다. 그래서 아래 위의 버튼들의 높이는 같고 중앙에 있는 에디트는 버튼보다 3배의 높이를 가진다.

중요도는 어디까지나 상대적인 값이므로 비율이 중요할 뿐이지 값 자체는 중요하지 않다. 1, 3, 1이나 10, 30, 10이나 결국은 같은 비율이며 백분율로 20, 60, 20으로 지정해도 결과는 동일하다. 1, 2, 3으로 지정하면 부모의 높이를 육분할해서 각각 1:2:3의 비율로 나눠 먹기한다. 이 비율로 나눈 레이아웃은 Weight2 예제에 작성되어 있다. 두 비율의 실행 결과는 다음과 같다.

layout_weight 속성을 지정하지 않거나 0으로 지정하면 지정한 높이만큼만 차지하고 나눠 먹기에는 동참하지 않는다는 뜻이다. 중요도가 0인 차일드는 나눠 먹기에서 제외되며 나머지 뷰들끼리 남은 영역을 중요도에 따라 분할한다. 이런 특성을 잘 이용하면 화면의 각 변에 차일드를 도킹시키고 남은 중앙 영역을 특정 차일드가 가득 채울 수 있다. 다음은 전형적인 화면 분할의 예인 3단 분할이다.

 

c03_weight3.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<Button

    android:layout_width="fill_parent"

    android:layout_height="64dip"

    android:text="Tool Bar"

    android:layout_weight="0"

    />

<EditText

    android:layout_width="fill_parent"

    android:layout_height="0px"

    android:layout_weight="1"

    />

<Button

    android:layout_width="fill_parent"

    android:layout_height="64dip"

    android:text="Menu Bar"

    android:layout_weight="0"

    />

</LinearLayout>

 

상단에 툴바, 하단에 메뉴바를 배치했으며 중앙에는 에디트를 배치했다. 툴바나 메뉴바는 아직 배우지 않았으므로 만만한 버튼으로 대체해 놓았다. 툴바와 메뉴에는 layout_height에 자신의 높이를 명확히 지정했으며 layout_weight에는 0을 대입하여 지정한 높이만큼만 사용함을 명시했다. layout_weight 속성을 생략해도 효과는 같다.

툴바의 이미지는 보통 고정 크기를 가지므로 고정 높이를 주었는데 가변 높이를 가진다면 wrap_content로 지정할 수도 있다. 나머지 남은 영역은 layout_weight가 1인 에디트가 모두 차지한다. 이 경우 에디트의 중요도는 0만 아니면 어떤 값이나 효과가 동일하다. 에디트가 남은 영역을 전부 차지하므로 아래쪽의 메뉴 바는 자동으로 화면 하단에 밀착된다. 상하단에 특정한 기능을 담당하는 뷰가 도킹되어 있고 중앙은 실제 작업을 하는 뷰가 차지하는 아주 일반적인 화면 분할의 예이다.

수직 리니어로 실습해 봤는데 수평도 방향만 다를 뿐 방식은 동일하다. 수평 리니어의 경우 중요도의 비율에 따라 레이아웃의 폭이 균등하게 분할된다. layout_weight 속성을 사용하면 레이아웃 전체는 항상 가득차며 비율에 따라 차일드가 분할되므로 장비의 화면 크기와 무관하게 일관된 배치를 만들어 낸다는 이점이 있다. 

 

 

=================================

=================================

=================================