[Android] FrameLayout : 화면에 보여주는 뷰를 바꿔서 표현하는 레이아웃

날짜:


 



이 친구는 뭐랄까... 굉장히 단순해 보이는데 복잡한 레이아웃입니다. Frame의 뜻이 "액자" 인데, 한마디로 액자에 사진을 넣고 빼는 것처럼 뷰를 넣었다 뺐다 (실제로는 보였다가 안 보였다가) 하면서 바꾸는 방식입니다. LinearLayout이나 기타 다른 뷰들도 가능은 하지만, FrameLayout으로 표현하는 게 좀 더 깔끔하긴 합니다. 아, 물론 ConstraintLayout을 사용하면 더 보기 좋고 깔끔하게 표현할 수 있습니다. 그래도 사용하는 프로젝트가 있기는 하니 한번 보고 갑시다.




FrameLayout 

위에서 얘기했듯이 뷰를 넣었다 뺐다 하는 방식을 표현하기에 적합한 레이아웃입니다. 액자에 사진을 넣는 것을 생각하면 이해가 될 것 같네요. 심지어 액자에 사진을 여러 장 겹쳐서 넣을 수도 있죠? (물론 현실에선 우겨 넣으면 찢어질 수 있습니다..) 그런 느낌으로 보면 편할 것 같네요. 즉 아래 사진과 같이 여러 뷰들을 겹칠 수 있습니다. 

그럼 이렇게 구성해놓고 어디에 쓸 수 있을까요? 사실 다양한 용도로 사용할 수 있습니다. 그래도 예를 들어 본다면, 위에서도 얘기했지만, 버튼을 눌렀을 때 화면에 보이는 뷰를 바꿔주게끔 만들 수 있습니다. 

가령, 정말 조잡한 방법이지만, Bottom Navigation Bar에서 버튼을 눌렀을 때 Fragment를 전환하는 방법과 유사하게 만들 수 있습니다. Fragment의 기능을 흉내내는 View를 여러개 만들고, 바텀 내비게이션 뷰의 버튼을 눌렀을 때 뷰의 메서드인 setVisibility를 이용해 특정 뷰의 Visible 속성을 true로 바꾸고, 나머지 뷰들의 Visible 속성을 false로 바꾸는 식으로 말입니다. 물론 이런 식으로 만들었다간... 좀 그렇겠죠? 어쨌든 뷰를 간단히 전환하는 여러 방법에 사용할 수 있습니다.







layout_gravity - FrameLayout 내 뷰의 배치

위의 사진을 다시 보면 뷰들이 왼쪽 구석으로 몰려있는 것을 확인할 수 있습니다. 그럼 FrameLayout 내에서 뷰를 어떻게 배치할 수 있을까요?

여기서 layout_gravity의 속성을 변경해서 뷰의 위치를 변경할 수 있으며, 이 때 Left, Right, Center, Top, Bottom 값을 사용하게 됩니다. 그리고 해당 값들을 적절히 조합하면 9개의 방향 중 하나에 배치할 수도 있는데요, 가령 layout_gravity를 Left|Center로 하면 화면의 가운데에서 왼쪽, 즉 숫자 키패드를 생각하면 4번의 위치에 정렬됩니다. 아래의 사진을 통해 값을 조합에 따른 위치를 확인할 수 있습니다.


<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button7"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="left|top"
            android:text="left|top" />

        <Button
            android:id="@+id/button8"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center|top"
            android:text="center|top" />

        <Button
            android:id="@+id/button9"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="right|top"
            android:text="right|top" />

        <Button
            android:id="@+id/button10"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="left|center"
            android:text="left|center" />

        <Button
            android:id="@+id/button11"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:text="center" />

        <Button
            android:id="@+id/button12"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="right|center"
            android:text="right|center" />

        <Button
            android:id="@+id/button13"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="left|bottom"
            android:text="left|bottom" />

        <Button
            android:id="@+id/button14"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center|bottom"
            android:text="center|bottom" />

        <Button
            android:id="@+id/button15"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="right|bottom"
            android:text="right|bottom" />
    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>




마치며..

사실 이 친구는 ConstraintLayout을 사용하면 충분히 대체 가능한 레이아웃이라 굳이 써야하나? 라는 느낌도 드네요. 그렇게 따지면 다른 레이아웃도 충분히 대체 가능하지만.. 그래도 여러 형태의 앱을 디자인하는데 좋은 레이아웃이라 많이 사용했던 것 같습니다. 어쨌든 알아두면 언젠가 써먹겠죠. 

역시 아주 간단하게만 설명한 것이라 빠진 것이나 뭔가 잘못된 부분이 있을 수도 있습니다. 그런 점에 대해서 알고 계신다면 알려주신다면 기쁜 마음으로 피드백 받겠습니다. 많이 도와주세요. 그럼 모두 즐거운 코딩하세요!






댓글

댓글 쓰기