마스크 구매 알림이 개발기 - 2
UI 개발도 어느정도 된 것 같았다.
그런데 보자.. 파싱 하는 중엔 아무 UI 변경이 없으니 사용자 입장에선 이게 지금 정보를 가져오고 있는건지 오다 뺏겼는지 알 수가 없다. 가운데 버튼이 돌아가게 만들고 싶었다.
자 우리 refresh 버튼을 어떻게 돌려볼까. android animation 키워드로 검색해 보았다.
오호 뭐가 많이 나온다. 잘 읽어보니 어렵지 않아 보여서 바로 시도해보기로 했다.
1. res 디렉터리 아래에 anim 이라는 디렉터리 생성
2. anim 디렉터리 내부에 loading.xml 생성
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/bounce_interpolator"
android:repeatCount="infinite"
android:duration="1000"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360">
</rotate>
</set>3. 애니메이션을 로드할 액티비티에서 로드 및 실행
///// 애니메이션 로드
Animation animation;
animation = AnimationUtils.loadAnimation(context, R.anim.loading);
///// 애니메이션을 적용할 객체.startAninmation 으로 애니메이션 시작
refreshBtn.startAnimation(animation);
와! refresh 버튼이 돌아가고 있다! 그런데 한가지 문제가 있다. 파싱 작업이 끝난 후에는 멈췄다가 버튼을 누르면 다시 애니메이션이 실행되게 하고 싶었다.
어떻게 해서 애니메이션을 멈추는 메소드를 찾아냈다.
refreshBtn.clearAnimation();
그런데 clearAnimation()을 하고 나니 아무리 startAnimation을 해주어도 애니메이션이 다시 시작하지 않았다.
우여곡절 끝에 찿아낸 애니메이션 clear 후 다시 시작하는 방법.. 공개!
animation.setFillEnabled(false);애니메이션 로드 시에 setFillEnabled(false) 를 해주면 clear 후에 start가 잘 동작했다.
이 옵션이 true면 애니메이션의 예전 상태를 저장한다고 한다. 왜 false로 해줬을때 start가 먹는건진 좀 더 찾아봐야겠다.
refresh 버튼 아래에 있는 "구매가능한 마스크 찾는 중..." 이 문구도 조금씩 움찔움찔 해줬음 싶었다.
이번엔 loading.xml과 달리 rotate가 아닌 scale을 사용했다.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toXScale="1.3"
android:toYScale="1.3" />
</set>글자도 조금씩 바운스를 타기 시작했다!
이제 거의 끝난건가..?