[안드로이드] 레이아웃(3) - TableLayout

안녕하세요 ! 초보개발자 입니다. 

이 블로그는 개인 공부 정리용 블로그 입니다. 

혹 잘못된 내용이 있다면 지적 부탁드리겠습니다.

그리고 질문주신다면 최대한 아는선에서 답변드리도록 하겠습니다.

그럼 시작하도록 하겠습니다.

---

TableLayout(테이블 레이아웃)

테이블 레이아웃은 이름에서도 알 수 있듯이 표와 같은 형태로 화면을 구성하는 레이아웃 입니다. 테이블 레이아웃에는 <TableRow> 태그가 들어 가는데 이는 하나의 행을 뜻합니다. 그리고 <TableRow> 태그 안에는 여러개의 뷰가 들어 갈 수 있는데 뷰들이 열이 되는 형태 입니다. 예제를 통해서 알아 보겠습니다. 

<?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="wrap_content"
    android:stretchColumns="1"
    >
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="책 이름 : "
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="안드로이드"
            android:layout_margin="10dp"
            />
 
 
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="책 가격 : "
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="30000원"
            android:layout_margin="10dp"
            />
 
 
    </TableRow>
 
</TableLayout>
 

TableLayout 의 stretchColumns 속성이 있습니다. 이는 특정 열을 확장해준다는 의미 입니다. Column은 0부터 시작을 합니다. stretchColumns의 값이 1이기 때문에 두번째 열을 늘려줍니다. 위의 소스에서는 안드로이드를 출력하는 TextView 와 30000원을 출력하는 TextView를 말하는 거겠죠 ? 

실행 화면은 다음과 같습니다.

제가 선택한 TextView가 두번째 컬럼이기 때문에 부모 컨테이너에 맞게 늘어나는 것을 볼 수 있습니다. 

다른 예제를 통해서 좀 더 자세하게 알아 보도록 하겠습니다.

<?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="wrap_content"
    android:shrinkColumns="0,1,2,3,4"
    >
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0Row, 0Column"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0Row, 1Column"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0Row, 2Column"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0Row, 3Column"
            android:layout_margin="10dp"
            />
 
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1Row, 1Column"
            android:layout_column="1"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1Row, 2Column"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1Row, 3Column"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1Row, 4Column"
            android:layout_margin="10dp"
            />
 
 
 
    </TableRow>
 
</TableLayout>
 

바로 결과값을 보면서 설명 하도록 하겠습니다.

이번에는 TableLayout의 shrinkColumns 속성을 넣어 주었습니다. 이 속성은 부모 컨테이너에 맞게 자동으로 축소하는 기능을 가지고 있습니다. shinkColumns의 값을 0,1,2,3,4로 주었기 때문에 5개의 행이 자동으로 출력이 된 것을 볼 수 있습니다. 그런데 1,2행에 각각 4개의 TextView를 넣었는데 왜 열이 5개가 되었을까요 ? 답은 두번째 행의 첫번째 TextView에 android:layout_column = "1" 이라는 값 때문입니다. 이 TextView를 1번 열에 넣어라는 뜻입니다. 위에서도 설명 하였듯이 행과 열은 0 부터 시작합니다. 1은 두번째에 넣어라는 뜻이 되니 두번째 부터 뷰를 넣기 시작 한 것입니다. 그러므로 총 5개의 열이 된다는 것을 알 수 있습니다. 만약 TableLayout에 shrinkColumns 속성을 뺀다면 어떻게 될까요 ? 답은 직접 입력하고 확인해 보세요 

이상으로 오늘의 강의는 마치도록 하겠습니다. 수고하셨습니다.