[Java][Android] ViewFlipper 사용해서 뷰 전환 애니메이션 구현하기

안녕하세요

이번시간에는 ViewFlipper 사용해서 뷰 전환하는 애니메이션을 구현해보도록 하겠습니다.

 

안드로이드 앱을 개발하다 보면 여러 개의 뷰를 번갈아 가며 보여줘야 할 때가 있습니다. 예를 들어, 이미지 슬라이드 쇼나 여러 단계로 이루어진 회원가입 폼 등이 있겠죠. 이때 단순히 뷰를 GONE으로 숨기고 VISIBLE로 표시하는 것보다, 자연스러운 애니메이션 효과를 주면서 전환하고 싶을 때 ViewFlipper를 사용하면 더욱 효과적으로 구현할 수 있습니다.

 

전체 코드입니다.

 

acitivity_main.xml

<?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"
  android:gravity="center"
  tools:context=".MainActivity">

  <ViewFlipper
    android:id="@+id/view_flipper"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="16dp"
    android:background="#E0E0E0">

    <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="첫 번째 페이지"
      android:textSize="24sp"
      android:textStyle="bold"
      android:textColor="@android:color/black"
      android:background="#FFCDD2"/>

    <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="두 번째 페이지"
      android:textSize="24sp"
      android:textStyle="bold"
      android:textColor="@android:color/black"
      android:background="#FFF9C4"/>

    <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="세 번째 페이지"
      android:textSize="24sp"
      android:textStyle="bold"
      android:textColor="@android:color/black"
      android:background="#C8E6C9"/>

  </ViewFlipper>

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <Button
      android:id="@+id/btn_previous"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="이전"
      android:layout_marginEnd="10dp"/>

    <Button
      android:id="@+id/btn_next"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="다음" />

  </LinearLayout>

</LinearLayout>

MainAcitivity.java

public class MainActivity extends AppCompatActivity {

  private ViewFlipper viewFlipper;
  private Button btnPrevious;
  private Button btnNext;

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

    viewFlipper = findViewById(R.id.view_flipper);
    btnPrevious = findViewById(R.id.btn_previous);
    btnNext = findViewById(R.id.btn_next);

    // 애니메이션 로드 (res/anim 폴더에 정의된 애니메이션 파일)
    // 다음 뷰가 들어올 때의 애니메이션 (오른쪽에서 왼쪽으로 슬라이드)
    Animation inAnimFromRight = AnimationUtils.loadAnimation(this, R.anim.slide_in_right);
    // 현재 뷰가 나갈 때의 애니메이션 (왼쪽으로 슬라이드)
    Animation outAnimToLeft = AnimationUtils.loadAnimation(this, R.anim.slide_out_left);

    // 이전 뷰가 들어올 때의 애니메이션 (왼쪽에서 오른쪽으로 슬라이드)
    Animation inAnimFromLeft = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
    // 현재 뷰가 나갈 때의 애니메이션 (오른쪽으로 슬라이드)
    Animation outAnimToRight = AnimationUtils.loadAnimation(this, R.anim.slide_out_right);

    // 다음 버튼 클릭 리스너
    btnNext.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // 다음 뷰 전환 시 적용할 애니메이션 설정
        viewFlipper.setInAnimation(inAnimFromRight);
        viewFlipper.setOutAnimation(outAnimToLeft);
        viewFlipper.showNext(); // 다음 뷰로 전환
      }
    });

    // 이전 버튼 클릭 리스너
    btnPrevious.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // 이전 뷰 전환 시 적용할 애니메이션 설정
        viewFlipper.setInAnimation(inAnimFromLeft);
        viewFlipper.setOutAnimation(outAnimToRight);
        viewFlipper.showPrevious(); // 이전 뷰로 전환
      }
    });
  }
}

 

 

 

그리고 ViewFlipper 에 적용할 애니메이션을 res폴더 아래에 anim 폴더를 새로 만들어 정의해주도록 하겠습니다.

 

res/anim/slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:shareInterpolator="false">
  <translate
    android:fromXDelta="100%"
    android:toXDelta="0%"
    android:duration="500"/>
</set>

 

res/anim/slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:shareInterpolator="false">
  <translate
    android:fromXDelta="0%"
    android:toXDelta="-100%"
    android:duration="500"/>
</set>

 

res/anim/slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:shareInterpolator="false">
  <translate
    android:fromXDelta="-100%"
    android:toXDelta="0%"
    android:duration="500"/>
</set>

 

res/anim/slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:shareInterpolator="false">
  <translate
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:duration="500"/>
</set>

 

 

시연 영상입니다.