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

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

1. 정의

행과 열로 자식 뷰를 위치시키는 레이아웃입니다. 마치 표에 요소를 배치하는 것과 같고, 하나의 셀에 하나의 뷰가 표시되게 됩니다. 이때 행, 열 또는 셀의 테두리 선은 표시하지 않습니다.

TableLayout에서 행의 개수는 TableRow 객체의 수이며, 각 행 중에서 가장 셀이 많은 행의 셀의 개수가 바로 TableLayout의 열의 개수가 됩니다.

2. 유용성

마치 표처럼 뷰들을 규칙적으로 위치시킬 수 있다는 장점이 있습니다. 그러나 행과 열을 표현하기 위해 다수의 뷰 그룹을 중첩해서 사용하므로 성능과 메모리 측면에서 좋지 않습니다.

3. 위치 지정 방법

TableRow 객체는 단일 행을 정의하며, 이를 이용해 요소를 배치할 수 있습니다. 각 행에는 0개 이상의 셀이 있으며, 이 셀은 다양한 뷰 객체로 구성될 수 있습니다. 셀은 비워둘 수 있으며, 여러 열과 병합될 수 있습니다(행끼리는 병합할 수 없습니다). 이로 인해 보다 자유롭게 요소를 배치할 수 있습니다.

아래 그림을 보면 TableRow 객체가 3개로 3행에 걸쳐 요소가 있는 것을 확인할 수 있습니다. 그리고 각 행 중에서 가장 셀을 많이 갖고 있는 행은 2행이고, 이때 셀의 개수가 4개이기에, TableLayout의 열의 개수는 총 4개가 됩니다.

이때 TableLayout은 LinearLayout을 상속받기 때문에 TableRow 역시 추가된 순서대로 수직방향으로 배치됩니다. 또한 하나의 TableRow 객체 내부의 요소들은 추가된 순서대로 수평방향으로 배치됩니다.

[activity_main]

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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">

    <TableRow>
        <TextView
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/moredarkgray"
            android:text="view1"
            android:textSize="35sp"
            android:gravity="center"
            android:layout_column="1"/>

        <TextView
            android:id="@+id/view2"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/gray"
            android:text="view2"
            android:textSize="35sp"
            android:gravity="center"
            android:layout_column="3"/>
    </TableRow>

    <TableRow>
        <TextView
            android:id="@+id/view4"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/moredarkgray"
            android:text="view4"
            android:textSize="35sp"
            android:gravity="center"/>

        <TextView
            android:id="@+id/view5"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/gray"
            android:text="view5"
            android:textSize="35sp"
            android:gravity="center"/>

        <TextView
            android:id="@+id/view6"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/littlegray"
            android:text="view6"
            android:textSize="35sp"
            android:gravity="center"/>
        <TextView
            android:id="@+id/view7"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/doubledarkgray"
            android:text="view7"
            android:textSize="35sp"
            android:gravity="center"/>
    </TableRow>

    <TableRow>
        <TextView
            android:id="@+id/view8"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/moredarkgray"
            android:text="view8"
            android:textSize="35sp"
            android:gravity="center"
            android:layout_span="2"/>

        <TextView
            android:id="@+id/view9"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/gray"
            android:text="view9"
            android:textSize="35sp"
            android:gravity="center"/>

        <TextView
            android:id="@+id/view0"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/littlegray"
            android:text="view0"
            android:textSize="35sp"
            android:gravity="center"/>
    </TableRow>


</TableLayout>

1번째 행을 보면 view1은 한 칸의 셀을 띄고 배치된 걸 확인할 수 있습니다. layout_column을 이용해 원하는 열에 배치될 수 있으며, 중복은 허용되지 않습니다.

그런데 이때 만일 layout_column을 1로 설정한 다음, 이후 추가될 뷰의 column을 3으로 설정했다면 2번째 열에 해당하는 공간은 비워지게 됩니다.

따라서 1번째 행의 그림대로 view1과 view2 사이에 공간이 떨어져있음을 볼 수 있습니다.

