프레임 레이아웃 Frame Layout

이전에 설명한 선형 레이아웃(=Linear Layout)은 하위 뷰들을 나란히 배열할 뿐이지, 겹쳐서 배열할 수는 없었습니다.

 

하위 뷰들을 겹쳐서 배열하고 싶은 경우는 어떻게 할까요?

 

이러한 경우에는 프레임 레이아웃이나 상대적 레이아웃을 사용하면 되는데, 프레임 레이아웃의 목적 자체가 겹쳐서 뷰들을 보이기 위해 개발된 것이기에, 프레임 레이아웃 사용을 권장합니다.

 

Frame Layout은 하위 뷰들을 겹치도록 하는 기능을 합니다.

 

우선 아래의 코드와 결과 화면을 봅니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F44336"
            android:text="1단"
            android:textColor="@color/black"
            android:textSize="30dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FFEB3B"
            android:text="2단"
            android:textColor="@color/black"
            android:textSize="30dp" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#4CAF50"
            android:text="3단"
            android:textColor="@color/black"
            android:textSize="30dp" />


    </LinearLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp">

        <TextView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:background="#2196F3"
            android:text="1단"
            android:textColor="@color/black"
            android:paddingLeft="230dp"
            android:textSize="30dp" />

        <TextView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="#673AB7"
            android:text="2단"
            android:textColor="@color/black"
            android:paddingLeft="130dp"
            android:textSize="30dp" />


        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#CDDC39"
            android:text="3단"
            android:textColor="@color/black"
            android:textSize="30dp" />

    </FrameLayout>

</LinearLayout>

에뮬레이션 실행 결과

일반적인 Linear Layout의 경우, 위의 예시처럼 하위 뷰를 겹쳐서 보여주는 것이 아닌, 설정된 Orientation의 방향대로 수직 또는 수평으로 나란히 보여주게 됩니다.

 

하지만 Frame Layout을 사용하면, 하위 뷰를 겹쳐서 표현할 수 있습니다. Frame Layout 밑의 서로 다른 크기의 3가지 TextViewr가 겹쳐져 있는 것을 확인할 수 있습니다.

 

물론, 상대적 레이아웃(=Relative Layout)으로도 하위 뷰를 겹쳐서 표현할 수 있습니다.

 

아래의 사진처럼 결과물을 만든다고 가정합니다.

Relative Layout을 사용하면, 다음의 코드와 같습니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="#F44336" />

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:background="#03A9F4" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:background="#9C27B0" />

</RelativeLayout>

Frame Layout을 사용하면 다음과 같습니다.

반응형

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:background="#FF9800"/>

        <TextView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="#673AB7"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="#03A9F4"/>

    </FrameLayout>


</RelativeLayout>

Relative Layout을 사용하면, 각 하위 뷰마다 android:layout_centerInParent="true" 이런 식으로 속성값을 부여하여 크기가 다른 뷰들을 겹치게 할 수 있습니다.

 

Frame Layout의 경우, 우선 자체 부모 뷰의 속성을 android:layout_centerInParent="true" 이렇게 설정하여, 모든 하위 뷰들이 가운데에 올 수 있도록 합니다. 그리고 각 하위 뷰마다 android:layout_gravity="center" 이런식으로 Gravity 속성을 Center로 놓아 겹치게 할 수 있습니다.

 

상대적 레이아웃으로 뷰를 겹쳐서 표현하면, 그만큼 계산에 소모되는 메모리 소모가 있어서, 안드로이드가 XML파일 로딩 시에 프레임 레이아웃에 비해 속도가 비교적 느릴 수 있습니다.