[안드로이드 스튜디오 강좌 #11] 테이블 레이아웃(Table Layout)

! 목표

표나 엑셀 시트와 같은 형태로 화면을 구성할 수 있는 테이블 레이아웃에 대해 알아보자

 

 

1. 테이블 레이아웃이란

테이블 레이아웃은 표나 엑셀 시트와 같은 형태로 화면을 구성하는 레이아웃이다.

 

테이블 레이아웃의 안에는 한 행을 의미하는 TableRow가 있고

TableRow 안에는 여러 개의 뷰가 들어가며, 이 뷰들은 열이 된다.

 

 

2. 실습

테이블 레이아웃을 직접 사용해보자.

 

새로운 xml 프로젝트를 생성한다.

 

최상위 레이아웃은 LinearLayout을 사용한다.

(Convert View에서 직접 TableLayout 사용 불가)

 

 

Palette 창에서 TableLayout을 찾아 추가하자.

한번에 4개가 생성되므로 하나는 지우고 3개만 남기자

 

각각 Component Tree에 있는 TableRow에 Button을 드래그해서 Button을 추가해보자.

 

 

뷰들은 열로, TableRow는 행의 역할을 하는 것을 확인할 수 있다.

 

 

TableRow의 외부값은 wrap_content로 설정이 되있고,

내부는 match_parent로 설정되어 있어서 하나의 행처럼 보이게 된다.

 

 

 

 

 

1) 열을 확장/축소(stretchCoulmns/shrinkCoulmns)

만약 버튼을 추가한 뒤에 남는 공간이 없도록 만들고 싶다면 <TableLayout>태그에 stretchColumns 속성을 추가하면 된다.

 

-XML 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns='0,1'>

 

android:stretchColumns="꽉 채우고 싶은 컬럼의 인덱스"

android:stretchColumns='0,1'로 사용하니 첫번쨰와 두번째 열이 남은 공간을 꽉 채운 것을 확인할 수 있다.

 

-디자인 화면

디자인 화면에서 추가하고 싶다면

Attribute탭에서 strectchCoulumns 속성을 찾아 직접 추가해주면 된다.

 

-shrinkCoulumns은 부모 컨테이너 폭에 맞춰 각 열의 폭을 강제로 축소한다.

 

 

 

2) layout_column/layout_span

-layout_column : column index를 직접 설정할 수 있게 해준다.

-layout_span : 뷰가 여러 column에 걸쳐 있도록 만들어준다. 뷰가 몇개의 칼럼을 차지하게 될 것인지 숫자로 나타내준다.

 

 

layout_column을 이용해서 두번째 행의 두번째 열을 세번째 열로 오도록 위치를 변경했다.

 

layout_span을 이용해서 첫번째 행의 첫번째 열이 세개의 열을 차지하게 하였다.

 

 

 

## 이 글은 허락을 받아 Do it 안드로이드 앱 프로그래밍을 참고해서 작성되었습니다.

도서에는 더 자세하고 알기 쉽게 설명이 되어 있어 도서를 참고하면서 공부하는 것을 추천드립니다.

도서 정보 : http://www.yes24.com/Product/Goods/15789466

Do it! 안드로이드 앱 프로그래밍

유투브 강의 : https://www.youtube.com/watch?v=nN4xnEcnjE8