'TableLayout'에 해당되는 글 1건

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


이번에는 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>

TextViewlayout_span2로 설정하여 두자리를 차지 하도록 배치했습니다. 



세번째 라인은 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



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,