[모든 팔레트 정복] 7. Layout(레이아웃) - FrameLayout

안녕하세요? 닉네임간편입니다. 이번 시간에는 레이아웃 중 FrameLayout에 대해서 알아보겠습니다.

1. 정의

FrameLayout은 앞서 LinearLayout과 마찬가지로 마치 스택처럼 순서대로 쌓이는 구조입니다. 그러나 LinearLayout이 수평 혹은 수직 방향으로 하위 요소들을 쌓아서 배치하는 반면, FrameLayout은 기존 요소를 새로운 요소가 '덮으면서' 쌓입니다.

즉, 자식 뷰는 가장 나중에 추가된 뷰가 가장 위에 표시되며, 이전에 추가되었던 뷰들은 나중에 추가된 뷰들과 중첩되어 화면에 표시되지 않을 수 있습니다.

그러나 그렇기에 자식 뷰를 중첩해서 사용해야 할 때 활용할 수 있습니다.

아래 첫 번째 그림을 보면 뷰는 view1부터 시작해 view3까지 쌓였지만, 화면에는 오직 view3만 보이는 걸 확인할 수 있습니다.

이때 뷰의 visiblility를 이용해 새로운 요소를 보이지 않게 한 후 기존 요소가 보일 수 있도록 조절할 수 있습니다. 위 두 번째 그림을 보면 view3의 visiblility를 invisible로 설정하였더니 view2가 보이는 걸 확인할 수 있습니다.

visibility는 단어 그대로 뷰의 가시 상태이며, 보이도록 하는 visible, 보이지 않도록 하는 invisible, 마치 사라진 것처럼 하는 gone이 있습니다.

[activity_main]

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

    <TextView
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view1"
        android:textSize="35sp"
        android:gravity="center"/>

    <TextView
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view2"
        android:textSize="35sp"
        android:gravity="center"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view3"
        android:textSize="35sp"
        android:layout_gravity="end"
        android:visibility="invisible"
        android:gravity="center"/>

</FrameLayout>

2. 유용성

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

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

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

3. 위치 지정 방법

프레임 레이아웃은 원래 화면에 오직 하나의 아이템만 표시하기 위해 영역을 차단하는 것으로 설계되었습니다. 그러나 gravity를 각각의 자식 뷰에 할당하는 것으로 자식 뷰들의 위치를 조절할 수 있습니다. 이때 layout_gravity가 사용됩니다.

아래 그림을 보면 각각 layout_gravity를 view2는 "center_horizontal"로, view3는 "end"로 설정한 모습입니다. 이제는 화면에 모든 뷰가 다 보이는 것을 확인할 수 있습니다.

[activity_main]

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

    <TextView
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view1"
        android:textSize="35sp"/>

    <TextView
        android:id="@+id/view2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view2"
        android:textSize="35sp"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="25dp"
        android:background="@color/teal_200"
        android:text="view3"
        android:textSize="35sp"
        android:layout_gravity="end"/>

</FrameLayout>

4. FrameLayout의 크기 계산

FrameLayout의 크기는 가장 큰 자식 요소의 크기와 padding을 더한 값이 됩니다. 이때 앞서 visibility를 invisible로 설정한 자식 뷰는 크기를 계산하는 데 고려되지만, gone으로 설정된 자식 뷰는 계산하는 데 고려되지 않을 수도 있습니다. 만일 setMeasureAllChildren() 메서드를 false로 설정하면 현재 visibility가 gone인 뷰는 크기에 고려되지 않습니다. 또한 기본적으로 false가 설정됩니다.

5. 마무리

이번 시간에는 FrameLayout에 대해서 알아보았습니다.

실제로도 프레임 레이아웃은 슬라이딩 애니메이션을 구현하거나 혹은 이미지에 겹쳐서 다채로운 이미지를 표현할 때도 사용됩니다. 따라서 이번 시간에 잘 정리되었으면 좋겠습니다.