Android Fragment 전환 애니메이션 효과 적용하기

안녕하세요.

이번 내용으로는 Fragment의 화면 전환 시 애니메이션 효과를 적용하는 방법에 대해 기록하려 합니다.

Fragment 전환 애니메이션 동작 Layout 만들기

우선 애니메이션 효과를 적용하기 위해 res/anim/애니메이션. xml을 생성합니다.

동작은 좌,우 가로로 움직이는 애니메이션에 대한 내용입니다.

 

첫 번째로 anim 폴더를 생성합시다.

res 우클릭 > New > Android Resource Directory

Resource Directory

Resource type에서 anim을 선택합니다.

Resource 이름 선택

이후 OK 버튼을 누르면 res/anim 폴더가 생성된 걸 확인할 수 있습니다.

 

두 번째로 실 애니메이션 효과를 적용할 xml 파일을 생성합니다.

res 우클릭 > New > Animation Resource File을 선택합니다.

Resource File

창이 생성되면 파일 이름만 설정하여 확인버튼을 누르면 됩니다.

저는 아래와 같이 파일을 생성했습니다.

애니메이션 파일 리스트

이제 xml 파일의 내용을 작성해 줍시다.

 

to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  >
    <objectAnimator
        android:propertyName="x"
        android:duration="600"
        android:valueFrom="-400dp"
        android:valueTo="0"
        android:valueType="floatType" />
</set>

from_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  >
    <objectAnimator
        android:propertyName="x"
        android:duration="600"
        android:valueFrom="0"
        android:valueTo="400dp"
        android:valueType="floatType" />
</set>

to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <objectAnimator
        android:propertyName="x"
        android:duration="600"
        android:valueFrom="400dp"
        android:valueTo="0"
        android:valueType="floatType" />
</set>

from_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <objectAnimator
        android:propertyName="x"
        android:duration="600"
        android:valueFrom="0"
        android:valueTo="-400dp"
        android:valueType="floatType" />
</set>

xml 파일의 각 objectAnimator 속성 값의 설명은 본문 아래에 기록해 두었으니 참고하도록 하자.

 

각 xml파일의 애니메이션 설정된 내용은 이렇다.

to_left.xml	새로운 Fragment 가 생성될 방향
from_left.xml	기존 Fragment 가 사라질 방향
to_right.xml	새로운 Fragment 가 생성될 방향
from_right.xml	기존 Fragment 가 사라질 방향

즉, 새로운 Fragment 가 왼쪽에서 오른쪽으로 삽입되는 애니메이션을 설정하려면 to_left.xml , from_left.xml 두 개를 사용하면 된다.

반대로 오른쪽에 새로운 Fragment 가 있으면 to_right.xml , from_right.xml를 사용하면 된다.

 

Fragmet 애니메이션 이벤트 적용

이제 실 코드단에 적용을 해봅시다.

아래와 같이 Fragment로 전환할 경우 'setCustomAnimations' API를 통해 애니메이션을 적용할 수 있습니다.

FragmentTransaction transaction = getActivity().getSupportFragmentManager().beginTransaction();
    Setting_Fragment sf = new Setting_Fragment();
    transaction.setCustomAnimations(R.anim.to_left, R.anim.from_left);
    transaction.replace(R.id.fragment_container, sf);
    transaction.commit();

 

setCustomAnimations 은 4가지 인자 값을 받을 수 있으며 뒤로 가기 버튼에 대한 내용을 설정하지 않으려면 위 코드와 같이 인자 2개만 적으면 됩니다.

첫번째 인자	생성될 Fragment 의 애니메이션 값
두번째 인자	기존 Fragment 의 애니메이션 값
세번째 인자	Fragment 전환 후 '뒤로가기' 버튼 눌렀을 시의 생성될 Fragment 애니메이션 값
네번때 인자	Fragment 전환 후 '뒤로가기' 버튼 눌렀을 시의 기존 Fragment 애니메이션 값

 

 

objectAnimator 속성 값 상세 설명

android:propertyName

문자열. 필수사항. 애니메이션 할 객체 속성으로, 이름별로 참조됩니다. 예를 들어 View 객체에 "alpha" 또는 "backgroundColor"를 지정할 수 있습니다. 그러나 objectAnimator 요소는 target 속성을 노출하지 않으므로 XML 선언에서 애니메이션할 객체를 설정할 수 없습니다. loadAnimator()를 호출하여 애니메이션 XML 리소스를 확장한 다음 setTarget()을 호출하여 이 속성이 포함된 타깃 객체를 설정해야 합니다.

 

android:valueTo

부동 소수점 수, 정수 또는 색상. 필수사항. 애니메이션 된 속성이 끝나는 값입니다. 색은 6자리 16진수 숫자로 표현됩니다(예: #333333).

 

android:valueFrom

부동 소수점 수, 정수 또는 색상. 애니메이션된 속성이 시작되는 값입니다. 지정되지 않으면 애니메이션은 속성의 get 메서드로 얻은 값에서 시작합니다. 색은 6자리 16진수 숫자로 표현됩니다(예: #333333).

 

android:duration

정수. 애니메이션의 재생 시간(단위: 밀리초)입니다. 기본값은 300밀리 초입니다.

 

android:startOffset

정수. start()가 호출된 다음 애니메이션이 지연되는 시간(단위: 밀리초)입니다.

 

android:repeatCount

정수. 애니메이션의 반복 횟수입니다. "-1"로 설정하여 무한 반복하거나 양의 정수로 설정합니다. 예를 들어 값 "1"은 애니메이션이 처음 실행되고 나서 한 번 더 반복된다는 의미이므로 애니메이션은 총 두 번 재생됩니다. 기본값은 "0"으로, 반복이 없음을 의미합니다.

 

android:repeatMode

정수. 애니메이션이 애니메이션의 끝부분에 도달했을 때의 동작입니다. 이 속성을 적용하려면 android:repeatCount를 양의 정수 또는 "-1"로 설정해야 합니다. 반복 시 애니메이션을 역방향으로 재생하려면 "reverse"로 설정하고, 매번 처음부터 애니메이션을 반복하려면 "restart"로 설정합니다.

 

android:valueType

키워드 값이 색상인 경우 이 속성을 지정하지 마세요. 애니메이션 프레임워크가 색상 값을 자동으로 처리합니다.

값	설명
intType	애니메이션된 값이 정수임을 명시합니다.
floatType(기본값)	애니메이션 값이 부동 소수점 수임을 명시합니다.