TableLayout 개념잡기

http://tigerwoods.tistory.com/12

안드로이드 Study 목차가기

 

이번에는 위젯들을 화면에 배치 하는데 필요한 container에 관한 내용입니다.

다음과 같이 3부분으로 나누어서 포스팅 하려고 합니다. 

Part 1. LinearLayout 

Part 2. RelativeLayout 

Part 3. TableLayout  + ScrollView 

그중 Part 3. TableLayout에 대한 정리 입니다.

  

 

3. TableLayout (Grid Model)

TableLayout 컨테이너는 HTML과 같이 방식으로 쓰인다.

즉, 위젯을 테이블에 배치하고, 테이블의 행과 열의 간격을 조정하여 위젯의 크기를 결정하는 방식이다.

 

Table 구성하기

TableLayout은 TableRow와 같이 사용된다.

TableLayout은 테이블의 전반적인 사항을 관리하고, TableRow로 테이블에 행을 하나씩 추가하고, 추가한 행에 위젯(들)을 배치하는 한다.

 

TableLayout 예제 (main.xml) *속성 적용 전

01	<?xml version="1.0" encoding="utf-8"?>

02	<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04	android:layout_height="fill_parent" >

05

06	<!-- Row 0 -->

07	<TableRow>

08

<TextView

09	android:id="@+id/textview1"

10	android:text="Row0 : Column0"

11	android:textColor="#000000"

12	android:background="#FFFFFF" />

13

<TextView

14	android:id="@+id/textview2"

15	android:text="Row0 : Column1"

16	android:textColor="#000000"

17	android:background="#FF0000" />

18

<TextView

19	android:id="@+id/textview3"

20	android:text="Row0 : Column2"

21	android:textColor="#000000"

22	android:background="#FFFFFF" />

23

<TextView

24	android:id="@+id/textview4"

25	android:text="Row0 : Column3"

26	android:textColor="#000000"

27	android:background="#FF0000" />

28	</TableRow>

29

30	<!-- Row 1 -->

31	<TableRow>

32

<TextView

33	android:id="@+id/textview5"

34	android:text="Row1 : Column0"

35	android:textColor="#000000"

36	android:background="#FFFF00" />

37

<TextView

38	android:id="@+id/textview6"

39	android:text="Row1 : Column1"

40	android:textColor="#000000"

41	android:background="#00FF00" />

42

<TextView

43	android:id="@+id/textview7"

44	android:text="Row1 : Column2"

45	android:textColor="#000000"

46	android:background="#FFFF00" />

47

<TextView

48	android:id="@+id/textview8"

49	android:text="Row1 : Column4"

50	android:textColor="#000000"

51	android:layout_column="4"

52	android:background="#00FF00" />

53	</TableRow>

54	</TableLayout>

 

 

위의 예제의 경우, 테이블은 2개의 행으로 이루어져 있으며

첫 번째 행과 두 번째 행 모두 4개의 TextView로 이루어져 있다.

위의 XML Layout을 일반적으로 사용하는 테이블로 시각화 시킨다면 다음과 같다.

 

Row1 : Column4 처럼 위젯을 특정 column에 배치하는 TableRow.LayoutParams 의 속성은 다음과 같다.

android:layout_column="배치하려는 column 번호(0-based)"

 

또, 테이블의 전체 column 수는 column수가 가장 많은 row에 따른다.

위의 경우 Row0은 순차적으로 4개의 cell을 소모하여 4개의 column이면 충분히 표현 가능하지만,

Row1은 마지막 위젯이 cell 하나를 건너뛰어 배치되어서 총 5개의cell이 사용되었다.

그럼으로 테이블 전체 column수는 row1의 column수에 따라 5 column 테이블이 된다.

다음은 예제를 실행한 화면이다. cell들의 너비가 넓어 테이블이 화면을 벋어났지만 다음에서 해결한다.

 

  

셀(Cell)의 너비 줄이기(shrink) *참고: 테이블 좌우 폭이 컨테이너 폭보다 넓은 경우에만 효과 있음.

