[모든 팔레트 정복] 9. Layout(레이아웃) - GridLayout

안녕하세요? 닉네임 간 편입니다. 이번 시간에는 GridLayout(그리드 레이아웃)에 대해서 알아보겠습니다.

1. 정의

사각형 그리드에 자식 뷰를 위치시키는 레이아웃입니다. 행과 열로 구성된 그리드에 셀을 이용해 자식 뷰를 표시한다는 점은 TableLayout과 유사합니다.

앞서 TableLayout도 N*N개의 셀에 대해서 행과 열의 개수가 0부터 시작해 N까지 총 N+1개가 있었습니다.(N번째 셀의 경우 N번째 열과 N+1번째 열 사이에 위치합니다)

GridLayout도 인덱스가 0부터 시작해서 N까지 각각 N+1개의 행과 열을 갖고 있습니다.

2. 유용성

TableLayout과 마찬가지로 규칙적으로 뷰를 배치할 수 있습니다. 그러나 TableRow 객체를 따로 설정하지 않고 요소만 추가하면 자동으로 배치되기 때문에 편리합니다.

또한 셀을 여러 열에 걸쳐 병합할 수 있는 것은 물론이고, TableLayout과는 다르게 여러 행에 걸쳐서도 병합할 수 있습니다.

아래 그림을 통해 확인할 수 있습니다. view1은 현재 rowSpan과 columnSpan이 2로, 각각 2행과 2열을 차지하게 됩니다. 따라서 2x2 그리드를 차지하게 됩니다. 이렇게 여러 행 또는 열과 병합할 수 있는 것이 큰 장점입니다.

[activity_main]

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="5"
    android:columnCount="3"
		android:orientation="horizontal">

    <TextView
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:background="@color/moredarkgray"
        android:text="view1"
        android:textSize="35sp"
        android:gravity="center"
        android:layout_rowSpan="2"
        android:layout_columnSpan="2"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view2"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view3"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view4"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view5"
        android:textSize="35sp"
        android:gravity="center"/>
    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view6"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view7"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view8"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view9"
        android:textSize="35sp"
        android:gravity="center"/>

</GridLayout>

3. 위치 지정 방법

GridLayout은 위치를 지정하는 두 방법이 있습니다. 각 행과 열의 위치를 직접 지정하는 방법이 있고, 위치를 직접 지정하지 않은 채 자동으로 할당되는 방법이 있습니다.

1) 자동 배치

GridLayout은 orientation, rowCount, columnCount 속성을 사용하여 자식 뷰를 순서대로 배치합니다.

먼저 rowCount와 columnCount를 통해 최대 행과 열의 개수를 설정한 다음, orientation을 가로(horizontal) 또는 세로(vertical)로 하면 그 방향 순서대로 자식 뷰가 배치됩니다.

또한 순서대로 배치되다가 최대 행 또는 최대 열의 개수를 벗어나면, 그 다음 열 또는 행으로 배치됩니다.

앞서 사용된 그림을 보면 orientation은 수평(horizontal)이며, 따라서 2번째 행과 3번째 행을 보면 순서대로 뷰가 수평 방향으로 배치되었음을 확인할 수 있습니다. 그리고 최대 열의 개수가 3이기 때문에 view7은 그 아래 행에 배치됩니다.

2) 직접 지정

행과 열의 위치를 직접 지정할 수 있습니다.

그러나 GridLayout은 중복을 허용합니다. 따라서 의도한 대로 동작하지 않을 가능성이 존재합니다.

아래 그림에서 view4는 2번째 행, 0번째 열에 위치해 있습니다. 이때 view5에 동일한 행과 열 위치를 지정하면 view4 위에 view5가 중첩되며, 이때 view5 이후에 추가된 모든 뷰들이 view5가 이동함에 따라 한 칸씩 당겨지게 됩니다.

[activity_main] - 두 번째 그림

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="5"
    android:columnCount="3"
    android:orientation="horizontal">

    <TextView
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:background="@color/moredarkgray"
        android:text="view1"
        android:textSize="35sp"
        android:gravity="center"
        android:layout_rowSpan="2"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view2"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view3"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view4"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view5"
        android:textSize="35sp"
        android:gravity="center"
        android:layout_row="2"
        android:layout_column="0"/>
    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view6"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view7"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view8"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view9"
        android:textSize="35sp"
        android:gravity="center"/>

</GridLayout>

4. 여백

GridLayout에서 여백은 Space 객체를 사용하거나, 혹은 margin 객체를 사용해서 줄 수 있습니다.

특히 useDefaultMargins 속성을 사용하면 널리 사용되는 UI 스타일 가이드에 따라 자동적으로 자식 요소들에 여백을 할당합니다. 물론 원하는 여백 설정이 있다면 이 속성을 false로 설정해야 합니다.

[activity_main]

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="5"
    android:columnCount="3"
    android:orientation="horizontal"
    android:useDefaultMargins="true">

    <TextView
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:background="@color/moredarkgray"
        android:text="view1"
        android:textSize="35sp"
        android:gravity="center"
        android:layout_rowSpan="2"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view2"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view3"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view4"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view5"
        android:textSize="35sp"
        android:gravity="center"
        android:layout_row="2"
        android:layout_column="0"/>
    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view6"
        android:textSize="35sp"
        android:gravity="center" />

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view7"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/gray"
        android:text="view8"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:background="@color/moredarkgray"
        android:text="view9"
        android:textSize="35sp"
        android:gravity="center"/>

</GridLayout>

5. 마무리

이번 시간에는 GridLayout에 대해서 알아보았습니다.

화면에 다양한 요소를 규칙적으로 배치하는 일은 생각보다 많으며, 그리드 레이아웃은 또한 테이블 레이아웃에 비해 메모리 부분에서 더 효율적이기 때문에 잘 사용됩니다. 따라서 이번 시간에 잘 정리하셨으면 좋겠습니다.