'안드로이드 그리드레이아웃'에 해당되는 글 1건

안녕하세요. 제임스입니다. 

최근에 지속적으로 안드로이드 레이아웃에 대한 소개를 하고 있는데요. 

이번에는 GridLayout 에 대한 내용 정리 하겠습니다. 

■ GridLayout 이란?

안드로이드의 GridLayout 은 2차원 격자 무늬 형태의 레이아웃으로 수직, 수평의 라인으로 구성되어 행과 열의 집합 형태로 만들어 지는 레이아웃입니다. 

그리드 라인은 인덱스 (index) 로 참조 되며 좌상단에서 부터 0, 0 좌료값으로 시작하게 됩니다. 

안드로이드 API Level 14 에 추가된 레이아웃으로 LinearLayout 과 RelativeLayout 의 단점을 보완하기 위해 만들어 메모리 효율이 좋다고 알려 지긴 했는데요, 사실 격자형태의 레이아웃을 구성해야 하는 경우가 아니라면 쓸일이 없고, 단말기 성능이 좋아 지면서 레이아웃에 따른 메모리 효율성을 따지기는 어렵게 되었습니다. 

하지만 여전히 격자 형태의 레이아웃을 구성하는 앱을 개발해야 한다면 정말 매력적인 레이아웃임은 두말할 필요가 없습니다. 

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.GridLayout

■ GridLayout 속성

GridLayout 속성에 대해 알아 보겠습니다. 

◎ 부모뷰에서 주로 사용하는 속성

columnCount : 부모뷰가 가지고 있는 행의 수

rowCount : 부모뷰가 가지고 있는 열의 수

◎ 자식뷰에서 주로 사용하는 속성

layout_column : 자식뷰의 행 좌표 (layout_row 속성과 세트로 사용)

layout_row : 자식뷰의 열 좌표 (layout_column 속성과 세트로 사용)

layout_columnSpan : 행으로 차지하는 자리수 

layout_rowSpan : 열로 차지하는 자리수

layout_gravity : 자식뷰의 위치를 설정 하는 속성으로 셀의 중앙 / 좌 / 우 / 상단 / 하단 등의 속성 값을 지정

■ GridLayout 사용예

간단한 예제와 함께 사용 방법에 대해 알아 보겠습니다. 

첫번째 라인을 보면 숫자가 3 > 1 > 2 순으로 나열 되어 있습니다. 

코드는 아래와 같이 작성 했습니다. 

<Button
    android:text="1" />

<Button
    android:text="2" />

<Button
    android:layout_column="0"
    android:layout_row="0"
    android:text="3" />

세번째 버튼에 layout_column 및 layout_row 속성을 각각 0 으로 정의 했습니다. 

이는 임의로 개발자가 원하는 자식뷰를 특정 위치에 셋팅 하는 방식입니다. 

즉, 좌표값 0, 0 위치에 세번째 버튼을 배치함으로 인하여 자연스럽게 버튼 1, 2 번이 뒤로 밀려 나오게 됩니다. 

두번째 라인은 4, 5번 버튼 두개 밖에 없으며 5번 버튼이 두자리를 차지하고 있습니다. 

<Button
    android:layout_column="0"
    android:layout_row="2"
    android:text="4" />

<Button
    android:layout_column="1"
    android:layout_row="2"
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="5" />

4번 버튼에도 layout_column 및 layout_row 값을 0, 2 로 지정하여 첫번째 행의 두번째 열에 위치하게 했습니다. 

5번 버튼에도 layout_column 및 layout_row 값을 1, 2 로 지정하여 두번째 행의 두번째 열에 위치하게 했습니다. 

그리고 5번 버튼에 columnSpan 속성을 2로 지정하여 열을 두자리 만큼 차지 하라고 지정했습니다. 

HTML 을 사용해보신 분들을 익숙한 단어가 보이실겁니다. 다만 HTML 과 다른건 layout_gravity 를 fill 또는 fill_horizontal 로 지정을 해주지 않으며 원하는 만큼 자리를 차지 하지 않습니다. 

