[Android] Table Layout

테이블 레이아웃은 표나 엑셀 시트와 같이 '테이블'형태로 화면을 구성하는 레이아웃이다. 테이블은 기본적으로 열과 행으로 이루어져있는데, 테이블 레이아웃 또한 열과 행으로 레이아웃을 구성한다. Table Layout은 기본적으로 TableRow라는 태그가 여러개 들어가 한 행을 구성한다.TableRow안에는 뷰들이 들어가고, 이 뷷르은 각각 하나의 열이 된다.그리고 TableRow마다 추가된 뷰의 개수가 열의 개수가 된다.

우선 LinearLayout안에 TableLayout을 넣어준다. TableLayout은 Palette의 Layouts에 있다. 하나의 특징을 더 살펴보면, TableLayout안에 TableRow가 디폴트로 4개 생성되는것을 볼 수 있다.

TableRow를 추가하면 기본적으로 layout_width,layout_height는 match_parent가 디폴트이다. 일반적으로 match_parent라고 한다면, 테이블 레이아웃의 아래쪽 여유 공간을 차지해야한다. 하지만 아래쪽 여유공간을 차지하지 않는다. 이유는 TableRow가 layout_height값을 내부적으로 wrap_content로 설정하기 때문이다. layout_width같은 경우에는 match_parent가 디폴트로 설정되어 , 가로공간을 꽉채운다.

 

한번 버튼을 두개의 TableRow에 3개씩 넣어보자.

그러면 위 사진과 같이 격자모양의 레이아웃이 생성되는것을 볼 수 있다. 기본적으로 TableLayout에서 사용할 수 있는 두가지의 속성이 있다.

 

TableLayout속성  : stretchColumns

이 속성은 가로 방향으로 여유공간이 있는경우, 모두 채워넣는 열을 설정할 수 있다. 기본적으로 값을 입력할때는 Index값을 ','를 이용해 구분하여 입력한다. 인덱스는 일반적인 배열과 동일하게 0부터 시작한다. 예를 들어서 첫번쨰, 두번째 버튼을 레이아웃의 크기를 늘려 가로 레이아웃을 꽉차게 표시하게 끔 하고 싶다고 가정하자. 그러면 stretchColumns값을 0,1로 지정해주면 된다.

그럼 아래와 같이 첫번째 두번째 버튼이 크기를 강제로 늘림으로서 가로의 여유공간이 없어지는것을 볼 수 있다.조금 더 응용해서 첫번째 column의 버튼만 늘리는 경우, 모두 늘리는 경우를 가정해 보고 설정해 보자

TableLayout속성 : shrinkColumns

shringColumns는 stretchColumns와 반대로, 특정 열을 부모 컨테이너 폭에 맞추도록 강제로 축소시키는 속성이다. 예를 들어서 첫번째 TableRow레이아웃의 첫번쨰 버튼의 Content가 되게 긴 문장이라고 가정하자.

그럼 위 사진처럼 레이아웃이 망가지는것을 볼 수 있다.shringColumns속성으로 특정 열을 지정해주면(stretchColumns와 지정 방법은 동일하다)강제로 부모 레이아웃에 맞추게 된다.

 

이번에는 반대로 각각 Column으로 추가하는 뷰의 속성들을 살펴보자

 

View의 속성 : layout_column

layout_column속성으로 칼럼의 인덱스를 지정할 수 있다.즉, 생성한 레이아웃이 어떤 인덱스애 위치할것인지를 지정하는 것이다

위 사진을 보면 TextView의 layout_columns값을 2로 지정해 주었다. 그랬더니 위와 같이 Index2번 자리에 위치한 곳으로 이동하는것을 볼 수 있다. 단 주의할 점은, 자신의 앞에 다른 레이아웃이 있다면, 자신의 앞에 있는 레이아웃 Index보다 작은 값의 Index Column으로는 이동할 수 없다. 위 예시에서 예를 들면, TextView는 앞에 Index1번 자리에 Button 뷰가 있으므로, 0번 인덱스로는 이동이 불가능하다는 것이다.

 

View의 속성 : layout_span

layout_span속성은 여러 칼럼에 걸쳐 있도록 만드릭 위한 속성이다. 지정 값은 숫자이다. 예를 들어 아래와 같이 layout_column값이 1인 TextView가 총 2개의 Column면적을 차지하고 싶다고 가정하자.

기본적으로 textView는 layout_column값이 0, 버튼은 layout_column값이 2인 상태이다. 여기서 TextView의 layout_span값을 2로 변경하면 총 2개 면적의 Column을 차지하게 되는것이다.