[부스트코스] 안드로이드 프로그래밍 06 - 테이블 레이아웃과 스크롤뷰

오늘부터 2주차 포스팅을 시작합니다. 더 발전하는 모습 보여드리고 싶네요^^

이번 포스팅의 주제는 테이블 레이아웃인데요,

엑셀에서 '테이블'이라는 단어를 보신 적이 있으실 겁니다. 우리말로 '표'라는 뜻이지요.

마찬가지로 테이블 레이아웃은 Table, 말 그대로 뷰가 표에 들어간 것처럼 배치시키는 레이아웃입니다.

표는 행(Row)과 열(Column)이 필요합니다. 이 테이블 레이아웃도 마찬가지입니다.

<TableRow>태그를 통해서 행을 추가할 수 있고, 그 안에 들어간 뷰들이 해당 행에서 1칸씩 차지합니다.

처음부터 열의 개수를 지정해주지는 않습니다만 stretchColumns라는 코드가 있습니다.

이 코드는 stretchColumns 안에 들어간 열에 대해서, 남는 공간을 할당해주는 코드입니다.

아래 그림을 보시겠습니다.

 

위 그림처럼 stretchColumns(0,1,2)를 입력하면 0,1,2열이 이 레이아웃의 남는 공간을 나눠가지게 됩니다. 한 행에 들어간 뷰가 3개 이하라면 3열만으로 꽉 차게 되겠죠.

그리고 TableRow태그를 5번 입력하면 5개 행을 가진 테이블 레이아웃이 생성됩니다.

 

즉, 행의 개수는 TableRow 태그를 입력한 횟수만큼, 열의 개수는 TableRow에 삽입된 뷰의 개수만큼 할당되고, 열의 경우에는 stretchColumn를 활용하면 현재 삽입된 뷰로 꽉 차게 만들 수 있다는 것입니다.

 

그런데 워드나 엑셀의 표는 하나의 데이터가 여러 칸을 차지하거나, 첫번째 열이 아닌 곳부터 데이터가 들어갈 때가 있습니다. 테이블 레이아웃도 물론 이런 기능을 구현할 수 있습니다. layout_column을 활용해 뷰가 들어갈 열을 정해줄 수 있고, layout_span을 통해 뷰가 차지할 칸의 개수를 정해줄 수 있습니다.

 

위의 그림처럼 한 뷰에 layout_column="1"과 layout_span="2"라는 코드가 들어가면 두번째(첫번째 열의 인덱스 값은 0이므로) 열부터 세번재 열까지 공간을 차지하게 됩니다.

단, 주의할 점은 먼저 추가된(소스코드상에서 윗줄에 속하는) 뷰의 그것보다 낮은 값으로 layout_column을 설정하면 지정된 숫자대로 적용되지 않는다는 것입니다.

예를 들면 하나의 뷰가 layout_column="2"로 설정되어 있고, 그 아래에 추가된 뷰가 layout_column="0"으로 설정되면 첫번째 뷰는 세번째 열, 두번째 뷰는 첫번째 열에 배치되는 것이 아니라, 첫번째 뷰는 세번째 열, 두번째 뷰는 첫번째 뷰의 오른쪽에 배치됩니다.

 

그런데 만약 테이블 레이아웃에 추가해야할 행이 너무 많아서 한번에 다 표시하기 어려울 때는 어떻게 해야 할까요?

이럴 때 사용할 수 있는 것이 바로 스크롤뷰입니다.

 

스크롤뷰

스크롤뷰는 한 화면에 표시하기엔 컨텐츠가 너무 많아서 한 화면에 다 들어가지 않을 때, 화면을 넘어가는 부분을 스크롤 할 수 있게 해주는 레이아웃입니다.

스크롤뷰는 다른 레이아웃과 마찬가지로 스크롤뷰 태그를 추가하고 안에 다른 뷰들을 넣는 방식으로 사용하는데요,

스크롤뷰 안에 내용이 화면을 넘어갈 만큼 많아지면 자동으로 스크롤이 만들어집니다.

그런데, 스크롤뷰 안에는 하나의 레이아웃만 들어갈 수 있기 때문에 스크롤뷰에 리니어 레이아웃을 넣고 사용하는 것이 일반적입니다. 위 그림처럼 말이죠.

 

<생각해 보기>

1. 리니어 레이아웃 안에 리니어 레이아웃을 포함시키는 방식으로 격자 모양을 만들었을 때 테이블 레이아웃과 다른 점은 어떤 것이 있을까요?
   
   - 리니어 레이아웃을 두 개 사용하는 것은 대체로 불규칙적인 배치, 테이블 레이아웃은 규칙적인 배치가 되고 배치의 자유도, 개별 개체에 접근하는 방식, 수정 가능한 정도가 조금 다를 것이라 생각합니다. 그리고 두 레이아웃을 사용하는 것보다 하나의 레이아웃만 사용하는 것이 리소스를 적게 차지할 것이라고 생각합니다.
   
   
2. 이미지뷰에 큰 이미지를 넣어서 볼 때 위, 아래로 스크롤하는 것과 동시에 좌, 우 스크롤도 되게 하려면 어떻게 해야 할까요?
   
   - 스크롤뷰에 리니어 레이아웃이 담긴 HorizontalScrollView를 넣고 리니어 레이아웃 안에 이미지뷰를 배치하여 완성할 수 있습니다.