[안드로이드 스튜디오] Ch3. 테이블레이아웃 & 프레임레이아웃(TableLayout & FrameLayout)

2019년 8월 18일 (일)

 

창업의 길로 가기 위한 두번째 걸음, [안드로이드 스튜디오]로 향해보자!

 

*질적으로 많이 부족한 글입니다. 지적 및 조언 환영합니다.

*이 글에선 "안드로이드 스튜디오"를 줄여서 "안스" 라고 표현합니다. 참고 바랍니다.

 

우선, 본인은 학원에서 'JAVA' 기초 수업을 선수강했다. 안드로이드 스튜디오를 배우기 위해선 피할 수 없는 언어이기 때문이다.

(물론 Kotlin 도 있지만, 대한민국에선 아직 JAVA의 파워가 어마어마 하다고..)

 

이번글에서도 저번글과 동일하게 안스에서 사용이 '덜' 되는 레이아웃들에 대해 알아보고 마지막엔 기능 파트에 들어간다.

(사실, 첫번째글에서 기능 파트는 한 일주일이 지나고 배울 것이라 예상했는데, FrameLayout 때문에 어쩔수없이 일찍 들어가게 된다.)

 

 

---

<차례>

1. TableLayout

2. FrameLayout

---

 

 

1. TableLayout

 자식(Child) 뷰 위젯들을 위 사진과 같이 '행(Row)'과 '열(Column)'로 나누어 표시하는 레이아웃 클래스, 격자 모양의 배열을 사용해서 화면을 구성하기 때문에 '격자모델'이라고도 불리운다. 

 

테이블 레이아웃은 크게 복잡하지 않다. 3가지만 숙지하자.

 

(1.1) <TableRow>

-> 테이블 레이아웃은 '행'(가로)이 기본이 된다. 그리고 그 안에 '열', 즉 '셀(cell)'을 추가하는 방식이다.

그런데 '행'은 <TableRow> 라는 특정 태그가 있음에도 불구하고 '열'은 특정 태그가 없다. 그냥 <TextView>만 추가해주면 알아서 셀이 생긴다.

 

*이제부터는 '열(Columns)'을 '셀(Cell)'이라 칭한다.

 

<TableRow> </TableRow> 안에 TextView(셀) 를 4개 추가 시켜보았다.

 

사진1

그리고 이걸 여러개 만들면...

사진2

이런 엑셀에서나 볼것같은 테이블이 완성된다. 음, 근데 저 오른쪽에 흰 공백, 뭔가 아쉽지 않은가.

 

(1.2) android:StretchColumns="cell number"

-> 그래서 바로 이 로직이 필요하다. 이 로직은 내가 지정한 인덱스(행)를 선택해서 빈공간을 채워줄 수 있다.

즉, 사진2의 빨,주,노,초 중 아무거나, 몇개든 골라서 그걸 이용해서 빈 여백을 채워줄 수 있다는 것이다.

 

단, 프로그래밍에서의 첫번째는 늘 '0'이라는 것을 잊지말자. (빨간색 셀의 순서는 0이 된다.)

또한 이 로직은 Row 클래스에서 쓰이는 것이 아니라, TableLayout 태그 안에서 쓰여진다.

 

<android:StretchColumns="*" >를 이용하면 하나 하나 기입할 필요 없이 밑의 사진3 처럼 전체가 골고루 채워진다.

사진3

(1.3) android:layout_span="value"

-> span 이란, 직역하자면 "(넓은 범위에 걸쳐) 포괄하다" 라는 의미이고 이 의미는 그대로 이 로직에 적용된다.

특정 셀을 선택해서 원하는 셀의 칸수 만큼 채워지게 할 수 있다. 예를 들어...

사진4

이렇게 사진4에 나와있는데로, 두번째 네번째 열(Row)의 마지막 셀(Columns)가 비어있다고 한다면,

 android:layout_span="2" 를 지정하고자 하는 셀에 입력해주면 "2"개의 셀 크기 만큼 채워지게 된다는 것이다.

밑의 사진5처럼 말이다.

사진5

테이블 레이아웃은 여기까지다. 

 

2. FrameLayout

사진6

 

FrameLayout이란 가장 상위에 있는 하나의 뷰 또는 뷰 그룹만 보여주는 레이아웃이다.

쉽게 말하면, 위 사진6과 같이 쌓여있는 카드 처럼 여러개의 뷰가 중첩적으로 쌓여있는 레이아웃인 셈이다.

이러한 레이아웃은 뷰를 전환하여 보여주는 방식에서 자주 사용된다.

 

우선 간단한 텍스트뷰를 이용해서 그 개념을 직관적으로 이해해보자,

 

사진7

 사진7에서는 <FrameLayout></FrameLayout> 안에 텍스트뷰 3개를 크기와 배경색을 다르게 하여 출력해보았다.

각각의 뷰들이 중첩 되어지는 모습을 볼 수 있다.