Design Palette 훑어보기 - Layout편

 안드로이드 UI를 빌드하면서 많은 View들이 포함될 것입니다. 그리고 이 View들은 하나 이상의 중첩된 Layout(View Grout)에 포함됩니다. 안드로이드는 수많은 Layout Class를 제공합니다. 직접 사용하거나 수정할 수 있고, 때로는 UI Layout을 직접 만들 수도 있습니다. 이번편에서는 안드로이드 SDK에서 제공하는 Layout Class를 살펴보겠습니다. Plaette의 Layouts에 있는 항목들 외에도 GridLayout과 RelativeLayout도 함께 알아보겠습니다.

 

Layout

 Layout은 루트 노드에 지정된 다양한 속성을 사용하여 모든 자식 노드가 배치되는 방식을 변경합니다. 특히 layout_width와 layout_height 속성은 모든 View에 필요합니다.

 

FrameLayout

 FrameLayout은 가장 단순한 형태의 레이아웃입니다. FrameLayout은 왼쪽 상단을 기본위치로하여 자식 뷰들을 하나하나 고정합니다. 위치는 layout_gravity 속성을 이용하여 변경할 수 있습니다. FrameLayout에서 여러 View를 추가하면 새 자식 View가 기존 View 위에 중첩되어 가려질 수 있습니다.

 

LinearLayout (horizontal, vertical)

 LinearLayout에서 자식 View들은 수직이나 수평으로 정렬됩니다. LinearLayout은 사용할 수 있는 공간 안에서 자식 View의 상대적 크기를 제어할 수 있도록 layout_weight 속성을 지원합니다.

 

RelativeLayout

 NativeLayout 중에서 가장 유연하다고 할 수 있지만 렌덜ㅇ이 부담되는 상대적 레이아웃은 자식 뷰들의 상대적인 위치나 레이아웃 경계를 기준으로 한 자식 뷰의 위치를 정의합니다.

 

ContraintLayout

 최신 Layout이자 가장 권장되는 Layout입니다. ConstraintLayout은 복잡하고 큰 레이아웃을 중첩시키지 않고 배치하기 위해서 고안되었습니다. 상대적 레이아웃과 유사하지만 그보다는 유연성과 효율성이 좋습니다. ConstraintLayout은 일련의 제약에 따라 자식 View들을 배치합니다.

 

ConstraintLayout이 왜 효율적일까?

 View를 화면에 렌더링할 때는 측정 단계(measure pass), 레이아웃 단계(layout pass), 그리기 단계(draw pass)의 순서로 진행됩니다.

 우선 측정 단계에서는 ViewGroup(Layout)에 포함된 자식 View들의 계층 구조를 상하로 따라가면서 각 VIewGroup과 자식 View들의 크기를 측정합니다.

 그 다음 레이아웃 단계에서는 또 다시 View 계층 구조를 상하로 따라가면서 측정 단계에서 결정된 각 View의 크기를 사용하여 각 ViewGroup에 배치할 자식 View들의 위치를 결정합니다.

 마지막으로 그리기 단계에서는 또 다시 View 계층 구조를 상하로 따라가면서 각 View 객체에 대한 그리기 명령들을 GPU로 전송하기 위해 Canvas 객체를 생성합니다. 이때 각 명령에는 이전의 두 단계에서 시스템이 결정했던 ViewGroup과 자식 View 객체들의 크기와 위치가 포함됩니다.

 Constraint Layout은 부모 Layout 안에 또 다른 Layout을 중첩시킬 필요가 없어서 평면적인 View 게층 구조가 됩니다. 따라서 Layout을 화면에 렌더링 할 때 필요한 측정 단계와 레이아웃 단계의 처리 횟수가 감소하므로 더 효율적입니다.

TableLayout, TableRow

 TableLayout은 테이플 형태로 자식 View들을 배치합니다. TableLayout은 TableRow을 자식으로 가지고 TableRow는 TextView 등을 자식으로 가질 수 있습니다. 

 

GuideLine (Horizental, Vertical)

 GuideLine은 View의 배치를 도와주기 위해 ConstraintLayout내에서 사용됩니다. 화면을 분할하는 기준선 정도로 이해하시면 되겠습니다.

app:layout_constraintGuide_begin을 이용하여 기준선의 시작점을 설정할 수 있고

app:layout_constraintGuide_end를 이용하여 기준선의 끝점을 설정할 수 있습니다.

app:layout_constraintGuide_percent를 이용하여 화면의 비율로도 설정할 수 있습니다.

 

GridLayout

 GridLayout은 TableLayout의 단점을 극복합니다. TableLayout은 여러 View가 중첩되있는 형태인 반면 GridLayout은 이를 해소하여 렌더링의 부담을 줄였습니다.

 app:rowCount: GridLayout의 행의 수를 지정합니다.

 app:columnCount: GridLayout의 열의 수를 지정합니다.

 GridLayout은 각 자식 View에서 app:layout_row와 app:layout_column을 사용해서 행렬처럼 좌표값을 사용할 수 있습니다.

 

Space

 Space 위젯은 아무 View도 포함하지 않는 빈 공간을 의미합니다. 상황에 따라 유용하게 사용하여 다른 View들의 배치에 도움을 줄 수 있습니다.

 

 

 위 사진은 ConstraintLayout에 TableLayout, GridLayout, GuideLine, Space를 적용한 것입니다.

 

<!-- ConstraintLayout, TableLayout, GridLayout, Gridline, Space xml Code -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <!-- 2개의 Guideline 설정 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />


    <!-- TableLayout -->
    <TableLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/guideline"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/guideline2"
        android:stretchColumns="*">

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:gravity="center"/>

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:gravity="center"/>
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:gravity="center"/>

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:gravity="center"/>
        </TableRow>


    </TableLayout>

    <!-- Space -->
    <Space
        android:id="@+id/space"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        app:layout_constraintTop_toTopOf="@id/guideline"
        app:layout_constraintLeft_toLeftOf="@id/guideline2"
        app:layout_constraintBottom_toTopOf="@id/gridlayout"
        android:background="@color/colorAccent"/>

    <!-- [2][2]의 GridLayout -->
    <androidx.gridlayout.widget.GridLayout
        android:id="@+id/gridlayout"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/space"
        app:layout_constraintLeft_toLeftOf="@id/guideline2"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="244dp"
        app:columnCount="2"
        app:rowCount="2">

        <!-- 자식 View의 좌표값 0, 0 -->
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[0] [0]"
            app:layout_column="0"
            app:layout_row="0" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[0] [1]" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[1] [0]" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[1] [1]" />
    </androidx.gridlayout.widget.GridLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 이 글은 리토마이어, 이안 레이크, 『Professional Android』, Jpup을 참조하였습니다.