여기서 뭔가 이상한점이 보이지 않으신가요? 

layout_row 값이 2로 설정 되었는데 화면상에서는 2행에 있습니다. 

즉, layout_row 가 1인 자식뷰는 없는 레이아웃 구조 입니다. 

만약 위 코드에서 4번 버튼의 layout_row 값을 1로 설정하면 어떻게 될까요? 

<Button
    android:layout_column="0"
    android:layout_row="1"
    android:text="4" />

<Button
    android:layout_column="1"
    android:layout_row="2"
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="5" />

위와 같이 2행에는 4번 버튼만 존재하고 3행에 5번 버튼만 존재하게 됩니다. 

세번째 및 네번째 라인 은 6번 버튼이 첫번재 열을 두자리나 차지하고 있습니다. 

<Button
    android:layout_gravity="fill_vertical"
    android:layout_rowSpan="2"
    android:text="6"
    />
<Button
    android:text="7" />
<Button
    android:text="8" />
<Button
    android:text="9" />
<Button
    android:text="10" />

6번 버튼에 layout_rowSpan 을 2로 줬습니다. 열을 두자리 차지하라는 의미 인데요. 

위 5번 버튼과 동일하게 layout_gravity 속성을 지정해줘야 합니다. 여기서는 수직방향으로 두자리를 차지 하므로 fill 또는 fill_vertical 값을 꼭 지정해주셔야 합니다. 

다섯번째 및 여섯번째 라인은 12번 버튼이 2 x 2 만큼 자리를 차지하고 있습니다. 

<Button
android:text="11" />

<Button
android:layout_gravity="fill_horizontal|fill_vertical"
android:layout_columnSpan="2"
android:layout_rowSpan="2"
android:text="12" />

<Button
android:text="13" />

12번 버튼의 layout_columnSpan 과 layout_rowSpan 값을 각각 2 씩 줬습니다. 

행과 열을 2자리씩 차지하라는 의미 이며 수직 및 수평 방향으로 2자리씩 차지해야 하므로 fill_horizontal 및 fill_vertical 를 같이 사용해야 합니다. 그래서 파이프라인 "|" 을 이용하여 위와 같이 사용 하실 수 있으며 그냥 fill 하나만 사용해도 동일한 효과를 적용할 수 있습니다. 

xml 파일 전체 코드는 아래와 같습니다. 

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="3"
    android:rowCount="6"
    android:orientation="horizontal"
    android:background="#b6e686"
    android:layout_margin="10dp"
    >

    <Space />

    <!-- 1열 -->
    <Button
        android:text="1" />

    <Button
        android:text="2" />

    <Button
        android:layout_column="0"
        android:layout_row="0"
        android:text="3" />

    <!-- 2열 -->
    <Button
        android:layout_column="0"
        android:layout_row="2"
        android:text="4" />

    <Button
        android:layout_column="1"
        android:layout_row="2"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="5" />

    <!-- 3열 & 4열 -->
    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="2"
        android:text="6"
        />
    <Button
        android:text="7" />
    <Button
        android:text="8" />
    <Button
        android:text="9" />
    <Button
        android:text="10" />

    <!-- 5열 & 6열 -->
    <Button
        android:text="11" />

    <Button
        android:layout_gravity="fill_horizontal|fill_vertical"
        android:layout_columnSpan="2"
        android:layout_rowSpan="2"
        android:text="12" />

    <Button
        android:text="13" />

</GridLayout>

GridLayout 속성 값 중에 columnCount 및 rowCount 속성이 있습니다. 

각각 3 과 6으로 지정하여 3x6의 격자형 레이아웃을 생성 했습니다. 

위에 언급한 속성들 이외에도 

layout_margin, layout_padding, layout_columnWeight, layout_rowWeight, layout_background 등등 일반적인 자식뷰에서 사용할 수 있는 속성들은 거의 모두 사용할 수 있습니다. 

참고 하시면 좋을 것 같습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D