[ 안드로이드 코딩_020 ] 안드로이드 레이아웃 TableLayout

안녕하세요. 제임스입니다. 

이번에는 TableLayotu 에 관한 내용을 포스팅해 보겠습니다. 

어떻게보면 바로 앞번에 포스팅한 GridLayout 과 정말 유사한 형태 입니다. 

(GridLayout 포스팅을 보시면 여기를 클릭해 주세요)

■ TableLayout 이란?

TableLayout 은 행(row)과 열(column)으로 구성되는 테이블 형태로 화면을 구성하는 레이아웃을 말합니다. 

TableLayout 의 각 행은 TableRow 인스턴스가 사용하며 이 TableRow 인스턴스는 하나의 자식뷰를 가지는 셀(cell)로 구성됩니다. 

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.LinearLayout

↳ android.widget.TableLayout

■ TableLayout 속성

TableLayout 의 속성에 대해 알아 보겠습니다. 

◎ 부모뷰에서 사용하는 속성

collapseColumns : 지정 컬럼을 제거

shrinkColumns : 지정 컬럼 자동 축소

stretchColumns : 지정 컬럼 자동 확장

위 세가지 정도가 API 상에 존재하는 TableLayout 입니다. 

◎ 자식뷰에서 사용하는 속성

layout_column : 자식뷰가 위치할 컬럼의 index 값 지정 (0: 첫번째, 1: 두번째, 2: 세번째....)

layout_span : 자식뷰가 차지할 셀의 수를 지정 (예: 2로 지정시 두칸을 차지)

그외 기본적으로 View 가 가지는 속성들은 거의 대부분 사용 할 수 있습니다. 

■ TableLayout 예제

이제 예제를 통해 TableLayout 을 만나 보겠습니다. 

위 이미지와 같이 3x5 사이즈의 테이블을 생성 했습니다. 

작업은 아래와 같은 방법으로 진행 합니다. 

▶ 자식뷰 개발 예

첫번째 라인은 TextView 1 과 TextView 2 가 나란히 배치 되어 있습니다. 

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#75ccdf"
    >
    <TextView
        android:text="TextView 1"
        android:background="#82eb92"
        android:padding="5dp"
        />
    <TextView
        android:text="TextView 2"
        android:background="#95ad5d"
        android:padding="5dp"
        />
</TableRow>

하나의 row 구성은 TableRow 로 선언하고 그 안에 자식뷰를 추가 하는 만큼 셀을 생성하게 되는데요. 여기서는 TableRow 안에 두개의 TextView 가 존재하여 한 row 에 두개의 셀(cell) 이 존재 합니다. 

두번째 라인은 TextView3 이 두 컬럼을 차지하도록 했습니다. 

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#9e6dcf"
    >
    <TextView
        android:text="TextView 3"
        android:layout_span="2"
        android:background="#78dab1"
        android:padding="5dp"/>
</TableRow>

TextView 에 layout_span 을 2로 설정하여 두자리를 차지 하도록 배치했습니다. 

세번째 라인은 TextView4 를 세번째 컬럼에 위치 시켰습니다. 

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#cf756d"
    >
    <TextView
        android:layout_column="2"
        android:text="TextView 4"
        android:background="#e6da7f"
        android:padding="5dp"/>
</TableRow>

TextView 에 layout_column 값을 2로 지정하여 세번째 컬럼에 위치하도록 배치합니다. 

(위치지정은 0 이 첫번째, 1 이 두번째, 2가 세번째... 입니다)

네번째 라인은 TextView5, 6, 7 세개의 자식뷰를 모두 추가 했습니다. 

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#ebeb73"
    >
    <TextView
        android:text="TextView 5"
        android:background="#cf6da6"
        android:padding="5dp"/>
    <TextView
        android:text="TextView 6"
        android:background="#9e6dcf"
        android:padding="5dp"/>
    <TextView
        android:text="TextView 7"
        android:background="#6dcf8c"
        android:padding="5dp"/>
</TableRow>

첫번째 라인과 별 차이 없이 TableRow 에 자식뷰로 TextView 를 하나 더 추가 했습니다.

다섯번째 라인은 TextView8 을 정중아에 위치 시켜보겠습니다. 

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="#6d75cf"
    >
    <TextView
        android:layout_column="1"
        android:text="TextView 8"
        android:background="#cfa56d"
        android:padding="5dp"/>
</TableRow>

TextView 에 layout_column 을 1로 지정하여 두번째 컬럼에 위치하도록 했습니다. 

▶ 부모뷰 개발 예

부모뷰에서 사용하는 세가지 속성 값 기억 하시나요? 

collapseColumns : 지정 컬럼을 제거

shrinkColumns : 지정 컬럼 자동 축소

stretchColumns : 지정 컬럼 자동 확장

위 속성 값들은 " , "(콤마) 를 이용하여 컬럼 값을 추가 할 수 있습니다. 

하나 하나 살펴 보겠습니다. 

collapseColumns 에 제거하기 원하는 컬럼 값으로 1 을 설정해봤습니다. 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#b6e686"
    android:layout_margin="10dp"
    android:collapseColumns="1"
    >

컬럼 index 가 1인 두번째 컬럼에 있던 자식뷰들이 모두 제거 되었습니다. 

여기서 참고 할 점은 TextView3 의 경우 0번과 1번 모두 차지하고 있던 자식뷰 였으나 1번 인덱스에 포함되어 삭제 되었습니다. 

collapseColumns 값을 " , " 를 이용하여 1 과 2 두개값을 지정하여 두번째, 세번째 컬럼을 제거 했습니다. 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#b6e686"
    android:layout_margin="10dp"
    android:collapseColumns="1, 2"
    >

stretchColumns에 자동 확장하고자 하는 컬럼 index 값으로 1을 지정해봤습니다.  

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#b6e686"
    android:layout_margin="10dp"
    android:stretchColumns="1"
    >

index 가 1인 두번재 컬럼이 확장 된 것을 확인 하실 수 있습니다. 

stretchColumns 값을 " , " 를 이용하여 1, 2 를 모두 확장하도록 설정 했습니다. 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#b6e686"
    android:layout_margin="10dp"
    android:stretchColumns="1, 2"
    >

stretchColumns 값을 " , " 를 이용하여 0, 1, 2 를 모두 확장하도록 설정 했습니다. 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#b6e686"
    android:layout_margin="10dp"
    android:stretchColumns="0, 1, 2"
    >

단 위와 같이 모든 컬럼을 지정 할 경우 " , " 를 사용하여 각각 입력 하지 않고 아래 코드와 같이 " * " 를 이용하면 편합니다. 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#b6e686"
    android:layout_margin="10dp"
    android:stretchColumns="*"
    >

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D