Ch 13. 뷰 배치(1) - 선형 배치

레이아웃 클래스는 뷰를 배치하는 규칙이 다양합니다. 그 중에서 선형으로 배치하는 것을 LinearLayout이라고 합니다. 

LinearLayout은 뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스입니다. orientation 속성에 horizontal 또는 vertical 값으로 방향을 지정합니다. 

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON2" />
    </LinearLayout>

 

왼쪽은 vertical인 경우, 오른쪽은 horizontal인 경우

---

layout_weight 속성 

여백을 뷰로 채우는 속성입니다. 여러가지 상황을 만들어 사용하는 방법을 알아보도록 하겠습니다. 

 

1. 뷰 여러 개로 여백 채우기

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"> <!--가로 버튼 2개 생성-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON1"
        android:layout_weight="1" /> <!--여백 채우기-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON2"
        android:layout_weight="3"/> <!--여백 채우기-->
    </LinearLayout>

 

위의 코드에서 layout_weight 속성값은 뷰가 차지하는 여백의 비율을 나타냅니다. Button1에는 1을, Button2에는 3을 선언했습니다. 이는 가로 여백을 각각 1/4만큼, 3/4만큼 나누어 차지합니다. 

 

2. 중첩된 레이아웃에서 여백 채우기

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"> 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="BUTTON1" /> 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:text="BUTTON2" /> 
    </LinearLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="BUTTON3" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON4" />
    </LinearLayout>

 

위의 코드를 실행해서 보면, BUTTON3에 설정한 layout_weight 값과 BUTTON1, 2에 설정한 값은 서로 영향을 미치지 않습니다. 이 말은, 같은 영역에 있는 뷰끼리만 여백을 나누어 차지하는 것을 알 수 있습니다. 가로 여백을 BUTTON1은 1/4만큼, BUTTON2는 3/4만큼 차지합니다. BUTTON3과 BUTTON4는 세로로 나열하고, BUTTON3에만 값을 1로 설정했으므로 세로 여백의 전체를 차지합니다. 

 

3. 여백 채우기로 뷰의 크기 설정하기 

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="BUTTON1" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="BUTTON2" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="BUTTON3" />

    </LinearLayout>

 

위의 코드는 BUTTON1, 2, 3을 세로로 나열하고, 뷰의 크기를 모두 0으로 설정했습니다. 뷰의 크기가 0이면 화면에 아무것도 나오지 않는 상태인데, 여기서 layout_weight값을 1로 설정하면 세로 여백을 3등분해서 버튼을 출력합니다. 

---

gravity, layout_gravity 속성

뷰를 정렬할 때 사용하는 속성입니다. gravity은 콘텐츠를 정렬하는 속성으로, 값은 right/bottom, center 등을 사용할 수 있습니다. 만약 값을 정하지 않는다면, 기본값은 left/top으로 정해져있습니다. layout_gravity는 뷰 자체를 정렬하는 속성으로, 값은 center_vertical, cneter_horizontal 등이 있습니다. 

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center_horizontal"
        android:background="#FF0000"
        android:gravity="right|bottom"
        android:text="Hi"
        android:textColor="#FFFFFF"
        android:textSize="50dp"
        android:textStyle="italic" />
</LinearLayout>

 

 

 

이 글은 Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린 책을 보며 공부하여 작성한 글입니다.

이지스퍼블리싱에서 출간한 'Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린'의 코드를 담고 있습니다.