TransitionAnimation 적용

머터리얼 디자인의 화면 이동간 TransitionAnimation을 적용해보겠습니다.

적용하는 순서는 아래와 같습니다.

1. 테마에 windowContentRansitions 추가

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowContentTransitions" tools:targetApi="lollipop">true</item>
    </style>
 

위와같이 android:windowContentTransitions 를 추가한다.

그리고 해당 기능은 lollipop 이상에서만 구현이 가능하기 때문에  tools:targetApi="lollipop">를 추가해 주어야한다.

2. 이미지뷰에 transitionName 적용

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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"     tools:context=".MainActivity">       <ImageView         android:id="@+id/helloKitty"         android:layout_width="100dp"         android:layout_height="60dp"         android:scaleType="centerCrop"         android:src="@drawable/hellokitty"         android:transitionName="kitty"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintTop_toTopOf="parent" />   </android.support.constraint.ConstraintLayout> Colored by Color Scripter

cs

이동하기전의 이미지뷰와 이동할 액티비티의 이미지뷰에 transitionName을 맞춰서 지정해 주어야한다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".Main2Activity">
 
    <ImageView
        android:id="@+id/helloKitty"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:transitionName="kitty"
        android:src="@drawable/hellokitty"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</android.support.constraint.ConstraintLayout>

그리고 이동할 액티비티의 이미지뷰에 android:transitionName="kitty" 를 적용한다.

3. 이벤트 적용시 transitionAnimation 적용

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

package karrel.com.transitionainmationsample   import android.support.v7.app.AppCompatActivity import android.os.Bundle import kotlinx.android.synthetic.main.activity_main.* import android.support.v4.app.ActivityOptionsCompat import android.content.Intent import android.os.Build import android.support.annotation.RequiresApi     class MainActivity : AppCompatActivity() {       @RequiresApi(Build.VERSION_CODES.JELLY_BEAN)     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContentView(R.layout.activity_main)           helloKitty.setOnClickListener {             val intent = Intent(this, Main2Activity::class.java)             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Pass data object in the bundle and populate details activity.                 val options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, it, it.transitionName)                 startActivity(intent, options.toBundle())             } else {                 startActivity(intent)             }           }     } }   Colored by Color Scripter

cs

위와 같이 클릭이벤트가 발생할때 ActivityOptionsCompat.makeSceneTransitionAnimation(this, it, it.transitionName) 의 애니메이션 옵션을 적용해주어야합니다.

이렇게 간단하게 화면 이동간의 TransitionAnimation을 적용할 수 있습니다.

적용된 화면은 아래와 같습니다.

그리고 여기에 샘플이 있어요.

https://github.com/karrel84/TransitionAnimationSample