마스크 구매 알림이 개발기 - 2

UI 개발도 어느정도 된 것 같았다.

 

그런데 보자.. 파싱 하는 중엔 아무 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>

글자도 조금씩 바운스를 타기 시작했다!

 

 

이제 거의 끝난건가..?