앱만들기.38(Table Layout)

TableLayout은 앞서 살펴 본 그림에서와 같이, 표 형태의 레이아웃을 만들 때 사용하는 Layout 클래스입니다. "Table"이라는 단어의 여러 의미 중에 "표"가 있다는 것을 떠올리면 TableLayout이 어떻게 표시되는지 쉽게 이해할 수 있습니다.

-전체 너비를 고르게 사용

 

자 그럼, 어떻게 하면 TableLayout의 전체 너비를 고르게 사용할 수 있도록 만들 수 있을까요? 바로, TableLayout의 stretchColumns 속성을 사용하는 것입니다. stretchColumns 속성은, "stretch(늘이다)"와 "Columns(열)"라는 단어의 의미대로, TableLayout의 열 중에서 그 너비를 늘여서(stretch) 표시할 열(Column)을 지정하는 속성입니다.

 

* android:stretchColumns - 늘이고자 하는 열(Column)의 인덱스 지정. > 열(Column)의 인덱스는 0부터 시작.

(zero-based) > 하나 이상의 열(Column)을 ','(comma)로 분리하여 지정.

(예. "0,2,4") > 모든 열(Column)을 지정하려면, '*'기호 사용.

 

 

 

TableLayout, 개별 행(Row), 개별 셀(Cell)의 배경색 지정.

전체 TableLayout의 배경 색상을 변경하려면 "<TableLayout>" 요소에 "background" 속성을 사용하면 됩니다. 그리고 개별 행(Row) 전체의 배경 색상을 변경하려면 "<TableRow>"에 "background" 속성을 사용합니다. 마지막으로 하나의 셀(Cell) 영역의 배경 색상만을 변경하고자 한다면, 셀(Cell)에 해당하는 뷰(View) 위젯의 배경을 직접 변경하면 됩니다.

 

TableLayout, TableRow의 배경색과 padding, layout_margin 속성을 이용하여 TableLayout에 테두리가 그려진 효과를 낼 수 있습니다.

 

 

 일일이 지정 힘들어서, drawble에서 xml 파일 새로만들어서 main.xml 에서 background 지정 호출해줌

1. Outside

android:background="@drawable/table_outside"

 

 

stroke : 테두리 같은느낌

<stroke android:width="3dp" (두께지정)

solid : 면색깔 지정

<solid android:color="#E1F3D6"/>

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

</shape>

 

2.InSide

는 많아서 한꺼번에 Design탭에서 지정

 

지정해서 색 변경하고싶으면 xml파일또 만들어서 background색 지정해주면 된다고.

 

셀병합

android:layout_span="2"

 

열끼리 합치는거 (기존에 있던거 날려야 예쁘게 표현가능)

 

---

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="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="8dp"
        android:stretchColumns="*"
        android:background="@drawable/table_outside"
        android:layout_marginBottom="100dp"
        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_inside"
                android:gravity="center"
                android:text="홍드로이드"
                android:textSize="18sp" />

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="홍드로이드"
                android:layout_span="2"
                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="홍드로이드"
                android:textSize="18sp" />

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="홍드로이드"
                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="홍드로이드"
                android:textSize="18sp" />

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside_gray"
                android:gravity="center"
                android:text="홍드로이드"
                android:textSize="18sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="홍드로이드"
                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="홍드로이드"
                android:textSize="18sp" />

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="홍드로이드"
                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="홍드로이드"
                android:textSize="18sp" />

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/table_inside"
                android:gravity="center"
                android:text="홍드로이드"
                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="홍드로이드"
                android:textSize="18sp" />

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

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

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

        </TableRow>


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

 

나머지 drawable xml은 생략