[Doit 깡샘의 안드로이드 앱 프로그래밍 with 코틀린] 정리 7 - 선형으로 배치 ― LinearLayout

본 글은 [Doit 깡샘의 안드로이드 앱 프로그래밍 with 코틀린 - 이지스퍼블리싱 (2022)] 의 내용을 발췌한 것입니다.

좀더 자세한 내용은 책 혹은 인강을 통해 확인해 주세요.

 

 

 

06장에서 다루었듯이 레이아웃 클래스는 화면을 독자적으로 출력하지 않고 다른 뷰 객체를 포함하는 일종의 그릇 역할을 합니다. 안드로이드가 제공하는 레이아웃 클래스는 저마다 뷰를 배치하는 규칙이 있습니다. 지금부터 대표적인 레이아웃 클래스 5가지를 살펴보겠습니다.

LinearLayout 배치 규칙

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

 

 

<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=”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>

LinearLayout의 orientation 속성값을 vertical로 지정했으므로 버튼을 세로로 나열합니다. 만약 horizontal로 지정하면 버튼을 가로로 나열합니다.

 

LinearLayout은 방향만 설정하면 뷰를 추가한 순서대로 나열합니다. 혹시 화면에서 벗어나도 줄을 자동으로 바꾸지 않습니다. 너무 단순해서 LinearLayout으로는 복잡한 화면을 만들 수 없을 것 같습니다. 예를 들어 다음과 같은 화면을 구성해야 한다고 가정해 보겠습니다.

 

 

위 그림은 카카오톡 앱에서 채팅방 목록에 보이는 항목입니다. 이런 화면을 구성하려면 이미지 뷰 1개와 텍스트 뷰 3개, 총 4개의 뷰가 필요합니다. 그런데 만약 LinearLayout의 orien tation 속성을 horizontal값으로 지정하면 다음처럼 모든 뷰가 일렬로 표시됩니다.

 

그럼 가로세로가 중첩된 구조는 LinearLayout으로 만들 수 없을까요? 이럴 때는 LinearLayout을 중첩하면 가능합니다. 레이아웃 클래스도 뷰이므로 다른 레이아웃 클래스에 포함할 수 있습니다. 즉, 다음처럼 LinearLayout에 LinearLayout을 포함할 수 있습니다.

 

가로 방향으로 배치하는 LinearLayout에 이미지 뷰와 텍스트 뷰뿐만 아니라 세로 방향으로 배치하는 LinearLayout을 추가할 수 있습니다.

 

<LinearLayout (...생략...)
    android:orientation=”horizontal”>
    <ImageView (...생략...) />
    <LinearLayout (...생략...)
        android:orientation=”vertical”>
        <TextView (...생략...) />
        <TextView (...생략...) />
    </LinearLayout>
    <TextView (...생략...) />
</LinearLayout>

 

이처럼 LinearLayout은 특정한 방향으로 뷰를 배치하는 단순한 레이아웃이지만 레이아웃을 중첩할 때 진가를 발휘합니다. LinearLayout을 중첩하면 복잡한 화면도 만들 수 있습니다.

여백을 채우는 layout_weight 속성

화면에 뷰를 배치하다 보면 가로나 세로 방향으로 여백이 생길 수 있습니다. 이 여백을 뷰로 채울 수 있습니다.

 

 

위 그림을 보면 EditText와 Button을 가로로 나열했는데 오른쪽에 여백이 생겼습니다. 이런 여백이 생길 때는 EditText 크기를 키워서 다음처럼 화면을 구성하는 것이 더 좋아 보입니다.

 

뷰 1개로 전체 여백 채우기

이처럼 여백을 뷰로 채우려면 layout_weight 속성을 사용합니다. layout_weight 속성을 사용하면 수치를 따로 계산하지 않아도 각 뷰에 설정한 가중치로 여백을 채울 수 있어서 편리합니다. 예를 들어 다음처럼 버튼이 2개 나오는 화면을 구현했다고 가정해 봅시다.

 

<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>

버튼 2개를 가로로 출력했습니다. 버튼의 가로 크기가 wrap_content이므로 가로로 여백이 생깁니다. 이제 layout_weight 속성으로 여백을 뷰로 채워 보겠습니다.

 

<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”
        android:layout_weight=”1” />
    <Button
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”BUTTON2” />
</LinearLayout>

BUTTON1에 android:layout_weight=”1”이라고 layout_weight 속성만 추가했는데 가로 방향의 모든 여백을 BUTTON1로 채웁니다.

 

뷰 여러 개로 여백을 나누어 채우기

이번에는 BUTTON2에도 layout_weight 속성을 추가해 보겠습니다.

 

<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”
        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 속성에 지정한 숫자는 가중치를 나타냅니다. 즉, 뷰가 차지하는 여백의 비율을 의미합니다. 위의 예에서는 LinearLayout에 버튼 2개를 가로로 배치하면서 layout_weight값을 각각 1과 3으로 선언했습니다. 따라서 가로 여백을 각각 1/4만큼, 3/4만큼 나누어 차지합니다.