[안드로이드] 테두리 있는 표 만들기 (LiearLayout, TableLayout)

앱에서 특정 정보를 표로 보여줘야 할 경우가 있습니다.

이번 글에서는 LinearLayout 또는 TableLayout 둘 다 활용해서

위 그림과 같이 표 만드는 예제를 간단하게 다뤄보려고 합니다.

1. 표 만들기

LinearLayout 또는 TableLayout을 활용해서 아래와 같이 원하는 표를 만들어 줍니다.

기본적인 틀은 비슷합니다. 크게 Table로 묶고 Row 단위로 원하는 정보를 정의해 줍니다. 

(개인적으로는 어떤걸 사용해도 무방하다고 봅니다...!)

<!-- LinearLayout Table -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical">

    <!-- Row 1 -->
    <LinearLayout...>

    <!-- Row 2 -->
    <LinearLayout...>

    <!-- Row 3 -->
    <LinearLayout...>

    <!-- Row 4 -->
    <LinearLayout...>
</LinearLayout>

<!-- TableLayout Table -->
<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">

    <!-- Row 1 -->
    <TableRow...>

    <!-- Row 2 -->
    <TableRow...>

    <!-- Row 3 -->
    <TableRow...>

    <!-- Row 4 -->
    <TableRow...>
</TableLayout>

2. 테두리 만들기

표에서 각각의 cell 단위로 테두리를 씌우기 위한 drawable을 추가해 줍니다.

[border_table_cell.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="0.7dp"
        android:color="#000000" />
</shape>

근데 각각의 cell 만 테두리를 적용하게 되면 아래 그림과 같이, 

자세히 보시면 외곽 테두리는 더 얇게 적용이 되기 때문에 부자연스럽게 출력 됩니다. 

그렇기 때문에 표에서 외곽 테두리를 씌우기 위한 drawable도 같이 추가해 줍니다.

이때 외곽 테두리는 cell 단위 테두리 두께의 두 배를 설정해주면 됩니다.

[border_table.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1.4dp"
        android:color="#000000" />
</shape>

2. 예제 코드

표를 만들고 테두리를 씌울 준비도 끝났으니 직접 적용해서 실행해보았습니다.

[activity_main.xml]

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="LinearLayout"
        android:textSize="20dp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!-- LinearLayout Table -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border_table"
            android:orientation="vertical">

            <!-- Row 1 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    style="@style/TableCell"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="6월 10일"
                    android:textStyle="bold" />
            </LinearLayout>

            <!-- Row 2 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:textColor="#FFA500" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="항목"
                    android:textColor="#FFA500" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="목표"
                    android:textColor="#FFA500" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="결과"
                    android:textColor="#FFA500" />
            </LinearLayout>

            <!-- Row 3 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="무산소 운동" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="푸시업" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="스쿼트" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="10" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="20" />
                </LinearLayout>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="실패" />
            </LinearLayout>

            <!-- Row 4 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="유산소 운동" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="달리기" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="1km" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="실패" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TableLayout"
        android:textSize="20dp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!-- TableLayout Table -->
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border_table">

            <!-- Row 1 -->
            <TableRow>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="6월 10일"
                    android:textStyle="bold" />
            </TableRow>

            <!-- Row 2 -->
            <TableRow>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:textColor="#FFA500" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="항목"
                    android:textColor="#FFA500" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="목표"
                    android:textColor="#FFA500" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="결과"
                    android:textColor="#FFA500" />
            </TableRow>

            <!-- Row 3 -->
            <TableRow>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="무산소 운동" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="푸시업" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="스쿼트" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="10" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="@drawable/border_table_cell"
                        android:gravity="center"
                        android:text="20" />
                </LinearLayout>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="실패" />
            </TableRow>

            <!-- Row 4 -->
            <TableRow>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="유산소 운동" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="달리기" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="1km" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/border_table_cell"
                    android:gravity="center"
                    android:text="실패" />
            </TableRow>
        </TableLayout>
    </LinearLayout>
</LinearLayout>