[Android Studio] Table Layout (엑셀 표 느낌)

<TableRow
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

처음에 이 상태에서 값을 더 넣고 싶다 그러면

 

안에 /를 지우고

 

밑에서 </를 해주면

 

<TableRow
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    </TableRow>

이렇게 된다. 이 중간에 textView를 4개 넣으면 text가 오른쪽 끝까지 붙지 않게 되는데

 

TableLayout 속성에

android:stretchColumns="*"

을 주면 적절하게 4등분을 해준다.

 

4줄로 만들기 위해 저 빨간색 항목의 내용을 복사 붙여넣기 하고 싶을 땐 파란색 - 버튼을 누르면 한 줄로 접혀서 복사 붙여넣기가 편해진다.

 

table_outside.xml (바깥 테두리)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>

    <stroke android:width="3dp"
        android:color="#000000"/>

</shape>

acitivty_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="100dp"
        android:stretchColumns="*"
        android:background="@drawable/table_outside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="18sp"
                android:text="hessepark"/>

        </TableRow>

    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

android:background="@drawable/table_outside"

바깥 테두리 지정

 

table_inside.xml (안에 십자가 선)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>

    <stroke android:width="1dp"
        android:color="#000000"/>

</shape>

 

이걸 바깥 테두리 지정하듯이 코드 하나하나를 대입해 주려면 힘들기 때문에

activity_main.xml의 design tab으로 가서

Ctrl+A 전체 선택하고 Ctrl만 눌러서 TextView 제외 전부 빼줌

background에서 @drawable/table_inside 지정

---

<만약 여기서 한 칸은 회색으로 칠하고 싶다?>

table_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#B8ADAD"/>

    <stroke android:width="1dp"
        android:color="#000000"/>

</shape>

만들어서 그 칸에만 background 이걸로 지정

---

<셀 병합을 하고 싶다?>

activity.xml

3 번째 TextView에

android:layout_span="2"

을 주면 하나의 문장이 두 칸을 차지하게 된다 (TextView가 2개인 셈)

 

그러므로 마지막 TextView를 지워줘야 표가 정상적으로 나타난다.

---

최종 activity_main.xml 코드

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="100dp"
        android:background="@drawable/table_outside"
        android:stretchColumns="*"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_gray"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:layout_span="2"
                android:text="hessepark"
                android:textSize="18sp" />



        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="hessepark"
                android:textSize="18sp" />

        </TableRow>

    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

결과

---

https://www.youtube.com/watch?v=DkxPfcIyoRg&list=PLC51MBz7PMyyyR2l4gGBMFMMUfYmBkZxm&index=40