안드로이드(Android) FrameLayout 이용해서 페이지 슬라이딩 구현하기

안드로이드(Android) FrameLayout 이용해서 페이지 슬라이딩 구현하기

 

개발환경 : window 7 64bit, Eclipse Kepler, Android 4.2.2

 

이전 아티클에서 FrameLayout 을 통해 ImaveView 를 교체하는 작업을

해 보았다. 이번에는 여기에 애니메이션 효과를 추가할 것이다.

VISIBLE, INVISIBLE 속성값을 셋팅함으로서 View 전환을 하게 하였는데

이 전환이 애니메이션 셋팅값에 따라 좌우로 서서히 변경되게

작업을 하였다.

 

애니메이션 효과를 이용하기 위해서 xml 값들을 만들어야 하는데

사용하는 태그에 따라 다양한 효과를 줄수 있다. 그리고 이 태그들을

조합해서 여러가지 효과를 줄수도 있다.

상위 태그인 <set> 속성중 android:interpolator 값들에 대한 내용이다.

 

linear_interpolator : 일정하게 진행이 된다

accelerate_interpolator : 점점 속도를 더해가며 빠르게 진행한다

decelerate_interpolator : 점점 느리게 진행한다

accelerate_decelerate_interpolator : accelerate/decelerate 동시적용 된다.

anticipate_interpolator : 시작위치에서 조금 뒤로 이동햇다가 이동

overshoot_interpolator : 도착위치를 조금 지나쳣다가 도착위치로 이동

anticipate_overshoot_interpolator : anticipate/ overshoot 동시적용 된다.

bounce_interpolator : 도착위치에서 팅기는 효과를 준다.

cycle_interpolator : 애니메이션을 반복한다.

 

1. translate : view 등을 이동시키면서 전환한다.

 

정수를 표현하면 절대좌표이며 % 자기기준, %p 부모레이아웃 기준으로

화면을 전환한다. 이 예제에서는 translate 만 사용하였다. 아래에 전환되는

다양한 방식에 대한 샘플을 추가하였다.

 

왼쪽에서 오른쪽으로 이동

<translate
        android:duration="200"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />

오른쪽에서 왼쪽으로 이동

<translate
android:duration="200"
        android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />

아래에서 위로 이동

<translate
        android:duration="200"
        android:fromYDelta="-100%"
        android:toYDelta="0%" />

위에서 아래로 이동

<translate
        android:duration="200"
        android:fromYDelta="0%"
        android:toYDelta="100%" />

왼쪽으로 이동하면서 사라짐

<translate
        android:duration="200"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="-100%"
        android:toYDelta="0%" />

오른쪽으로 이동하면서 사라짐

<translate
        android:duration="200"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="0%" />

상단으로 이동하면서 사라짐

<translate
        android:duration="200"
        android:fromYDelta="0%"
        android:toYDelta="-100%" />

하단으로 이동하면서 사라짐

<translate
        android:duration="200"
        android:fromYDelta="100%"
        android:toYDelta="0%" />

 

2. rotate : 회전을 시킨다

 

From 에서 to : 시작과 끝의 각도를 나타낸다.

pointX, Y : 회전하는 중심점

duration : 회전하는 시간

 

<rotate
android:fromDegrees="0"
        android:toDegrees="-45"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="400" />

 

3. scale : 확대/축소를 시키면서 애니메이션 효과를 얻는다

 

From 에서 to : x축, y축으로 비율만큼 늘었다 줄어든다.

1.4 배만큼 x축으로 늘어난 것을 0.0 으로 줄여버린다.

pointX,Y : 액션이 일어나는 좌표

 

<scale
	android:fromXScale="1.4"
	android:toXScale="0.0"
	android:fromYScale="0.6"
	android:toYScale="0.0"
	android:pivotX="50%"
	android:pivotY="50%"
	android:duration="400" />

 

4. alpha : 투명도를 이용해 애니메이션 효과를 얻으며 주로 다른 태그와 사용을 많이 한다.

 

From 에서 to : 투명도의 시작부터 끝

repeatMode : 전환, 시계아니면 시계반대방향

repeatCount : 반복횟수

 

<alpha 
android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:repeatMode="reverse"
        android:repeatCount="1" 
        android:duration="3000"/>

 

5. 프로젝트 실행화면과 전체 소스

 

전체 소스 :     FrameAnimationSample.zip

 

프로젝트 예제는 translate  를 이용하였다.

Prev 를 눌렀을 때 그림이 나와서 오른쪽으로 애니메이션처럼 정해진

시간에 맞게 움직인다. Next 버튼을 누르면 오른쪽에서 그림이 튀어나와

왼쪽으로 사라지게 된다.