Tag: AnimatedImageView

Categories
Android

[Android] 애니메이션의 시작과 끝을 고민할 필요없는 AnimatedImageView 만들기


허접한 감이 없잖아 있지만 생각보다 다수의 이미지를 순차적으로 화면에 보여주는 애니메이션을 안드로이드에서 구현하기 위해서는 생각할 점이 많습니다. 제가 해보려는것의 위의 단순한 3개의 이미지를 반복해서 순차적으로 보여줄려는 것인데요 생각보다 복잡합니다.

/**
 * @author Eye
 */
public class AnimatedImageViewActivity extends Activity
{
private ImageView mIvAnimation;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // 에니메이션을 구동하기 위한 이미지뷰를 가져와 애니메이션을 세팅합니다.
        mIvAnimation = (ImageView) findViewById(R.id.animation);
        mIvAnimation.setBackgroundResource(R.anim.anim);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus)
    {
        super.onWindowFocusChanged(hasFocus);

        // 배경이미지로 등록된 Drawable을 가져와 애니메이션을 시작합니다.
        AnimationDrawable adAnimatedDrawable =
            (AnimationDrawable) mIvAnimation.getBackground();
        adAnimatedDrawable.start();
    }
}

이 글은 애니메이션 자체에 대해 쓴 글이 아니기 때문에 처음부터 끝까지의 내용을 적지는 않겠습니다. 다만 예제 소스를 그대로 올릴테니 궁금하시면 열어보세요.

자 위의 코드를 한번 봐보겠습니다. 이미지뷰를 findViewById를 이용하여 가져온 뒤에 setBackgroundImage를 이용하여 마치 평소의 이미지를 세팅하는것처럼 이미지를 설정합니다.

곧바로 애니메이션을 실행하고 싶지만 onCreate에서는 에니메이션을 플레이 할 수 없습니다. 그래서 위의 예제에서는 onWindowFocusChanged라는 메소드를 구현하여 그안에 애니메이션을 시작하는 코드를 넣었는데요. getBackground를 통해 얻은 Drawable객체를 AnimationDrawable객체로 캐스팅한 후에 start를 하고 있는것을 알 수 있습니다.

[예제 다운로드]

위의 예제를 실행해 보면 일단 애니메이션이 매우 잘 실행이 됩니다. 하지만 매우 많은 애니메이션을 처리해야 한다거나 적절한 시점에 애니메이션이 플레이되고 정지되어야 하고 적절하게 메모리에서 제거가 되어야 한다면 어떻게 해야 할까요?

아마도 그 모든것을 관리하는 로직을 생각하여 프로그램을 짜야 할 것입니다. 하지만 이 모든것을 자동으로 처리해 주는 방법을 구현해 보겠습니다.

AnimatedImageView.java

/**
 * 화면에 보여질때 자동으로 시작하고 보이지 않을때 중단되는
 * 에니메이션이미지뷰입니다. 
 * 
 * @author Eye
 */
@RemoteView
public class AnimatedImageView extends ImageView
{
private AnimationDrawable mAnim;
private boolean mAttached;

/**
* 기본 생성자
* 
* @param context 컨텍스트
*/
public AnimatedImageView(Context context)
{
super(context);
}

/**
* 기본 생성자
* 
* @param context 생성자
* @param attrs 속성들
*/
public AnimatedImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
}

/**
* 애니메이션을 변경하고 시작합니다.
*/
private void updateAnim()
{
Drawable drawable = getDrawable();
if(mAttached && mAnim != null)
{
mAnim.stop();
}
if(drawable instanceof AnimationDrawable)
{
mAnim = (AnimationDrawable)drawable;
if (mAttached)
{
mAnim.start();
}
}
else
{
mAnim = null;
}
}

@Override
public void setImageDrawable(Drawable drawable)
{
super.setImageDrawable(drawable);
updateAnim();
}

@Override
public void setImageResource(int resid)
{
super.setImageDrawable(null);
super.setImageResource(resid);
updateAnim();
}

@Override
public void onAttachedToWindow()
{
super.onAttachedToWindow();
if (mAnim != null)
{
mAnim.start();
}
mAttached = true;
}

@Override
public void onDetachedFromWindow()
{
super.onDetachedFromWindow();
if (mAnim != null)
{
mAnim.stop();
}
mAttached = false;
}

@Override
protected void finalize() throws Throwable
{
clearAnimation();
super.finalize();
}
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<kr.pe.theeye.animatedimageview.AnimatedImageView
android:id="@+id/animation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</LinearLayout>

위와 같은 변경으로 인해 이제 우리의 코드는 아래와 같이 단순해졌습니다. 아래가 전부입니다.

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

// 에니메이션을 구동하기 위한 이미지뷰를 가져와 애니메이션을 세팅합니다.
mIvAnimation = (AnimatedImageView) findViewById(R.id.animation);
mIvAnimation.setImageResource(R.anim.anim);
}

이제부터는 저 이미지뷰가 화면에 보이게 되면 자동으로 애니메이션이 시작되며 화면에 보이지 않게 될 경우 자동으로 애니메이션이 정지됩니다. 또한 많은 애니메이션을 로드해도 적절한 시기에 메모리 반환을 최대한 할수 있도록 노력하였습니다. (하지만 생각만큼 완벽하진 않습니다. 능력 미달…) 아무튼 잘 되는 것을 보실 수 있습니다. 완성된 예제를 올려두겠습니다.

[예제다운로드]

Exit mobile version