[안드로이드] Glide를 이용하여 gif 파일을 dialog에서 실행하기

일단 gif 파일을 준비합니다.

<manifests>

  <activity
            android:name=".LoadingDialog"
            />

    처음으로 manifests에 깔끔하게 선언을 합니다.

<build.gradle(Module:app)>

dependencies {
	//glide 사용을 위한 라이브러리
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
    }

    gradle에 들어가셔서 dependencies에 2개를 추가해줍시다.

<java>

public class LoadingDialog extends Dialog {


    LoadingDialog(@NonNull Context context) {
        super(context);

        requestWindowFeature(Window.FEATURE_NO_TITLE);   //다이얼로그의 타이틀바를 없애주는 옵션입니다.
        Objects.requireNonNull(getWindow()).setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));  //다이얼로그의 배경을 투명으로 만듭니다.
        getWindow().setGravity(Gravity.CENTER);

        setContentView(R.layout.dialog_loading);     //다이얼로그에서 사용할 레이아웃입니다.

        ImageView gifImageView = findViewById(R.id.loading_image);
        Glide.with(getContext()).asGif()
                .load(R.drawable.loading_image)
                .into(gifImageView);


    }
}

다이어로그와 같이 gif를 화면에 띄워주고 gif 실행을 하기 위해서 Dialog를 받습니다.

특히 Glide는 url를 통해 파일을 바로 받을수 있는데 

.load( ) <-에서 R.drawable.파일 대신에 해당 파일의 url 주소를 써주시면 바로 받아와서 표현이 가능합니다.

(glide 에서는 gif 파일 표현이 가능합니다만 비슷한 라이브러리 Picasso는 gif 표현이 불가능합니다)

 

static LoadingDialog loadingDialog;

DisplayMetrics dm = getApplicationContext().getResources().getDisplayMetrics(); //디바이스 화면크기를 구하기위해
        int width = dm.widthPixels; //디바이스 화면 너비
        int height = dm.heightPixels; //디바이스 화면 높이

        //로딩이미지 gif 형식
        loadingDialog = new LoadingDialog(getContext());
        WindowManager.LayoutParams wm = loadingDialog.getWindow().getAttributes();  //다이얼로그의 높이 너비 설정하기위해
        wm.copyFrom(loadingDialog.getWindow().getAttributes());  //여기서 설정한값을 그대로 다이얼로그에 넣겠다는의미
        wm.width = (int)(width *0.5);  //화면 너비의 절반
        wm.height = (int)(height *0.5);

위에 코드는 다이어로그를 부르는 코드입니다. 해당 코드는 MainActivity나 원하는 곳에 넣어주시면 됩니다.

<xml>

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/loading_image"
        android:layout_width="70dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:contentDescription="@string/loading_image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.512"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/loading_image" />

</android.support.constraint.ConstraintLayout>

    drawable에 파일을 넣어주고 잘 연결해줍니다.

 

<result>

보시다시피 api를 불러오는 프로젝트입니다. 버튼을 누르고 api를 불러오는 동안 반응성을 보여주기 위해 gif를 사용했습니다. 버튼을 눌렀을때 dialog를 불러오고 반응이 끝나면 다시 제거하는 방식입니다.