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

이번 시간에는 Animation을 이용해서 뒤집어서 TextView 변경하는 방법을 알아보겠습니다. 

---

목차

1. 실행 화면
2. 메인 화면 activity_main.xml
3 애니메이션 폴더 만드는 방법
4 애니메이션 파일 만드는 방법
5. 메인 코드 MainActivity.kt

---

1. 실행 화면

2. 메인 화면 activity_main.xml

- 설명 -

1. 앞면 TextView

2. 뒷면 TextView

3. 화면 뒤집는 Button

<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="match_parent"
        android:layout_height="400dp">

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

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

    <Button
        android:id="@+id/flip_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="플립"
        android:layout_gravity="center"
        android:textSize="25sp"/>
</LinearLayout>

3 애니메이션 폴더 만드는 방법

1. res -> New -> Android Resource Directory

 

2. Directory name: anim , Resouce type: anim

 

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

1. anim -> New -> Animation Resource File

 

  2. File name: front_animator, back_animator

 

front_animator.xml

 - 설명 -

1. duration 

  지속 시간

2. propertyName

   애니메이션 객체 속성

3. valueFrom

   애니메이션 속성 시작 값

4. valueTo

   애니메이션 속성 끝나는 값

5. startOffset

   start()가 호출된 다음 애니메이션 지연 시간(1000: 1초)

<?xml version="1.0" encoding="utf-8"?>
<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

<?xml version="1.0" encoding="utf-8"?>
<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:valueFrom="-180"
        android:valueTo="0" />

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

5. 메인 코드 MainActivity.kt

- 설명 -

1. application.resources.displayMetrics.density

  해상도 가져오기

2. AnimatorInflater.loadAnimator

  Animator 초기화

3. frontAnim.setTarget

  애니메이션 적용할 타겟 지정

4. frontAnim.start()

  애니메이션 시작

class MainActivity : AppCompatActivity(){

    @SuppressLint("ResourceType")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var isFront: Boolean = true

        val cardFront: TextView = findViewById(R.id.card_front)
        val cardBack: TextView = findViewById(R.id.card_back)
        val flipBtn: Button = findViewById(R.id.flip_btn)

        //해상도값 가져오기
        val scale: Float = application.resources.displayMetrics.density

        cardFront.cameraDistance = 8000 * scale
        cardBack.cameraDistance = 8000 * scale

        //애니메이터 초기화
        val frontAnim = AnimatorInflater.loadAnimator(applicationContext, R.anim.front_animator) as AnimatorSet
        val backAnim = AnimatorInflater.loadAnimator(applicationContext, R.anim.back_animator) as AnimatorSet

        //플립 애니메이션 이벤트
        flipBtn.setOnClickListener {
            if(isFront){

                //뷰에 애니메이션 적용
                frontAnim.setTarget(cardFront)
                backAnim.setTarget(cardBack)
                frontAnim.start()
                backAnim.start()
                isFront = false
            }else{
                frontAnim.setTarget(cardBack)
                backAnim.setTarget(cardFront)
                frontAnim.start()
                backAnim.start()
                isFront = true
            }
        }
    }//onCreate
}

 

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

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

2022.08.02 - [안드로이드] - [안드로이드 코틀린] 버튼 Button 숨김(INVISIBLE), 보여짐(VISIBLE), 사라짐(GONE) 만드는 방법

[안드로이드 코틀린] 버튼 Button 숨김(INVISIBLE), 보여짐(VISIBLE), 사라짐(GONE) 만드는 방법

2022.08.01 - [안드로이드] - [안드로이드 코틀린] TextView 로또 번호 생성하는 방법

[안드로이드 코틀린] TextView 로또 번호 생성하는 방법