FrameLayout

FrameLayout이란?

Frame은 '액자'를 의미한다.

하나의 프레임 레이아웃에는 여러 View를 겹쳐서 넣은 용도로 사용하는데 각 View를 레이아웃의 위, 아래, 좌, 우 형태로 배치할 수 있다.

모든 레이아웃이 그렇듯 상단에서 하단으로 View를 읽어들이며 화면을 표현하므로 마지막에 추가된 레이아웃일수록 화면의 가장 앞에 보이게 된다.

FrameLayout의 목적?

FrameLayout은 화면의 일부 영역을 차단하여 View 등의 단일 항목만 표현하기 위해 만들어졌다.

여러 View를 동시에 표현할 수 있는 장점이 있지만 디바이스의 화면 비율(모바일이나 태블릿의 너비/높이 차이)에 따라

화면이 다르게 보이는 점 때문에 FrameLayout 내부에는 하나의 View를 두는 것이 화면 구성이 안정적이다.

하지만 특정 상황에 View를 겹쳐 표현해야 한다면 LinearLayout이나 RelativeLayout보다는 FrameLayout을 사용하는 것이 좋다.

FrameLayout의 유용성

레이아웃 중 처리 속도가 가장 빠르기 때문에 1개의 뷰만 표시할 때 등 단순한 형태에서 유용하게 사용할 수 있습니다.

또한 요소들을 중첩시킬 수 있기 때문에 각 요소들의 visibility를 조절하면서 다양한 기능을 구현할 수 있습니다.

그 예시로는 애니메이션 등이 있으며 이는 다른 안드로이드 공부 시간에 알아보겠습니다.

FrameLayout 사용해보기

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

        <TextView
            android:background="@color/purple_200"
            android:text="1번"
            android:gravity="bottom"
            android:textSize="30sp"
            android:layout_width="300dp"
            android:layout_height="300dp"/>

        <TextView
            android:background="@color/purple_700"
            android:text="2번"
            android:textSize="30sp"
            android:gravity="bottom"
            android:layout_width="200dp"
            android:layout_height="200dp"/>

        <TextView
            android:background="@color/teal_700"
            android:text="3번"
            android:textSize="30sp"
            android:gravity="bottom"
            android:layout_width="100dp"
            android:layout_height="100dp"/>

    </FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="@color/purple_200"
        android:text="1번"
        android:textSize="30sp" />

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="@color/teal_700"
        android:text="2번"
        android:textSize="30sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@color/purple_700"
        android:text="3번"
        android:textSize="30sp" />

</FrameLayout>