FrameLayout

이번 글에서는 Frame Layout에 대해서 알아보도록 하자.

FrameLayout은 Flutter의 Stack 기능을 갖추고 있는 레이아웃이다.

Flutter에서는 여러 위젯을 겹쳐서 UI를 보여주고 싶을 때 Stack을 사용하면 된다. Children 값의 Widget을 배열로 쌓아주면 되는데, Kotlin에서는 FrameLayout이 이러한 기능을 수행해준다.

가볍게 사용해 보니 Flutter의 Stack과 똑같았다.

xml (FrameLayout)

FrameLayout으로 만들어 주고 가로와 높이는 디바이스 최대폭으로 설정해 주었다. 이젠 Layout안에 뷰를 배치해주면 순서대로 뷰가 쌓이는 것을 볼 수 있다.

<FrameLayout
    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"
    android:background="@color/teal_200"
    tools:context=".MainActivity">
  
  ...
  
</FrameLayout>

<ImageView
        android:background="@color/white"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="300dp"/>

    <TextView
        android:layout_marginTop="300dp"
        android:layout_marginLeft="200dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:textSize="40sp" />

    <Button
        android:layout_marginTop="400dp"
        android:text="Button"
        android:layout_width="200dp"
        android:layout_height="100dp" />

    <ImageView
        android:layout_gravity="center"
        android:background="@color/purple_200"
        android:layout_width="50dp"
        android:layout_height="100dp"/>

마무리

가볍게 FrameLayout에 대해서 알아보았다. FrameLayout은 뷰를 한 개만 배치 시킨다고 할 때에 다른 레이아웃에 비해 UI 성능이 가장 좋다고 한다.

FrameLayout으로 다양한 UI를 시도해 볼 수 있을 것 같다.