[Android] TableLayout(테이블 레이아웃) 사용하기

TableLayout(테이블 레이아웃)은 뷰를 격자 형태로 배치한다.
여러 개의 뷰를 동일한 크기로 배치해야할 때 유용하게 사용할 수 있다. 다른 레이아웃들이 ViewGroup을 상속받는 것과 달리, TableLayout은 LinearLayout을 상속받는 레이아웃이다.

사용 방법

격자의 가장 바깥쪽 가장자리에 해당하는 부분을 TableLayout 태그로 감싼다.
테이블에 들어가는 한 줄에 해당하는 row는 TableRow 태그로 감싼다.
TableRow 내부에 가로 방향으로 추가하고 싶은 뷰를 하나씩 추가하면 된다. 이렇게 추가된 뷰 하나 하나가 column의 역할을 한다.

아래는 버튼을 3x2 크기로 배치하는 예제 코드이다.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </TableRow>

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </TableRow>

</TableLayout>

3개의 column을 가지는 2개의 row가 생기는 것을 알 수 있다.

 

테이블 레이아웃에서 많이 사용되는 세가지 속성을 소개한다.

stretchColumns

위의 코드에서는 테이블 형태로 뷰가 배치되었지만 row에 남는 공간이 생겼다.
여유 공간이 생기지 않도록 뷰를 배치하고 싶다면 stretchColumn 속성을 사용한다.
속성 안에는 크기를 늘리고 싶은 뷰의 인덱스를 작성하면 된다. 인덱스는 가장 왼쪽부터 0으로 시작하고, columnd이 추가될 때마다 1씩 증거한다. 여러개의 인덱스를 지정하고 싶다면 , 기호로 연결한다.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="0, 1, 2">

    <TableRow>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

    </TableRow>

    <TableRow>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

    </TableRow>

</TableLayout>

stretchColumn로 지정된 0, 1, 2번째 column의 길이를 늘린다.

선택되지 않은 column은 원래 설정된 크기만큼의 자리를 차지하고, 남은 여유 공간은 모두 stretchColumn으로 지정된 column이 차지한다. 1, 2 처럼 직접 특정 column을 지정할 수도 있고, 모든 column을 지정하는 경우에는 * 기호로도 표현이 가능하다.

layout_span

layout_span을 사용하면 해당 column이 지정한 값 만큼의 공간을 차지한다.
layout_span="2"를 적용하면, 기존에 1만큼의 자리를 차지하던 뷰가 2만큼의 자리를 차지한다.

layout_column

layot_column에 인덱스 번호를 입력하면 해당 column이 지정된 인덱스의 위치로 이동한다.
즉, row 안에서 column의 위치를 직접 지정할 때 사용하는 속성이다. 인덱스는 stretchColumns와 마찬가지로 0부터 시작한다.
row에서 세번째로 배치되어 인덱스가 2였던 뷰에 layout_column="3"을 적용하면 한 칸 우측으로 이동한다.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*">

    <TableRow>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="2" />

    </TableRow>

    <TableRow>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="2" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_column="3"
            android:text="3" />

    </TableRow>

</TableLayout>

1번 row에서 1번 버튼이 버튼 2개 만큼의 공간을 차지하고, 

2번 row에서 3번 버튼이 2번 인덱스의 자리를 건너뛰고 바로 3번 인덱스의 자리에 위치하고 있다.