위 실행 화면에서 보면, 테이블의 전체 너비가 컨테이너 너비보다 넓어 컨테이너 밖으로 삐쳐 나간 것을 볼 수 있다.

경우에 따라서는 테이블의 column(들)의 너비를 인위적으로 줄여 테이블 전체가 보이도록 할 필요가 있다.

column(들)의 너비가 화면에 적당하도록 줄이려면 TableLayout의 다음 속성을 사용한다.

android:shrinkColumns="줄이고자 하는 column 번호(0-based) 또는 *"

1~n 개의 column에 적용 가능하며 복수의 column은 쉼표 (,) 로 구분하며 전체 column을 줄이려면 아스테리스크(*)를 사용한다.

또, column의 너비가 줄어들면서 위젯이 표현하는 컨텐트(예. string object)의 너비가 위젯의 view 너비 보다 커서 하나의 라인에 정상적으로 표현할 수 없게 되면 자동으로 줄 바꿈이 일어난다.

Java 코드에서는 setColumnShrinkable 또는 setShrinkAllColumns 메소드를 사용.

다음은 예제에 android:shrinkColumns="*"를 적용한 화면. 모든 cell들이 정상적으로 보인 반면 줄 바꿈이 일어났다.

 

  

셀(Cell) 숨기기(collapse)

필요에 따라서 테이블의 특정 셀이 존재는 하지만 보이지 않게 숨겨야 할 경우도 있다.

android:collapseColumns=" 숨기고자 하는 column 번호(0-based) 또는 *"

역시 TableLayout의 속성이며 1~n 개의 column에 적용가능 하다. 복수의 column은 쉼표 (,) 로 구분하며 전체 column을 숨기려면 아스테리스크(*)를 사용한다.

자바 코드에서는 setColumnCollapsed 메소드를 사용.

다음은 예제에 android:collapseColumns="0, 1"를 적용한 화면이다. column 0, 1이 보이지 않는 것을 확인할 수 있다.

 

  

셀(Cell) 합치기

위젯이 2개이상의 column에 걸쳐 나타나게 할 수 있는데 이를 결정하는 TableRow.LayoutParams 의 속성은 다음과 같다.

android:layout_span="차지하려는 Column 수"

예제 중 Row1 : Column 2 에 위치한 EditText 위젯에 android:layout_span="2" 속성을 적용하면 테이블이 다음과 같아진다.

 

  

셀(Cell) 늘리기(stretch) *참고: 테이블 좌우 폭이 컨테이너 폭보다 좁을 경우에만 효과 있음.

TableLayout 컨테이너에 배치된 위젯의 넓이는 그 위젯이 속한 컬럼에서 가장 넓은 위젯의 크기를 따른다.

하지만 필요에 따라 특정 위젯이 속한 column의 너비를 인위적으로 늘릴 필요가 있다.

이럴경우 TableLayout의 다음 속성을 사용한다. 

android:stretchColumns="늘리려는 column 번호(0-based) 또는 *"

속성에 지정된 column외의 column들이 소비하고 남은 모든 여유공간을 지정된 column(들)이 차지하게 된다.

Java 코드에서는 TableLayout의 setColumnStretchable 이나 setStretchAllColumns 메소드를 이용.

예제에서 column4를 늘리면 다음과 같이 테이블 형태가 변한다. 이전 그림과 비교해 보면 Row1 : Column4 가 화면 끝까지 확장 된 것을 볼 수 있다.

 

  

TableLayout 중간에 TableRow가 아닌 위젯 삽입하기

TableLayout의 중간에 TableRow가 아닌 위젯이 올 수도 있다.

단, 그런 요소의의 경우 다음과 같은 특징을 갖는다.

• TableLayout은 orientation이 vertical로 지정된LinearLayout 처럼 작동함.
• android:layout_width속성이 무조건 "fill_parent"로 고정됨.

 

예제의 두 TableRow 사이에 다음과 같은 코드를 삽입 한다면,

TableLayout 내부의 TableRow가 아닌 요소 예제 (main.xml 의 일부)

