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

이번 시간에는 2개의 이미지를  애니메이션(Animation)을 이용해서 변경해주는 방법에 대하여 알아보겠습니다.

---

목차

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 메인 화면 activity_main.xml

- 설명 -

1. 이미지뷰를 겹치기 위한 FrameLayout

2. 이미지를 보여주는 ImageView

3. 이미지를 바꿔주는 Button

4. 이미지 res -> drawable

mouse.png

0.00MB

lion.png

0.00MB

<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="200dp"
        android:layout_gravity="center">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lion"
            android:layout_gravity="center"/>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/mouse"
            android:layout_gravity="center"
            android:visibility="invisible"/>
    </FrameLayout>

    <Button
        android:id="@+id/crossFadeBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="크로스 페이드"/>
</LinearLayout>

 

3. 메인 코드 MainActivity.kt

- 설명 -

1. alpha(1f) 

  투명도(1f: 보이기, 0f 숨기기)

2. setDuration

  지속 시간(1000: 1초)

3. setListener

  이벤트

class MainActivity : AppCompatActivity(){

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

        //객체 생성
        val imageView1: ImageView = findViewById(R.id.imageView1)
        val imageView2: ImageView = findViewById(R.id.imageView2)
        val crossFadeBtn: Button = findViewById(R.id.crossFadeBtn)

        //버튼 이벤트
        crossFadeBtn.setOnClickListener {

            //크로스 페이드
            //하나는 서서히 사라지고, 하나는 서서히 보이는 기능
            imageView2.alpha = 0f //화면에서 사라짐
            imageView2.visibility = View.VISIBLE //안 보이지만 자리는 차지함

            //imageView2 애니메이션
            imageView2.animate()
                .alpha(1f) //화면에 보임
                .setDuration(3000) //3초
                .setListener(null)

            //imageView1 애니메이션
            imageView1.animate()
                .alpha(0f) //안보임
                .setDuration(3000) //3초
                .setListener(object: Animator.AnimatorListener{
                    override fun onAnimationStart(p0: Animator?) {}

                    override fun onAnimationEnd(p0: Animator?) {
                        //애니메이션 끝나면 실행
                        imageView1.visibility = View.GONE //사라짐
                        Toast.makeText(applicationContext, "이미지 전환",
                            Toast.LENGTH_SHORT).show()
                    }

                    override fun onAnimationCancel(p0: Animator?) {}

                    override fun onAnimationRepeat(p0: Animator?) {}

                })
        }
    }//onCreate
}

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

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

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

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

2022.07.31 - [안드로이드] - [안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

[안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법