[Android] Glide 2 - 로딩 애니메이션 구현

 

 

 

예전에 글라이드에 대한 글을 한번 남긴 적이 있었다.

 

2024.03.25 - [안드로이드] - [Android] Gilde, 글라이드

[Android] Gilde, 글라이드

 

 

사용자 관점에서 생각

 

내가 보통 글라이드를 사용할 때

url로 이미지를 로드하는 경우가 굉장히 많다.

그래서 이미지 로드가 완료되기 전 또는 에러가 나서 이미지를 불러오지 못했을 때 대체 이미지를 보여줘야 하는 경우가 많았다.

그럴 때마다 나는 placeholder() 메서드나 error() 메서드를 사용해서 gif 가 아닌 png 형식의 로딩이미지를 사용했었다.

 

 

 

예를 들자면 이런 이미지를 사용했다.

 

근데 어플리케이션 사용자 입장에서 생각해 보니까 불러오고자 하는 이미지를 불러올 때 1~2초 정도 정지되어 있는 이미지가 보이는 것은 그렇다고 쳐도, 이미지가 불러와지질 않거나 에러가 났는데 하염없이 저 이미지만 보인다고 생각해 보면

앱이 멈춘 것과도 같은 느낌을 받을 수 있겠다는 것을 깨달았다.

그래서 placeholder() 메서드에 기존의 png 형식의 파일을 불러오는 것이 아닌 gif 파일을 불러와서 동적인 느낌을 주고자 했다.

 

 

이렇게 말이다.

 

근데!!

placeholder() 메서드는 gif파일을 불러올 수가 없었고, 여러 가지 방법을 찾던 중에

thumnail() 메서드를 활용하면 된다는 것을 알아냈다.

 

 

예제

글라이드를 사용하기 위해서 그래 들:모듈 단에 데이터바인딩 관련 줄을 추가해 준다.

// 데이터 바인딩
dataBinding {
    enabled = true
}

 

매니페스트에서 네트워크에 관련된 권한을 설정해줘야 한다.

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

 

뷰 바인딩을 사용하기 위해서 xml을 <layout></layout>으로 감쌌다.

<?xml version="1.0" encoding="utf-8"?>


<layout>

<androidx.constraintlayout.widget.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">

    <ImageView
        android:id="@+id/imageViewGlide"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>


</layout>

 

바인딩을 사용해서 좀 더 코드를 간결하게 작성할 수 있었다.

이미지 뷰에 글라이드를 통해서 이미지를 띄우는 메서드를 만든 뒤에

이미지뷰를 클릭할 때마다 새로운 이미지를 로드할 수 있게 해 주었다.

 

참고로 저 cataas.com이라는 사이트는 무료로 랜덤 하게 고양이 사진을 제공해 주는 사이트이다.
그 사이트의 무료 api를 사용해서 간단하게 구현해 보았다.

package abled.semina.glide

import abled.semina.glide.databinding.ActivityMainBinding
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.bumptech.glide.Glide
import com.bumptech.glide.load.engine.DiskCacheStrategy

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private val loadingGif = R.raw.loading // 로컬 리소스로 준비된 GIF

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        loadNewImage()

        //이미지 클릭시 다시한번 이미지 로드
        binding.imageViewGlide.setOnClickListener {
            loadNewImage()
        }

    }

    // 이미지 뷰에 이미지 띄우기 with Glide
    private fun loadNewImage(){

        Glide.with(this)
            .load("https://cataas.com/cat?type=square")
            .thumbnail(Glide.with(this).load(loadingGif))
            .diskCacheStrategy(DiskCacheStrategy.NONE)
            .skipMemoryCache(true)
            .into(binding.imageViewGlide)

    } //loadNewImage()
}

 

 

클릭할 때마다 thumnail() 메서드를 통해 로딩 애니메이션이 잘 구현된 것을 확인할 수 있다.

 

 

 

간단한 서비스 애플리케이션을 만드는 프로젝트를 하다 보면 개발자가 만들기 편하게 만드는 경우가 한 번씩 생기는 것 같다. 이것보다는 당연히 사용자가 우선시돼서 사용자가 사용하는데 불편함이 없도록 한번 더 생각하면서 열심히 공부를 해야겠다!