[Android] 안드로이드 레이아웃 - GridLayout(그리드 레이아웃) 사용 방법

안녕하세요. 이번에는 GridLayout의 사용법을 알아보겠습니다.

 

앞서 설명했었던 것 처럼 Grid와 Table은 비슷한 Layout 입니다.

TableLayout의 사용법은 아래의 게시판에서 확인하실 수 있습니다.

[Android] 안드로이드 레이아웃 - TableLayout(테이플 레이아웃) 사용 방법

 

 

GridLayout은 TableLayout의 TableRow같은 View가 따로 없습니다.  그러면 GridLayout의 속성을 알아보겠습니다.

GridLayout의 속성

<!-- GridLayout의 속성 -->
android:rowCount="3"				<!-- 로우의 개수 지정 -->
android:columnCount="3"				<!-- 컬럼의 개수 지정 -->
android:orientation="horizontal"	<!-- View의 방향 지정 -->

<!-- GridLayout의 View 속성 -->
android:layout_column=""			<!-- view의 Column 지정 -->
android:layout_row=""				<!-- view의 Row 지정 -->
android:layout_columnSpan=""		<!-- view가 차지할 Column 수 -->
android:layout_rowSpan=""			<!-- view가 차지할 Row 수 -->
android:layout_columnWeight=""		<!-- view의 Column 가중치 -->
android:layout_rowWeight=""			<!-- view의 Row 가중치 -->

GridLayout은 TableLayout보다 속성이 많은데 예제를 통해 사용해 보도록 하겠습니다~!

 

GridLayout 예제

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2a222222"
    android:columnCount="3">

    <TextView
        android:id="@+id/view1"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:background="#7461ac"
        android:text="view1" />

    <TextView
        android:id="@+id/view2"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:background="#999999"
        android:text="view2" />

    <TextView
        android:id="@+id/view3"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:background="#a015bb"
        android:text="view3" />

    <TextView
        android:id="@+id/view4"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:background="#113366"
        android:text="view4" />

    <TextView
        android:id="@+id/view5"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:background="#77aa00"
        android:text="view5" />

    <TextView
        android:id="@+id/view6"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:background="#FF7AA0"
        android:text="view6" />

    <TextView
        android:id="@+id/view7"
        android:layout_row="2"
        android:layout_rowSpan="2"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:background="#FFE080"
        android:text="view7" />

    <TextView
        android:id="@+id/view8"
        android:layout_rowWeight="1"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_columnWeight="1"
        android:background="#7CF1D1"
        android:text="view8" />

    <TextView
        android:id="@+id/view9"
        android:layout_row="4"
        android:layout_rowWeight="1"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_columnWeight="1"
        android:background="#CBE886"
        android:text="view9" />
</GridLayout>

GridLayout에 columnCount값을 3을 줬습니다. 이렇게 3을 주게 되면 view가 자동으로 다음 row로 넘어가게 됩니다.

그리고 View들에게 각각 columnWeight와 rowWeight를 1씩 주어 View들이 화면에 꽉차도록 만들었습니다. 균등하게 View들을 배치하고 싶으시다면 columnWeight와 rowWeight 속성을 활용하시면 됩니다!

view7은 android:row="2", android:rowSpan="2"

view8은 androd:column="1", android:columnSpan="2"

view9는 android:row="3", android:column="1", android:columnSpan="2"

이렇게 설정하여 View들의 모양에 변화를 주었습니다.

여기서 주의할 점은 rowSpan을 설정하려면 row를 지정해 주어야하고, columnSpan을 사용하려면 해당 View의 Column을 지정해 주어야 합니다.

 

 

 

 

 

 

이번에는 GridLayout에 대해 알아보았습니다. TableLayout과 GridLayout 비슷하면서 다르다고 생각이 들지 않나요? 사용하다보면 이 디자인은 TableLayout이 편하겠구나 저 디자인은 GridLayout이 편하겠구나 느껴지실거에요.

다음에는 뷰들을 겹쳐 사용하는 FrameLayout에 대해 알아보겠습니다!!

 

다른 궁금한 점, 잘못된 점이 있다면 댓글을 남겨주세요!