본문 바로가기
Android

[Android] Table Layout(표)

by jane.dev 2021. 10. 23.
반응형
Table Layout
행과 열로 하위 뷰를 표시하는 뷰그룹

 

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow>
    	<!-- 위젯 배치 -->
    </TableRow>
</TableLayout>

Table Row 객체는 Table Layout 의 하위 뷰이며, 표에서 단일 행을 정의함

각 행에는 0개 이상의 셀이 있으며, 한 행의 셀은 ImageView, TextView 객체 등과 같이 다양한 View 객체로 구성될 수 있음

 

Table Layout은 하위 요소를 행과 열에 배치

1. 행 또는 열의 셀 에 테두리선을 표시하지 않음

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow>
        <EditText
            android:hint="Row 1" />
    </TableRow>
    <TableRow>
        <EditText
            android:hint="Row 2" />
    </TableRow>
    <TableRow>
        <EditText
            android:hint="Row 3" />
    </TableRow>
    <TableRow>
        <EditText
            android:hint="Row 4" />
    </TableRow>
    <TableRow>
        <EditText
            android:hint="Row 5" />
    </TableRow>
</TableLayout>

각 Table Row 에 Edit Text를 추가해도 테두리 선이 생기지 않음

 

2. 테이블은 셀을 비워둘 수 있음

3. 셀은 여러 열에 걸쳐있을 수 있지만(확장이 가능), 여러 행에 걸쳐있을 수 없음

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow>
        <Button
            android:text="1"></Button>
        <Button
            android:text="2"></Button>
        <Button
            android:text="3"></Button>
    </TableRow>
    <TableRow>
        <Button
            android:text="4"></Button>
        <Button
            android:layout_span="2"
            android:text="5"></Button>
        <Button
            android:text="6"></Button>
    </TableRow>
    <TableRow>
        <Button
            android:layout_column="1"
            android:text="7"></Button>
        <Button
            android:text="8"></Button>
        <Button
            android:text="9"></Button>
    </TableRow>
</TableLayout>

5번 버튼과 같이 span 필드를 사용해 열을 확장, 7번 버튼과 같이 column 필드를 사용해 셀을 비워둠