[Android] 안드로이드 레이아웃 - FrameLayout(프레임 레이아웃) 사용 방법

이번에는 View들을 겹쳐서 사용하도록 제작된 FrameLayout을 사용해 보도록 하겠습니다.

 

FrameLayout은 속해 있는 View들을 중첩시켜 놓고 내가 원하는 View를 상단에 표시하기 위해 사용되는 Layout입니다. 

구글에서도 FrameLayout은 하나의 View만 표시되도록 권고하고 있습니다. 그러면 속성을 알아보겠습니다.

 

FrameLayout의 속성

<!-- 자녀 View 속성 -->
android:layout_gravity="top"

<!-- layout_gravity 값 "|"를 사용해서 중첩가능-->
top					<!-- 상단 배치 -->
bottom				<!-- 하단 배치 -->
left				<!-- 왼쪽 배치 -->
right				<!-- 오른쪽 배치 -->
start				<!-- 시작 배치 -->
end					<!-- 끝 배치 -->
center				<!-- 중앙 배치 -->
center_vertical		<!-- 세로 중앙 배치 -->
center_horizontal	<!-- 가로 중앙 배치 -->
fill				<!-- 가득 채움 -->
fill_vertical		<!-- 세로 방향 가득 채움 -->
fill_horizontal		<!-- 가로 방향 가득 채움 -->

FrameLayout은 하나의 View만 표시되도록 만들어졌기 때문에 FrameLayout만의 속성은 없습니다. layout_gravity는 FrameLayout이 아니라 다른 Layout에 속해있는 View들도 사용 가능한 속성입니다.

FrameLayout 예제

FrameLayout에서는 특별한 속성이 없기 때문에 View 1 ~ 5까지 순서대로 나타내는 예제를 구현하였습니다.

 

먼저 activity_main.xml입니다.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp">

        <TextView
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#A2F893"
            android:gravity="center"
            android:text="View1" />

        <TextView
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#8EFFE5"
            android:gravity="center"
            android:text="View2"
            android:visibility="gone" />

        <TextView
            android:id="@+id/view3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#839DB8"
            android:gravity="center"
            android:text="View3"
            android:visibility="gone" />

        <TextView
            android:id="@+id/view4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#BEC0EC"
            android:gravity="center"
            android:text="View4"
            android:visibility="gone" />

        <TextView
            android:id="@+id/view5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#BD92D8"
            android:gravity="center"
            android:text="View5"
            android:visibility="gone" />
    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnLeft"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:enabled="false"
            android:text="left" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnRight"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:enabled="true"
            android:text="right" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

다음은 MainActivity.kt입니다.

class MainActivity : AppCompatActivity(), View.OnClickListener {

    private val binding by lazy { ActivityFrameBinding.inflate(layoutInflater) }
    private var position = 0
    private lateinit var arrayView: Array<TextView>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        arrayView = arrayOf(binding.view1, binding.view2, binding.view3, binding.view4, binding.view5)

        binding.btnLeft.setOnClickListener(this)
        binding.btnRight.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v) {
            binding.btnLeft -> {
                arrayView[position].isVisible = false
                position--
                arrayView[position].isVisible = true
                if (position == 0) {
                    binding.btnLeft.isEnabled = false
                }
                if (position == 3) {
                    binding.btnRight.isEnabled = true
                }
            }
            binding.btnRight -> {
                arrayView[position].isVisible = false
                position++
                arrayView[position].isVisible = true
                if (position == 4) {
                    binding.btnRight.isEnabled = false
                }
                if (position == 1) {
                    binding.btnLeft.isEnabled = true
                }
            }
        }
    }
}

 먼저 배열의 Index로 사용할 position 변수를 선언해 주고 View 1 ~ 5까지를 배열로 추가해줍니다. 그리고 Left버튼, Right버튼의 ClickListener를 지정해 줍니다.

 Listener에서 Left버튼을 눌렀을 때는 기존 Index의 View를 isVisible = false를 주어 gone처리합니다. 그리고 Index를 1 감소시켜 준 후 해당하는 View를 isVisible = true를 주어 Visible 처리를 해줍니다. 그리고 만약에 index가 0이 되었을 경우 더 이상 Left를 하지 못하도록 isEnabled = false를 주어 비활성화(Disable)하여 줍니다. 또 마지막 index에서 Left버튼을 눌렀을 때 비활성화(Disable)가 되어있을 Right버튼을 활성화(Enable) 해줍니다.

 다음 Right버튼을 눌렀을 때는 Left버튼과 반대로 index는 1 증가, 마지막 Index가 되었을 경우 Right버튼을 Disable, Index가 0에서 증가하였을 경우는 Left버튼을 Enable 해 줍니다.

 

저는 디자인할 때 FrameLayout은 다른 Layout들로 대체가 가능하기 때문에 FrameLayout은 사용하지 않습니다. 사용하지 않는 것이 맞다라고 할 수는 없기 때문에 경우에 따라 사용하시면 될 듯합니다!

 

이번에는 FrameLayout에 대해 알아보았습니다. 다른 궁금한 점, 잘못된 점이 있다면 댓글을 남겨주세요!