3번째 행을 보면 view8은 두 개의 열을 차지하는 것을 확인할 수 있습니다. 아까 말했듯 셀은 열과 병합이 가능하고, 이 셀에 뷰 객체가 구성되므로 뷰 역시 여러 열에 걸쳐서 배치가 가능합니다.

4. 열 확장, 축소, 제거

[activity_main]

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:stretchColumns="*">

    <TableRow>
        <TextView
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/moredarkgray"
            android:text="view1"
            android:textSize="35sp"
            android:gravity="center"
            android:layout_column="1"/>

        <TextView
            android:id="@+id/view2"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/gray"
            android:text="view2"
            android:textSize="35sp"
            android:gravity="center"
            android:layout_column="3"/>
    </TableRow>

    <TableRow>
        <TextView
            android:id="@+id/view4"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/moredarkgray"
            android:text="view4"
            android:textSize="35sp"
            android:gravity="center"/>

        <TextView
            android:id="@+id/view5"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/gray"
            android:text="view5"
            android:textSize="35sp"
            android:gravity="center"/>

        <TextView
            android:id="@+id/view6"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/littlegray"
            android:text="view6"
            android:textSize="35sp"
            android:gravity="center"/>
        <TextView
            android:id="@+id/view7"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/doubledarkgray"
            android:text="view7"
            android:textSize="35sp"
            android:gravity="center"/>
    </TableRow>

    <TableRow>
        <TextView
            android:id="@+id/view8"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/moredarkgray"
            android:text="view8"
            android:textSize="35sp"
            android:gravity="center"
            android:layout_span="2"/>

        <TextView
            android:id="@+id/view9"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/gray"
            android:text="view9"
            android:textSize="35sp"
            android:gravity="center"/>

        <TextView
            android:id="@+id/view0"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="@color/littlegray"
            android:text="view0"
            android:textSize="35sp"
            android:gravity="center"/>
    </TableRow>


</TableLayout>

1) stretchColumns

이 속성을 이용해 열의 너비를 늘릴 수 있습니다.

위의 그림은 현재 너비가 꽉 차지 않습니다. 이때 stretchColumns를 "*"로 설정하면 모든 열의 너비가 늘어나며, 이때 각 열의 너비는 전체 너비를 균등하게 분할한 것과 같습니다.

만일 특정 열의 너비만 늘리고 싶다면 속성을 "1, 3"으로 하면 됩니다. 콤마(,)로 구분된 열에 대해서만 너비를 늘리며, 이때는 전체 너비 중 남은 공간에 대해서만 균등하게 분할한 너비를 할당받습니다.

다만 여기서 조심해야 하는 건, 열의 인덱스가 0부터 시작한다는 점입니다. 따라서 위를 예시로 들자면 1,3번째 열의 너비를 늘린다면 두 번째 행의 경우 view5와 view7의 너비가 확장됩니다.

2) shrinkColumns

반대로 열을 줄일 수 있는 속성입니다. 이것도 작동방식은 위와 동일합니다. 이 속성을 사용하면 열의 너비는 부모 객체의 크기에 맞게 수축됩니다.

3) collapseColumns

특정 열을 제거할 수 있는 속성이며, 작동방식은 역시 마찬가지로 위와 동일합니다.

5. 하위 요소의 길이

TableLayout의 하위 요소는 너비 요소를 특정할 수 없으며, 너비는 항상 match_parent입니다.

그러나 높이의 경우는 기본적으로 wrap_content가 설정되지만 이를 특정할 수 있습니다. 다만, 만일 하위 요소가 TableRow일 경우 높이는 언제나 wrap_content로 설정됩니다.

6. 마무리

이번 시간에는 TableLayout에 대해서 알아보았습니다. 사실 요즘 들어서는 GridLayout이 메모리 측면에서 더 효율적이기 때문에 테이블 레이아웃보다 그리드 레이아웃을 사용할 수 있습니다. 그럼에도 테이블 레이아웃을 알아두면 좋을 것이기 때문에 잘 정리되었으면 좋겠습니다.