안드로이드 스튜디오 프레임 레이아웃(FrameLayout) & 뷰 전환하기

안녕하세요.  이 번에 알아볼 것은 프레임 레이아웃과 함께 뷰를 전환시켜보겠습니다.

 

프레임 레이아웃도 가장 기본적이고 단순한 레이아웃이라서 배우는데 어려움이 없으실 겁니다.

 

프레임 레이아웃은 한 번에 하나의 뷰만 보여주기 때문에 단순한 레이아웃이며,

 

뷰를 하나 이상 추가할 경우 추가된 순서대로 차곡차곡 쌓이기 때문에

 

나중에 쌓인 뷰만 화면에 보이게 됩니다.

 

이렇게 보이거나 보이지 않게 하는 속성이 가시성(Visibility) 속성입니다.

 

그래서 프레임 레이아웃은 여러 개의 뷰를 서로 전환할 때 사용되는 레이아웃입니다.

 

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">

<Button
android:id="@+id/btn_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="누르면사진이바뀜"
android:onClick="onbtn_testClicked"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ImView1"
android:src="@drawable/view2"
android:visibility="invisible"/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ImView2"
android:src="@drawable/view1"
android:visibility="invisible"/>

</FrameLayout>


</LinearLayout>

 

 

----------------------------------------MainActivity.java소스---------------------------------------

 

 

 

package com.example.testframelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

ImageView ImView1;
ImageView ImView2;

int imageIndex = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ImView1 = findViewById(R.id.ImView1);
ImView2 = findViewById(R.id.ImView2);
}

public void onbtn_testClicked(View v) {
changeImage();
}
private void changeImage() {
// 첫번째 이미지뷰 설정
if (imageIndex ==0) {
ImView1.setVisibility(View.VISIBLE);
ImView2.setVisibility(View.INVISIBLE);

imageIndex = 1;

// 두번째 이미지뷰 설정
}else if (imageIndex==1){
ImView1.setVisibility(View.INVISIBLE);
ImView2.setVisibility(View.VISIBLE);

imageIndex = 0;
}
}
}

 

 

 

 

버튼클릭전

급하게 작성하느라 사진이 허접한 점 죄송합니다..ㅜㅜ 위에는 버튼을 누르기 전 사진입니다. 

 

 

 

버튼클릭후

버튼을 누르게 되면 이렇게 뷰가 전환이 되는 걸 확인할 수 있습니다.

 

프레임 레이아웃을 응용하게 되면 더욱 완성된 레이아웃을 구성할 수 있습니다.

 

수고하셨습니다.