[Android Java] 안드로이드 액티비티 전환간 뷰 이동 애니메이션

갤러리 어플을 쓸 때 사진을 누르면 그 사진이 커지면서 화면 전체로 표시가 되는데 사용자가 보기에는 한 화면에서 그냥 사진만 이동한 것 처럼 보여도 실제로는 액티비티의 이동이 일어난 상황이다. 하지만 사용자는 애니메이션의 자연스러운 이동 덕분에 화면 전환을 제대로 인지하지 못한 것이다. 롤리팝버전 이후, 사용자가 앱을 사용하던 중 액티비티간 전환을 최대한 인지하지 못하도록 시각적 연속성을 부여한 기능이 추가되었다 . 그 기능이 바로 Trasition Animation이다.

 

이번에는 안드로이드의 액티비티간 화면 전환 중 원하는 뷰가 유동적으로 움직이게끔 애니메이션을 부여하는 작업을 해볼 것이다.

 

이렇게 액티비티간 애니메이션이 적용이 된다면 사용자 인터페이스면에서도 편리하면서 보기에도 매우 안정적이게 될 것이다.

 

 

---

작업

 

우선 액티비티1의 레이아웃을 준비해야 한다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/iv_title"
        android:layout_centerInParent="true"
        android:src="@drawable/androidimage"
        android:transitionName="imgTransition"
/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start"
        android:id="@+id/btn_Start"
        android:layout_below="@+id/iv_title"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

 

 

그리고 이동될 액티비티2의 레이아웃을 준비한다.

 

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"

    >

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="20dp"
        android:id="@+id/iv_title"
        android:layout_centerHorizontal="true"
        android:src="@drawable/androidimage"
        android:transitionName="imgTransition"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:textSize="17dp"
        android:text="this is an andorid image for my trasition test. \n this is an andorid image for my trasition test. \n this is an andorid image for my trasition test. \n"
        android:textAlignment="center"
        android:layout_below="@+id/iv_title"/>

</RelativeLayout>

 

잘 보면 각 뷰에 ImageView 가 있고 

두 뷰의 속성을 보면 src가 같은 것을 볼 수 있다.

그리고 중요한 속성이 한개 더 있는데

android:transitionName

이 속성을 두 뷰에 정의해 두고 이름도 똑같이 해야 프로그램이 이를 같은 트랜지션으로 인식하고 서로 이동하는 듯한 연출이 가능해 지기 때문이다.

 

나는 이미지 뷰 하나만 이동 할 예정이지만, 원한다면 textview나 button등 여러개 다양한 뷰에도 적용이 가능할 것이다.

 

이번에는 코딩부분을 확인해 보자.

 

 

MainActivity1.java

public class MainActivity extends AppCompatActivity {

    Button btnStart;
    ImageView ivTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnStart = (Button)findViewById(R.id.btn_Start);
        ivTitle = (ImageView) findViewById(R.id.iv_title);

        btnStart.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this,MainActivity2.class);
				//건너갈 액티비티를 정해둔 인텐트 객체 선언	
                    
                Pair[] pairs = new Pair[1];
                pairs[0] = new Pair<View,String>(ivTitle,"imgTransition");
				//액티비티에서 움직일 뷰와 트랜지션이름을 Pair배열에 담아둔다.

                ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, pairs);
				//액티비티 옵션을 적용하기 위해 ActivityOptions객체를 만들고 트랜지션 에니메이션에 대한 설정을 넣는다
                
                startActivity(intent,options.toBundle());
                
            }
        });

    }
}

 

여기서 Pair형 변수를 배열로 선언을 했는데 보통 이 방법의 경우 여러개 뷰의 애니메이션을 동시에 지정하기 위해 사용하는 경우다. 만약 한개만 사용할경우 

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, ivTitle, "imgTransition");

 

이방식을 사용하면 되고 여러개의 경우면 Pair 배열의 개수를 늘린 후 보든 뷰를 할당하면 될 것이다.