07-3 겹쳐서 배치 - FrameLayout

FrameLayout이란?

뷰를 겹쳐서 출력하는 레이아웃 클래스이다.

카드를 쌓듯이 뷰를 추가한 순서대로 위에 겹쳐서 계속 출력한다. 다음은 FrameLayout에 버튼과 이미지를 추가한 예이다.

// FrameLayout에 버튼과 이미지 추가
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
    	android:layout_width="match_parent"
        android:laytout_height="wrap_content"
        android:text="BUTTON1" />
    <ImageView
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        anroid:src="@mipmap/ic_launcher" />
</FrameLayout>

실행해보면 버튼 위에 이미지가 겹쳐나온다.

FrameOut은 LinearLayout처럼 가로세로 방향으로 배치하지 않으며 RelativeLayout처럼 상대 위치를 조절하는 속성도 없다. 단순히 겹쳐서 출력하는 레이아웃이므로 특별한 속성도 없다.

똑같은 위치에 여러 뷰를 겹쳐서 놓고 어떤 순간에 하나의 뷰만 출력할 때 사용한다. 따라서 대부분 뷰의 표시 여부를 설정하는 visibility 속성을 함게 사용한다.

// visibility 속성 사용
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
    	android:layout_width="match_parent"
        android:laytout_height="wrap_content"
        android:text="BUTTON1" />
    <ImageView
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        anroid:src="@mipmap/ic_launcher" />
        android:visibility="invisible" // 이미지를 처음에는 보이지 않게 함
        android:clickable="true" // 얘는 뭐지
</FrameLayout>

이미지를 처음에는 보이지 않게 함. 처음에는 버튼만 보이다가 액티비티 코드에서 원하는 순간에 뷰의 visibility 속성값을 바꾸어 어떤 뷰를 보이고 숨길 지 조절한다.

// visibility 속성값을 바꾸는 액티비티 코드
class MainActivity : AppCompatActivity() {
    ovdrride fun onCreate(savedInstanceState: Bundle?) {
    	super.onCreate(savedInstanceState)
        
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        binding.button.setOnClickListener {
        	binding.button.visibility = View.INVISIBLE // 버튼은 숨기고
            binding.imageView.visibility = View.VISIBLE // 이미지는 보이도록 설정
        }
        binding.imageView.setOnClickListener {
        	binding.button.visibility = View.VISIBLE // 버튼은 보이고 
            binding.imageView.visibility = View.INVISIBLE // 이미지는 숨기도록 설정
        }
    }
}

onCreate가 ~~ 뭐였더라~~

 

FrameLayout은 탭 같은 기능을 만들 때 유용하다!