레이아웃을 활용한 다양한 뷰 배치 - TableLayout, GridLayout

TableLayout

뷰를 테이블 구조로 배치하는 레이아웃. TableRow로 행을 관리한다.

예제

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

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

tools:context="com.kimjungkwon.layouttestlast.MainActivity">

<TableRow>

<Button android:text="7"/>

<Button android:text="8"/>

<Button android:text="9"/>

</TableRow>

<TableRow>

<Button android:text="4"/>

<Button android:text="5"/>

<Button android:text="6"/>

</TableRow>

<TableRow>

<Button android:text="1"/>

<Button android:text="2"/>

<Button android:text="3"/>

</TableRow>

</TableLayout>

GridLayout

TableLayout과 비슷하지만 TableRow를 굳이 만들어주지 않아도 된다. 또 LinearLayout처럼 가로나 세로 방향으로 나열되지만 GridLayout은 columnCount를 통해서 자동 개행 기능을 사용할 수 있다. 단, orientation이 vertical인 경우에는 rowCount로 자동 개행을 제어한다. 또 rowSpan과 columnSpan을 통해서 원하는 공간을 비울 수도 있다.

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

android:columnCount="2"> // 2개의 버튼이 나오면 자동으로 개행하게 만든다

<Button android:text="1"/>

<Button android:text="2"/>

<Button android:text="3"/>

<Button android:text="4"/>

<Button android:text="5"/>

<Button android:text="6"/>

</GridLayout>

자동으로 정해진 버튼 수를 채우면 개행이 된 모습

계산기 실습

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1" />

<LinearLayout

android:layout_gravity="center"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

<GridLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:rowCount="4">

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="7" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="4" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="1" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="." />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="8" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="5" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="2" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="0" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="9" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="6" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="3" />

<Button

android:paddingBottom="20dp"

android:paddingTop="20dp"

android:text="=" />

</GridLayout>

<GridLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:rowCount="5">

<Button

android:text="DEL"

android:textSize="12dp" />

<Button android:text="+" />

<Button

android:text="x"

android:textSize="9dp" />

<Button

android:text="-"

android:textSize="20dp" />

<Button android:text="/" />

</GridLayout>

</LinearLayout>

</LinearLayout>