지난 글에서 display 하는 것은 모두 완료 됐습니다.
이제 볼 것은 뭘까요?
아까 ViewFlipper에 touch 리스너를 달았습니다.
그러면 ViewFlipper에 어떤 touch 이벤트가 발생했을 때 다른 동작을 할 수 있도록 코딩을 할 수 있는데요.
바로 그 코딩을 하는 onTouch() 메소드를 분석해 봐야 할 차례입니다.
public boolean onTouch(View v, MotionEvent event) {
if(v != flipper) return false;
if(event.getAction() == MotionEvent.ACTION_DOWN) {
downX = event.getX();
}
else if(event.getAction() == MotionEvent.ACTION_UP){
upX = event.getX();
if( upX < downX ) { // in case of right direction
flipper.setInAnimation(AnimationUtils.loadAnimation(getContext(),
R.anim.wallpaper_open_enter));
flipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(),
R.anim.wallpaper_open_exit));
if (currentIndex < (countIndexes-1)) {
flipper.showNext();
// update index buttons
currentIndex++;
updateIndexes();
}
} else if (upX > downX){ // in case of left direction
flipper.setInAnimation(AnimationUtils.loadAnimation(getContext(),
R.anim.push_right_in));
flipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(),
R.anim.push_right_out));
if (currentIndex > 0) {
flipper.showPrevious();
// update index buttons
currentIndex--;
updateIndexes();
}
}
}
return true;
}
이 메소드는 View 와 MotionEvent를 파라미터로 받습니다.
첫번째 줄에는 전달 받은 View 가 flipper 가 아니면 false를 return 하라고 돼 있네요.
여기서 다루는 view 는 flipper 이니까 이 라인은 건너 뛰고 다음 라인이 실행 될 겁니다.
다음 if 문을 보면 해당 Action 이 Down 일 경우 downX에 touch 점의 x 좌표를 대입합니다.
다음 else if 문은 action 이 up 인 경우 입니다.
우선 upX에 현재의 x 좌표를 대입시키구요.
upX 가 downX 보다 작으면 그러니까 사용자가 오른쪽으로 손가락을 slide 할 경우가 되겠네요.
그런 경우 flipper에 세팅하는 애니메이션을 wallPaper_open_enter 를 선택합니다.
이 애니메이션은 res 폴더 밑의 anim 폴더 밑에 xml 형태로 저장돼 있습니다. 그 내용은 아래와 같습니다.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/decelerate_interpolator"
android:detachWallpaper="true">
<scale android:fromXScale="2.0" android:toXScale="1.0"
android:fromYScale="2.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="@android:integer/config_mediumAnimTime" />
</set>
일단 Scale이 2.0에서 1.0 바뀌네요. X,Y 모두 다요.
그 다음엔 pivotX와 pivotY 가 각각 50%p 의 값을 가집니다.
그리고 duration은 android의 config.xml에 정의 된 config_mediumAnimTime 를 가져옵니다.
그 값은 400 이구요. 주석을 보면 medium-length animation을 위한 값(milliseconds)라고 돼 있네요.
pivot은 회전축이라는 뜻으로 애니메이션 효과에 사용됩니다. 여기서는 flip 효과에 사용되나 보네요.
다시 자바로 돌아가면 그 다음에는 wallpaper_open_exit 애니메이션이 실행되네요.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/decelerate_interpolator"
android:zAdjustment="top">
<scale android:fromXScale="1.0" android:toXScale=".5"
android:fromYScale="1.0" android:toYScale=".5"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="@android:integer/config_mediumAnimTime" />
<alpha android:fromAlpha="1.0" android:toAlpha="0"
android:duration="@android:integer/config_mediumAnimTime"/>
</set>
여기엔 alpha 값도 설정이 됐군요. 선명한 상태에서 완전 투명해 져서 안보이는 상태로 갑니다.
그리고 나서 currnetIndex 가 currentIndexes-1 보다 적을 경우 는 flipper에 있는 next 를 보여 줍니다.
그리고 currntIndex 에 1을 더해주고 updateIndexes()를 호출 합니다.
그럼 updateIndexes() 를 보죠.
private void updateIndexes() {
for(int i = 0; i < countIndexes; i++) {
if (i == currentIndex) {
indexButtons[i].setImageResource(R.drawable.green);
} else {
indexButtons[i].setImageResource(R.drawable.white);
}
}
}
countIdexes (3) 만큼 for 문을 돌리구요. i 가 currentIndex 일 경우 indexButtons 의 리소스 이미지를 바꿔 줍니다.
즉 현재 내용이 몇번째인지 그것을 알아내서 해당 버튼 이미지도 녹색으로 바꾸고 나머지는 흰색으로 보여지게 하는 부분 입니다.
다시 onTouch() 메소드의 다음 부분을 이어서 보면요.
else if (upX > downX) 일 경우 이 경우는 왼쪽방향일 경우라고 주석에 쓰여져 있네요.
이럴 경우 애니메이션으로 push_right_in.xml와 push_right_out 을 실행 하라고 돼 있습니다.
push_right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="0%p" android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_right_out
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="300"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
그리고 currentIndex가 0 보다 크면 flipper의 이전 내용을 보여 줍니다.
currentIndex에는 -1을 해 주고요.
그 다음에 updateIndexes() 메소드를 실행해서 이미지 버튼의 색을 바꿔주고요.
여기까지가 viewFlipper 예제에 대한 분석이었습니다.
'WEB_APP > Android' 카테고리의 다른 글
[CookBook] 원격에서JSON 데이터 받아와서 사용하기 (0) | 2013.09.20 |
---|---|
[CookBook] Tweening Animation 소스 분석하기 -2- (0) | 2013.09.19 |
[CookBook] Tweening Animation 소스 분석하기 -1- (0) | 2013.09.18 |
[PageSliding] SamplePageSliding 소스 파일 분석하기 (0) | 2013.09.17 |
[ViewPager] SampleVIewPager 소스 파일 분석하기 -2- (0) | 2013.09.16 |
[ViewPager] SampleVIewPager 소스 파일 분석하기 -1- (0) | 2013.09.15 |
[ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -2- (0) | 2013.09.13 |
[ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -1- (0) | 2013.09.13 |
안드로이드 프로그래밍 관련 메모... (0) | 2013.09.09 |
안드로이드 개발 환경 구축하기 (1) | 2013.09.06 |