1

<View

2	android:layout_height="4px"

3	android:background="#FF00FF" />

 

실행 화면은 다음과 같이 된다. Row 0과 Row 1사이의 핑크색 경계선을 볼 수 있다.

 

  다음은 위 실행화면에 대한 소스코드이다. 지금까지 정리한 여러 속성들이 사용된 것을 확인할 수 있다.

TableLayout 예제 코드 (main.xml) *여러 속성 적용 후

01	<?xml version="1.0" encoding="utf-8"?>

02	<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04	android:layout_height="fill_parent"

05	android:shrinkColumns="*"

06	android:collapseColumns="0, 1"

07	android:stretchColumns="4" >

08

09	<!-- Row 0 -->

10	<TableRow>

11

<TextView

12	android:id="@+id/textview1"

13	android:text="Row0 : Column0"

14	android:textColor="#000000"

15	android:background="#FFFFFF" />

16

<TextView

17	android:id="@+id/textview2"

18	android:text="Row0 : Column1"

19	android:textColor="#000000"

20	android:background="#FF0000" />

21

<TextView

22	android:id="@+id/textview3"

23	android:text="Row0 : Column2"

24	android:textColor="#000000"

25	android:background="#FFFFFF" />

26

<TextView

27	android:id="@+id/textview4"

28	android:text="Row0 : Column3"

29	android:textColor="#000000"

30	android:background="#FF0000" />

31	</TableRow>

32

33	<!-- TableLayout 내부의 TableRow가 아닌 요소 -->

34

<View

35	android:layout_height="4px"

36	android:background="#FF00FF" />

37

38	<!-- Row 1 -->

39	<TableRow>

40

<TextView

41	android:id="@+id/textview5"

42	android:text="Row1 : Column0"

43	android:textColor="#000000"

44	android:background="#FFFF00" />

45

<TextView

46	android:id="@+id/textview6"

47	android:text="Row1 : Column1"

48	android:textColor="#000000"

49	android:background="#00FF00" />

50

<TextView

51	android:id="@+id/textview7"

52	android:text="Row1 : Column2"

53	android:textColor="#000000"

54	android:background="#FFFF00"

55	android:layout_span="2" />

56

<TextView

57	android:id="@+id/textview8"

58	android:text="Row1 : Column4"

59	android:textColor="#000000"

60	android:layout_column="4"

61	android:background="#00FF00" />

62	</TableRow>

63	</TableLayout>

 

 

  

4. Container Scroll 하기

스마트폰의 화면은 크기가 제한적 임으로 스크롤의 사용이 중요하다.

스크롤 구현 방법은 다음과 같이 스크롤 시키고 싶은 container를 ScrollView elememt내부에 nest 시키면 된다.

ScrollView 예제 (main.xml)

01	<?xml version="1.0" encoding="utf-8"?>

02	<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_height="fill_parent"

04	android:layout_width="fill_parent" >

05

06	<!-- 어떤 Layout을 사용해도 상관없음 -->

07	<!-- 스크롤 바를 위한 공간 확보용 paddingRight="5px" 주목 -->

08	<LinearLayout

09	android:orientation="vertical"

10	android:layout_width="fill_parent"

11	android:layout_height="fill_parent"

12	android:paddingRight="5px" >

13

<TextView

14	android:layout_width="fill_parent"

15	android:layout_height="300px"

16	android:background="#FF0000"

17	android:text="TextView 1" />

18

<TextView

19	android:layout_width="fill_parent"

20	android:layout_height="300px"

21	android:background="#00FF00"

22	android:text="TextView 2" />

23

<TextView

24	android:layout_width="fill_parent"

25	android:layout_height="300px"

26	android:background="#0000FF"

27	android:text="TextView 3" />

28	</LinearLayout>

29	</ScrollView>

 

다음은 실행 화면이다.

 

완전한 TableLayout API Reference는 다음을 참조.

TableLayout API Reference 링크

TableRow API Reference 링크

안드로이드 Study 목차가기