[Android] 스레드 애니메이션

스레드를 이용하여 이미지를 교체시켜주는 (슬라이드처럼) 단순한 예제이다.

버튼을 누르면 이미지뷰에 동적으로 이미지가 변경되기 시작한다. (이미지 슬라이드 시작)

수업에서는 Thread 클래스를 상속받아 애니메이션을 위한 스레드 클래스를 생성해서 start 메서드를 이용해 이미지 애니메이션을 구현해보았다.

먼저 버튼과 이미지뷰만 있는 화면을 구성한다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:text="시작"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/imageView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

    <ImageView
        android:id="@+id/imageView"
        android:src="@drawable/c_img_collect_food"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

각 뷰의 ID 를 findViewById 메서드로 등록해주고, 액티비티의 멤버변수로 Drawable 객체를 담을 ArrayList 와 UI 를 접근할 핸들러 객체를 선언해준다. (예전에 포스팅했듯이, UI 접근은 핸들러를 통해서만 해야한다. ImageView 에 set 하는 것과 같이 Thread 에서 직접 UI 를 접근할 경우 오류가 발생한다. 참고 : http://one-delay.tistory.com/28?category=766130)

public class MainActivity extends AppCompatActivity {
    ImageView mImageView;

    ArrayList<Drawable> mList = new ArrayList<>();

    Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mList.add(getDrawable(R.drawable.e_img_collect_kch));
        mList.add(getDrawable(R.drawable.c_img_collect_food));
        mList.add(getDrawable(R.drawable.d_img_collect_sch));
        mList.add(getDrawable(R.drawable.f_img_collect_bth));
        mList.add(getDrawable(R.drawable.g_img_collect_elec));
        mList.add(getDrawable(R.drawable.h_img_collect_room));

        mImageView = findViewById(R.id.imageView);

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AnimThread thread = new AnimThread();
                thread.start();
            }
        });
    }
}

다음으로 Thread 클래스를 상속받아 새로운 클래스를 작성하고, run 메서드를 오버라이드 한다. (이너클래스로 작성하여 클래스 멤버변수를 접근할 수 있게 하였다.)

public class AnimThread extends Thread {
    @Override
    public void run() {
        int index = 0;
        while (true) {
            final Drawable drawable = mList.get(index % mList.size());
            handler.post(new Runnable() {
                @Override
                public void run() {
                    mImageView.setImageDrawable(drawable);
                }
            });
            index++;
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}

버튼을 누르면 이미지가 동적으로 교체되는 것을 볼 수 있다.

 갑자기 액티비티에서 해당 기능을 모두 구현하였을 경우 어떻게 될지 궁금해서 따로 작성해보았는데, 오류는 안나지만 역시나 제대로 동작하지도 않고 먹통이 되어버렸다. 아마 메인스레드에서 while 루프가 계속해서 돌고 있기 때문에 버튼이벤트도 못받고 이미지뷰도 갱신되지 않아서 UI 가 제대로 작동하지 않는 것 같아 보인다.

- 출처 : 부스트코스 강의