[Android/Kotlin] 안드로이드 액티비티 전환 애니메이션 사용하기

시작하기

안녕하세요. 기리기리 입니다. 오늘은 안드로이드 액티비티 전환 애니메이션에 대해서 알아볼게욤.

 

액티비티 이동시 전환 애니메이션을 사용하면 사용자에게 좀 더 시각적으로 어필할 수 있습니다.

 

이번에는 A -> B  그리고 B -> A 로 액티비티가 전환될 때 애니메이션을 적용해 보도록 하겠습니다.

 

적용한 모습은 아래와 같습니다.

 

[Slide Left / Slide Right] & [Slide Up / Slide Left]

 

 

 

Anim 파일 만들기

Res 폴더에 anim 폴더를 생성해 줍니다. 

 

 

anim 폴더에 적용될 xml 파일을 생성해 줍니다.

액티비티가 왼쪽에서 오른쪽으로 전환되는 애니메이션을 위해서 총 4개의 파일이 필요합니다.

같은 방식으로 액티비티가 위에서 아래로 전환되는 애니메이션을 위해서 총 4개의 파일이 필요합니다.

 

먼저 왼쪽 -> 오른쪽 / 오른쪽 -> 왼쪽으로 전환되는 anim 파일입니다.

 

slide_left_enter

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

 

slide_right_enter

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

 

slide_left_exit

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

 

slide_left_exit

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

-> duration으로 애니메이션 지속되는 시간을 지정하고, from/to를 이용하여 어디로 이동할 지 지정합니다.

 

 

같은 방식으로 위 -> 아래 / 아래 -> 위 로 전환되는 anim 파일을 생성합니다.

 

slide_up_enter

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

 

slide_down_enter

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

 

slide_up_exit

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

 

slide_down_exit

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

 

액티비티에 적용하기

액티비에 적용하기 위해서 우선 액티비티를 추가합니다.

MainActivity / SldieLeftActivity / SlideUpActivity

 

MainActivity

class MainActivity : AppCompatActivity() {

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

        findViewById<Button>(R.id.btn_slide_left).setOnClickListener {
            val intent = SlideLeftActivity.newIntent(this)
            startActivity(intent)
            overridePendingTransition(R.anim.slide_right_enter, R.anim.slide_right_exit)
        }

        findViewById<Button>(R.id.btn_slide_up).setOnClickListener {
            val intent = SlideUpActivity.newIntent(this)
            startActivity(intent)
            overridePendingTransition(R.anim.slide_up_enter, R.anim.slide_up_exit)
        }
    }

}

 

MainActivity는 두 개의 버튼을 가지고 클릭 시 하나는 왼쪽/오른쪽 다른 하나는 위/아래 애니메이션 전환을 보여줄 예정입니다. 액티비티 전환 시 srtartActivity() 이후 overridePendingTransition을 사용하여 애니메이션을 적용합니다. overridePendingTransition은 시작할 때 애니메이션과 끝날 때 애니메이션을 매개변수로 받습니다. 

 

SlideLeftActivity

다음으로 다시 MainActivity로 돌아올때 애니메이션을 지정합니다.

class SlideLeftActivity : AppCompatActivity() {

    companion object {
        fun newIntent(context: Context): Intent {
            return Intent(context, SlideLeftActivity::class.java)
        }
    }

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

    override fun onBackPressed() {
        super.onBackPressed()
        overridePendingTransition(R.anim.slide_left_enter, R.anim.slide_left_exit)
    }

}

 

SlideUpActivity

class SlideUpActivity : AppCompatActivity() {

    companion object {
        fun newIntent(context: Context): Intent {
            return Intent(context, SlideUpActivity::class.java)
        }
    }

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

    override fun onBackPressed() {
        super.onBackPressed()
        overridePendingTransition(R.anim.slide_down_enter, R.anim.slide_down_exit)
    }
    
}

같은 방식으로 onBackPressed() 함수가 호출 되고 나서 애니메이션을 적용했습니다.

이제 앱을 실행하면 애니메이션이 적용된 걸 확인 할 수 있습니다. 이러한 방식으로 사용자게 좀 더 시각적으로 있어보이게 할 수 있습니다.

 

추가적으로 액티비티가 많아지면 사용하는데 불편한 점이 있습니다.  이때 코틀린의 Extension 기능을 사용하면 편리하게 사용할 수 있습니다.

 

Extensions

Extension 파일을 하나 만들어 아래와 같이 activity 확장함수를 만들어 줍니다.

fun Activity.slideLeft() {
    overridePendingTransition(R.anim.slide_left_enter, R.anim.slide_left_exit)
}

fun Activity.slideRight() {
    overridePendingTransition(R.anim.slide_right_enter, R.anim.slide_right_exit)
}

fun Activity.slideUp() {
    overridePendingTransition(R.anim.slide_up_enter, R.anim.slide_up_exit)
}

fun Activity.slideDown() {
    overridePendingTransition(R.anim.slide_down_enter, R.anim.slide_down_exit)
}

 

이제 해당 액티비티에서 slideLeft(), slideRight(), slideUp(), slideDown()함수를 호출하여 사용하시면