[안드로이드] 프레임 레이아웃과 뷰의 전환

프레임 레이아웃과 뷰의 전환

프레임 레이아웃 (Frame Layout)

• 뷰를 여러개 추가하게 되면, 나머지 뷰들이 가장 마지막에 추가한 뷰 아래 쪽에 중첩되어 쌓이게 된다.
• 뷰를 보여주거나 안보여줄 수 있는 속성을 가시성, visibility 속성 라고 한다.
• FrameLayout은 가시성 속성과 함께 사용하게 된다.
• 뷰들을 여러개 담아놓고 중첩시킬 때 주로 사용하게 된다.

프레임 레이아웃 실습

• 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"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      >
  
      <Button
          android:id="@+id/Button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentStart="true"
          android:layout_alignParentTop="true"
          android:onClick="onButton1Clicked"
          android:text="이미지 바꾸기" />
  
      <FrameLayout
          android:layout_width="wrap_content"
          android:layout_height="557dp"
          android:layout_below="@+id/Button1"
          android:layout_alignParentStart="true"
          android:layout_centerHorizontal="true"
          android:layout_marginTop="36dp"
          android:layout_marginEnd="24dp"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/Button1">
  
          <ImageView
              android:id="@+id/imageView"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:src="@drawable/dream01"
              android:visibility="invisible" />
  
          <ImageView
              android:id="@+id/imageView2"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:src="@drawable/dream02"
              android:visibility="visible"
              />
      </FrameLayout>
  
  </androidx.constraintlayout.widget.ConstraintLayout>

• 제약 레이아웃 내부에 버튼을 하나 만들었다.

  • 해당 버튼을 누르면 이미지가 바뀌도록

• 버튼 아래에 프레임 레이아웃을 크기를 조절하여 두었다.

  • 그리고 ImageView 2개를 만들어 프레임 레이아웃 내부에 이미지 두개를 전환할 수 있도록 만들 것이다.

• 프레임 레이아웃은 가시성 속성을 통해 중첩된 뷰를 보여주거나, 안보여줄 수 있게 기능하도록 하기 때문에 imageView는 invisible. imageView2는 visible 속성으로 설정했다.

• MainActivity.java

  import androidx.appcompat.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.ImageView;
  
  public class MainActivity extends AppCompatActivity {
      ImageView imageView;
      ImageView imageView2;
  
      //어떤 이미지가 선택되었는지 알려주는 변수
      int index = 0;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          //id를 이용하여 뷰를 찾아주세요
          imageView = (ImageView)findViewById(R.id.imageView);
          imageView2 = (ImageView)findViewById(R.id.imageView2);
      }
  
      public void onButton1Clicked (View v) {
          index += 1;
          if (index > 1) {
              index = 0;
          }
          if (index == 0) {
              imageView.setVisibility(View.VISIBLE);
              imageView2.setVisibility(View.INVISIBLE);
  
          } else if (index == 1) {
              imageView.setVisibility(View.INVISIBLE);
              imageView2.setVisibility(View.VISIBLE);
          }
      }
  }

• imageView를 가져올 전역 변수

• 어떤 이미지가 선택 되었는지 알려주는 index 변수 초기화

• findViewById 메소드를 통해 resource 파일의 id를 리턴 받아 imageView를 가져오도록 한다.

• Button에 onClick 속성으로 onButton1Clicked를 작성한다.

  

• onButton1Clicked 메소드

  • 버튼을 누를때마다 index 변수 값 증가
  • 만약 인덱스 값이 1보다 크면 0으로 초기화
  • 만약 값이 0이면 imageView 사진 출력
  • 만약 값이 1이면 imageView2 사진 출력