레이아웃: TableLayout, TableRow

1. TableLayout

먼저 LinearLayout으로 다음과 같이 만들어본다.

LinearLayout 안에 LinearLayout을 2개 사용해서 각각 행의 역할로 사용한다.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#2e95d6">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1*1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1*2"/>
    
</LinearLayout>
    
<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2*1"/>

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

</LinearLayout>    

</LinearLayout>

위와 같은 구조의 레이아웃을 테이블 레이아웃을 쓰면 가독성 높고 간단하게 만들 수 있다.

1) TableLayout, TableRow

레이아웃 전체를 TableLayout으로 변경 후, 행으로 사용하는 2개의 LinearLayout들을 TableRow로 바꾸면 된다.

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

    <TableRow>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1*1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1*2"/>
    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2*1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2*2"/>
    </TableRow>

</TableLayout>

2) collapseColumns

지정한 넘버의 열을 삭제. 0은 첫번째, 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="match_parent">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <Button
        android:text="1*1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        <Button
            android:text="1*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="1*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:text="2*1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

</TableLayout>

위와 같이 테이블을 만든 뒤 레이아웃에 CollapseColumns를 써본다.

<?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="match_parent"
    android:collapseColumns="0, 2"
    >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <Button
        android:text="1*1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        <Button
            android:text="1*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="1*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:text="2*1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

</TableLayout>

0번과 2번을 선택하면 1번째 열과 3번째 열이 사라진다.

3) shrinkColumns

지정된 넘버의 열이 차지하는 폭을 맞춰서 줄일 수 있다.

<?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="match_parent"
    android:shrinkColumns="1">

    <TableRow>
    <Button
        android:text="1*1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"/>
        <Button
            android:text="1*2"
            android:layout_width="150dp"
            android:layout_height="wrap_content"/>
        <Button
            android:text="1*3"
            android:layout_width="150dp"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow>
        <Button
            android:text="2*1"
            android:layout_width="90dp"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*2"
            android:layout_width="90dp"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*3"
            android:layout_width="90dp"
            android:layout_height="wrap_content"/>
    </TableRow>

</TableLayout>

shrinkColumns으로 1번(2번째) 열을 지정하면 해당 열이 좌우의 사이즈에 맞춰 자동으로 적절한 사이즈로 줄어든다.

4) stretchColumns

지정된 넘버의 열이 차지하는 폭을 맞춰서 늘릴 수 있다.

<?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="match_parent"
    android:stretchColumns="1">

    <TableRow>
    <Button
        android:text="1*1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        <Button
            android:text="1*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="1*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow>
        <Button
            android:text="2*1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

</TableLayout>

스트레치 컬럼으로 1번(2번째) 컬럼을 지정하면 좌우의 열들은 그대로 있고 중앙의 2번째 컬럼만 좌우에 맞춰 화면을 꽉 채우며 늘어난다.

5) layoutColumns

지정된 넘버의 열에 맞춰 이동된다.

<?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:background="#b988f5">

    <TableRow>
    <Button
        android:text="1*1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        <Button
            android:text="1*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="1*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow>
        <Button
            android:text="2*1"
            android:layout_column="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </TableRow>

</TableLayout>

2째행의 3번열이 없으므로 왼쪽 끝부터 채워지고 오른쪽 끝이 비어야 하는데 layoutColumn에 의해 2번째 열에 맞춰 오른쪽으로 이동되었다.

6) layoutSpan

열을 합치는 span

<?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:background="#b988f5">

    <TableRow>
    <Button
        android:text="1*1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        <Button
            android:text="1*2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="1*3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow>
        <Button
            android:text="2*1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="2*2"
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </TableRow>

</TableLayout>

위는 3개 열, 아래는 2개 열인데 2번째 열에서 layoutSpan을 쓰면 2~3열이 합쳐진 만큼의 공간을 차지하게 된다.