[Android] 안드로이드 : 테이블 레이아웃 만들기

1. 레이아웃 종류

레이아웃	설명
제약 레이아웃 (Constraint Layout)	- 제약 조건 기반 모델 - 제약 조건을 사용해 화면 구성  - 안드로이드 스튜디오에서 자동으로 설정하는 디폴트 레이아웃
리니어 레이아웃 (Linear Layout)	- 박스 모델  - 한쪽 방향으로 차례대로 뷰를 추가하며 화면 구성  - 뷰가 차지할 수 있는 사각형 영역 할당
상대 레이아웃 (Relative Layout)	- 규칙 기반 모델 - 부모 컨테이너나 다른 뷰와의 상대적 위치로 화면 구성 - 제약 레이아웃과 유사하나 기능이 더 적음
프레임 레이아웃 (Frame Layout)	- 싱글 모델  - 가장 상위에 있는 하나의 뷰 또는 뷰그룹만 보여줌  - 여러 개의 뷰가 들어가면 중첩해서 쌓음 - 여러 개의 뷰를 중첩한 후 각 뷰를 전환하여 보여주는 방식  - 가장 단순하지만 자주 사용
테이블 레이아웃 (Table Layout)	- 격자(Grid) 모델  - 격자 모양의 배열을 사용해 화면 구성  - HTML에서 많이 사용하는 정렬 방식과 유사하지만 사용 빈도 낮음

※ 화면을 만들기 위해서는 xml 파일 1개 + java 파일 1개로 이루어져야 함

 

 

2. Table Layout

테이블 레이아웃은 격자 모양으로 뷰를 배치할 때 사용합니다.

리니어 레이아웃 안에 리니어 레이아웃을 넣는 방식을 사용해도 격자 모양을 만들 수 있지만 테이블 레이아웃을 사용하면 좀 더 쉽게 만들 수 있습니다.

 

table layout은 table row가 필요

- Table Layout은 Table Row를 만들고, 그 안에 버튼 등을 넣는 방식

<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:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2" />
</TableRow>

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

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4" />
</TableRow>
</TableLayout>

 

 

- android:stretchColumns = "0,1,2" : 세 개의 칼럼을 stretch 해서 남은 공간을 채워달라

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0,1,2">
    
</TableLayout>

- android:layout_span = "2" : 칼럼 두 칸 만큼 차지하겠다.

- android:layout_column = "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_height="wrap_content"
        android:layout_width="match_parent" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이름 : " />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"/>

    </TableRow>

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="예"
            android:layout_column="1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="아니요"
            android:layout_column="2" />


    </TableRow>

</TableLayout>