Xamarin.Android GridLayout

아티클
02/06/2018

아래 GridLayout 와 같이 HTML 테이블과 유사하게 2D 그리드에서 뷰를 배치할 수 있도록 지원하는 새 ViewGroup 하위 클래스입니다.

GridLayout 는 자식 뷰가 있어야 하는 행과 열을 지정하여 그리드에서 위치를 설정하는 플랫 뷰 계층 구조와 함께 작동합니다. 이렇게 하면 GridLayout은 중간 뷰가 TableLayout 에 사용된 테이블 행에 표시되는 것과 같은 테이블 구조를 제공할 필요 없이 그리드에 뷰를 배치할 수 있습니다. 플랫 계층 구조를 기본 GridLayout은 자식 보기를 보다 신속하게 레이아웃할 수 있습니다. 코드에서 이 개념이 실제로 무엇을 의미하는지 설명하는 예제를 살펴보겠습니다.

그리드 레이아웃 만들기

다음 XML은 GridLayout에 여러 TextView 컨트롤을 추가합니다.

<?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:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip" />
</GridLayout>

레이아웃은 다음 다이어그램과 같이 셀이 내용에 맞을 수 있도록 행과 열 크기를 조정합니다.

그러면 애플리케이션에서 실행할 때 다음과 같은 사용자 인터페이스가 생성됩니다.

방향 지정

위의 XML에서는 각각 TextView 행 또는 열을 지정하지 않습니다. 이러한 보기를 지정 GridLayout 하지 않으면 방향에 따라 각 자식 뷰를 순서대로 할당합니다. 예를 들어 GridLayout의 방향을 다음과 같이 기본값(가로)에서 세로로 변경해 보겠습니다.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="2"
        android:columnCount="2"
        android:orientation="vertical">
</GridLayout>

GridLayout 이제 아래와 같이 셀을 왼쪽에서 오른쪽이 아닌 각 열의 위쪽에서 아래쪽으로 배치합니다.

그러면 런타임에 다음과 같은 사용자 인터페이스가 생성됩니다.

명시적 위치 지정

자식 뷰의 위치를 명시적으로 제어하려는 경우 해당 layout_row 뷰GridLayout와 layout_column 특성을 설정할 수 있습니다. 예를 들어 다음 XML은 방향에 관계없이 첫 번째 스크린샷(위에 표시됨)에 표시된 레이아웃을 생성합니다.

<?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:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="1" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="1"  />
</GridLayout>

간격 지정

의 자식 보기 사이에 간격을 제공하는 몇 가지 옵션이 있습니다 GridLayout. 아래와 같이 특성을 사용하여 layout_margin 각 자식 보기에서 직접 여백을 설정할 수 있습니다.

<TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_margin="10dp" />

또한 Android 4에서는 이제 호출 Space 된 새로운 범용 간격 보기를 사용할 수 있습니다. 이를 사용하려면 자식 보기로 추가하기만 하면 됩니다. 예를 들어 아래 XML은 행을 3으로 GridLayout 설정 rowcount 하여 행을 추가하고 간격을 제공하는 뷰를 TextViews추가합니다Space.

<?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:rowCount="3"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"         
            android:layout_height="50dp" />    
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="1" />
</GridLayout>

이 XML은 아래와 같이 간격을 GridLayout 만듭니다.

새 Space 뷰를 사용할 경우의 이점은 간격을 허용하며 모든 자식 보기에서 특성을 설정할 필요가 없다는 것입니다.

열 및 행 스패닝

GridLayout 또한 여러 열과 행에 걸쳐 있는 셀도 지원합니다. 예를 들어 아래와 같이 단추가 포함된 다른 행을 GridLayout 추가한다고 가정해 보겠습니다.

<?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:rowCount="4"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"        
            android:layout_height="50dp" />   
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"        
            android:layout_row="2"        
            android:layout_column="1" />
     <Button
            android:id="@+id/myButton"
            android:text="@string/hello"        
            android:layout_row="3"
            android:layout_column="0" />
</GridLayout>

그러면 단추의 GridLayout 크기를 수용할 수 있도록 첫 번째 열이 늘어나게 됩니다.

첫 번째 열이 늘어나지 않도록 단추를 설정하려면 다음과 같이 열 간격을 설정하여 두 열에 걸쳐 단추를 설정할 수 있습니다.

<Button
    android:id="@+id/myButton"
    android:text="@string/hello"       
    android:layout_row="3"
    android:layout_column="0"
    android:layout_columnSpan="2" />

이렇게 하면 아래와 같이 단추가 아래쪽에 추가되어 이전의 레이아웃과 비슷한 레이아웃 TextViews 이 GridLayout 생성됩니다.

다음을 통해 공유