[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 카드플립(CardFlip)

이번 시간에는 애니메이션을 통해 2개의 이미지가

뒤집히며 교체되는 모습을 만들어보겠습니다. 

---

목차

1. 메인 화면 구성 activity_main.xml

2. 애니메이션 만들기 

2-1 애니메이션 폴더 만드는 방법

2-2 애니메이션 파일 만드는 방법

3. 메인 코드 구현 MainActivity.java

4. 실행화면

---

1. 메인 화면 구성 activity_main.xml

FrameLayout 안에 2개의 TextView가 겹쳐져 있습니다.

버튼을 통해 TextView가 뒤집히며 교체됩니다.

<?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">

    <FrameLayout
        android:layout_width="500dp"
        android:layout_height="400dp">

           <TextView
        android:id="@+id/card_back"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_margin="50dp"
        android:background="@color/teal_200"
        android:gravity="center"
        android:text="Back"
        android:textColor="@color/white"
        android:textSize="30sp"/>


    <TextView
        android:id="@+id/card_front"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_margin="50dp"
        android:background="@color/purple_200"
        android:gravity="center"
        android:text="Front"
        android:textColor="@color/white"
        android:textSize="30sp"/>
    </FrameLayout>

    <Button
        android:id="@+id/flip_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="플립 버튼" />

</LinearLayout>

색상

res -> values -> colors

<color name="teal_200">#FF03DAC5</color>
<color name="purple_200">#FFBB86FC</color>
<color name="white">#FFFFFFFF</color>

 

2. 애니메이션 만들기

2-1 애니메이션 폴더 생성하는 방법

res -> New -> Android Resource Directory

 

Directory name: anim -> Ok

애니메이션 폴더가 생성됩니다.

 

2-2 애니메이션 파일 생성하는 방법

anim -> New -> Animation Resource File

 

File name: front_animator, back_animator

 

front_animator.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1000"
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="180" />
    
    <objectAnimator
        android:duration="1"
        android:propertyName="alpha"
        android:startOffset="500"
        android:valueFrom="1.0"
        android:valueTo="0.0" />
</set>

 

back_animator.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0" />

    <objectAnimator
        android:duration="1000"
        android:propertyName="rotationY"
        android:repeatMode="reverse"
        android:valueFrom="-180"
        android:valueTo="0" />

    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:valueFrom="0.0"
        android:valueTo="1.0" />
</set>

 

 

3. 메인 코드 구현 MainActivity.java

public class MainActivity extends AppCompatActivity {
    
    AnimatorSet front_anim;
    AnimatorSet back_anim;

    boolean isFront = true;

    TextView card_front;
    TextView card_back;
    
    @SuppressLint("ResourceType")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        //해상도값 가져오기
        Float scale = getApplicationContext().getResources().getDisplayMetrics().density;

        card_front = findViewById(R.id.card_front);
        card_back = findViewById(R.id.card_back);

        card_front.setCameraDistance(8000 * scale);
        card_back.setCameraDistance(8000 * scale);

        //애니메이터 객체에 적용
        front_anim  = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(), R.anim.front_animator);
        back_anim   = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(), R.anim.back_animator);

        Button flipBtn = findViewById(R.id.flip_btn);
        flipBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(isFront){
                    front_anim.setTarget(card_front);
                    back_anim.setTarget(card_back);
                    front_anim.start();
                    back_anim.start();
                    isFront = false;
                }else{
                    front_anim.setTarget(card_back);
                    back_anim.setTarget(card_front);
                    front_anim.start();
                    back_anim.start();
                    isFront = true;
                }
            }
        });
    }
}

 

4. 실행화면

2021.12.26 - [안드로이드] - [안드로이드] 속성 애니메이션 (이미지를 움직이게 하는 방법)

[안드로이드] 속성 애니메이션 (이미지를 움직이게 하는 방법)

2021.12.27 - [분류 전체보기] - [안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

2021.12.24 - [안드로이드] - [안드로이드] 동물 리스트(ListView) 만드는 방법

[안드로이드] 동물 리스트(ListView) 만드는 방법