🏃[Android] Jetpack Glide demo

✏️ Study

• https://yotdark.tistory.com/42
• [Android] Glide로 이미지 보여주기

🌍 Setting

• CompileSdk = 30
• Minsdk = 24
• TargetSdk = 30

🤨 Why

• bitmap으로 대용량 이미지를 로드해 퍼포먼스가 떨어지고 메모리 릭이 발생하는 문제를 해결
• 애니메이션, 에러 등 간편하게 구현할 수 있음

🙋 Try

• Jetpack Glide 사용해보기
• 이미지 로드 성공, 로드 중, 로드 실패 에 따른 애니매이션 및 이미지 뷰잉

✏️ Gradle 설정

build.gradle

dependencies {
    					.
    					.
    					.
    // Glide
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    // Progress
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'
    					.
    					.
    					.
}

✏️ manifest 설정

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yotdark.example_glide">
		
		//인터넷 관리 퍼미션 허용
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Example_glide">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

• 권한 설정

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

✏️ Glide 를 통해 이미지를 보여 줄 View 구성

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="10dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image1"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:background="@drawable/background_imageview_glide"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/image2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/background_imageview_glide"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/image3"
        app:layout_constraintStart_toEndOf="@+id/image1"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/background_imageview_glide"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/image2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="로드 성공"
        android:textColor="#333333"
        app:layout_constraintEnd_toEndOf="@id/image1"
        app:layout_constraintStart_toStartOf="@id/image1"
        app:layout_constraintTop_toBottomOf="@id/image1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="로드 중"
        android:textColor="#333333"
        app:layout_constraintEnd_toEndOf="@id/image2"
        app:layout_constraintStart_toStartOf="@id/image2"
        app:layout_constraintTop_toBottomOf="@id/image2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="로드 실패"
        android:textColor="#333333"
        app:layout_constraintEnd_toEndOf="@id/image3"
        app:layout_constraintStart_toStartOf="@id/image3"
        app:layout_constraintTop_toBottomOf="@id/image3" />
</androidx.constraintlayout.widget.ConstraintLayout>

✏️ GlideActivity 클래스 생성

✏️ Glide 라이브러리를 통해서 이미지 로드

GlideActivity.kt

@GlideModule
class GlideActivity(private val context: Context): AppGlideModule() {

    fun glideLoadImage(view: ImageView, url: String, type: String){
        when(type){
            "loading" -> Glide.with(context)
                              .load(url)
                              .placeholder(getProgress())
                              .into(view)
            else -> Glide.with(context)
                         .load(url)
                         .placeholder(getProgress())
                         .centerCrop()
                         .error(R.drawable.warn_icon_24)
                         .into(view)
        }
    }

    private fun getProgress() = CircularProgressDrawable(context).apply {
        strokeWidth = 5f
        centerRadius = 30f
        start()
    }
}

• Glide를 사용해서 프로그래스, error, 이미지 정렬 등 여러가지 옵션 써보기

  when(type){
      "loading" -> Glide.with(context)
                        .load(url)
                        .placeholder(getProgress())
                        .into(view)
      else -> Glide.with(context)
                   .load(url)
                   .placeholder(getProgress())
                   .centerCrop()
                   .error(R.drawable.warn_icon_24)
                   .into(view)
  }

• CircularProgressDrawable 사용해서 로딩 처리 하기

  private fun getProgress() = CircularProgressDrawable(context).apply {
      strokeWidth = 5f
      centerRadius = 30f
      start()
  }

✏️ MainActivity 클래스 생성

MainActivity.kt

• 테스트할 이미지뷰에 이미지 로드

  private val glide: GlideActivity by lazy {
      GlideActivity(this@MainActivity)
  }
  
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
  
      glide.glideLoadImage(image1,
      "https://image.edaily.co.kr/images/photo/files/NP/S/2019/05/PS19050800712.jpg",
      "success")
      glide.glideLoadImage(image2,"https://node.com.haha.jpg","loading")
      glide.glideLoadImage(image3,"https://nothing.nothing","false")
  }