큰 화면에서의 풍부한 UI지원과 Layout 중첩을 낮추기 위한 새로운 레이아웃 GridLayout

수평또는 수직축으로 정렬해 사용하는 LinerLayout은 안드로이드의 레이아웃에서 가장 흔히 사용되고 있다. 이런 레이아웃 구조는 중첩이 너무 심해 성능에서 영향을 미친다. RelativeLayout으로 상대 View를 기준으로 정렬 하게 된다면 이런 중첩 구조를 막을 수는 있지만 레이아웃 속성이 상당히 복잡해지고 보기도 힘들어 진다. 이런 문제점을 해결하기위해 안드로이드 4.0(ICS)부터 도입된 GridLayout을 소개 하겠다. GridLayout을 이용하게 되면 간단한 구조로 덜 중첩되게 할 수 있다.

GridLayout은 간단하게 말해서 화면에 가상으로 가로, 세로의 셀을 만든다음 해당되는 셀 위치에 View를 순서대로 또는 원하는 위치에 배치하게 되는 구조로 TableLayout과는 비슷한 형태이지만 셀을 순서대로 배치한다는 점이 다르다.

GridLayout은 기본적으로 LinerLayout과 같은 xml규칙을 사용하기때문에 간단하고 쉽게 사용가능하다. 또한 내부적으로 레이아웃 사이즈를 지정하기 때문에 layout_width, layout_height을 지정 할 필요가 없다.  Android 4.0부터 지원하지만 SupportLibrary v7을 사용한다면 Android 2.1이상 버전에서도 지원가능하다. 

GridLayout 주요 속성

android:orientation="horizontal"  → 배치방향

android:useDefaultMargins="true”  → 자동 마진값 사용, false이면 마진값은 0

android:alignmentMode="alignBounds"  → ChildView의 정렬 기준

android:columnOrderPreserved="false"  → 열의 인덱스의 오름차순으로 배치 여부

android:rowOrderPreserved="false"  → 행의 인덱스의 오름차순으로 배치 여부

android:columnCount="4"  → 열(가로) 최대 갯수

android:rowCount="4"  → 행(세로) 최대 갯수

GridLayout ChildView 주요속성

android:layout_column="2"  → 열 좌표

android:layout_row="2"  → 행 좌표

android:layout_cloumnSpan="2"  → ChildView가 차지할 열 수

android:layout_rowSpan="2"  → ChildView가 차지할 행 수 

android:gravity="left|baseline"  → ChildView의 정렬 방식

행, 열의 갯수에 비해 Span의 갯수가 맞지 않는다면 예외가 발생하니 잘 계산해서 레이아웃 작업을 해야 한다.

예제

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" >

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="*" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />

    <Button android:text="-" />

    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" />

    <Button android:text="00" />

    <Button
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="=" />

</GridLayout>

일반적으로 사용하는 계산기의 레이아웃을 GridLayout으로 구현해보았다. 아주 심플하고, 중첩되지 않는 구조로 레이아웃을 작성 할 수 있다.  기존의 LinerLayout으로 작성하였다면 훨씬 많은 코드와 수정시 이로인한 많은 비용이 들어갔을 것이다.

성능과 유지/보수를 위해 GridLayout의 선택은 선택이 아닌 필수라고 생각 한다.